HTML페이지에 스타일시트를 적용하는 방법은 크게 3가지로 사용합니다. 특수하게 적용하는 방법도 있지만 기초부분에서는 제외합니다. 3가지중 가장 많이 쓰이는 방법이 웹표준에 의한 스타일시트 적용법인 외부 스타일시트(External Style Sheet) 입니다. 그리고 인라인(In-line Style Sheet)방식과 임베디드(Embedded
Style Sheet )방식이 있습니다.
우선 3가지 방식에 대해서 알아보기 전에 미니 웹사이트를 만들어봅니다. 왜냐하면 외부 스타일시트 방식의 효율성을 증명하기 위해서죠. 이전 글에서는 W3C School의 실험용 페이지를 이용해서 몇가지 코드만 입력해도 가능했는데 이번에는 실제로 웹페이지를 하나하나 코드를 입력해서 만들어보고 사용되는 태그에 대해서도 설명을 드립니다.
위 압축파일은 이글에서 사용된 파일입니다. 코드에 대해서는 많이 타이핑을 해보는 것이 좋습니다. 코드에 자신있다 해도 외워서 쳐보면 어딘가 하나씩 빼먹어서 오류가 나거나 원하는대로 나오지 않기 때문이죠. 코드는 많이 쳐본 사람이 왕입니다. 코드를 입력하려면 텍스트 에디터가 필요하죠 무료이면서도 훌륭한 텍스트 에디터가 많습니다. 제가 주로 사용하는 것은 노트패드 플러스 플러스(Notepad++) 와 서브라임 텍스트 2(Sublime Text 2) 입니다. 여기서는 서브라임 텍스트 2를 사용합니다.
html페이지만들때 가장 먼저 나오는 것이 Doc type입니다. 위 닥타입 HTML5 형식입니다. HTML5 형식의 코드를 사용하지 않지만 간단하므로 위 닥타입으로 만듭니다.
그 다음으로 <html>태그를 만듭니다. 이 안에 모든 코드가 들어가게 됩니다.
3번째 줄의 첫칸에 커서를 위치시키고 Tab키를 누르면 4칸 이동합니다. <head>태그와 <body>태그를 만들어줍니다. <head>태그에는 웹페이지 상단에 나오는 웹페이지 이름인 타이틀이 들어가고 자바스크립트 코드, 제이쿼리 라이브러리, 스타일시트 등 웹페이지상에는 나타나지 않지만 <body>태그 부분에서 컨텐트가 나타나는데 도움이 되는 코드들이 들어가게 됩니다. <body>태그 부분에는 웹페이지 상에 실제로 나타나는 모든 내용이 입력되는 컨텐트가 입력되는 부분입니다.
3번째 줄의 <head>태그 뒤에 커서를 위치시키고 엔터키를 친 다음 탭키를 누르면 4칸 이동합니다. 위처럼 <title>태그를 입력하고 사이트 제목을 입력합니다. 이 부분이 웹브라우저 상단에 나타나는 제목이 됩니다. 그다음에 엔터키를 쳐서 meta 부분을 입력합니다. 글자Set인데요. 이것이 없으면 한글이 깨져서 나옵니다.
그 다음으로 <body>태그 안에 <h1>태그와 <p>태그를 이용해서 본문 제목과 문단 두개를 만듭니다. 탭키를 사용하여 항상 안쪽으로 들이는(indent) 작업을 해줘야 코드가 깨끗해 보이고 찾기도 쉽습니다. <h1>은 제목 태그중에서 제일 큰 글자로 나옵니다. 하지만 이전 글에서 언급했듯이 웹브라우저의 기본 스타일로 나오는 것은 내가만든 스타일시트에 의해 수정하기 때문에 의미가 없습니다. <p>태그는 본문의 문장이 들어갈때 항상 사용하는 태그입니다. 이 <p>태그도 기본적으로 스타일이 없는 것 같지만 문단이 두개일 경우 두개의 <p>태그 사이에 칸이 벌어지는데 이부분이 웹브라우저에 의해 기본적으로 나타나는 스타일입니다. 그러니 마음에 안들면 줄여줘야합니다.
그러면 이부분에서 잠시 멈추고 웹상에서 어떻게 나오는지 확인해야겠죠. Ctrl+Shift+S키를 누르면 브라우저 창이 나옵니다. 폴더(Project)를 하나 만들고 index.html로 파일명을 입력하고 저장합니다. 그런다음 엔코딩 설정을 합니다. 메뉴에서 파일-Reopen with Encoding을 선택하면 세부메뉴가 나옵니다. 상단에서 UTF-8을 선택하면 됩니다. 그런 다음 윈도우 탐색기에서 해당폴더로 이동하여 파일을 클릭하면 웹브라우저에 나옵니다. 한글이 제대로 나오는지 확인합니다.
위처럼 스타일 시트를 적용하지 않아도 기본적으로 글자의 크기가 크게 나오고 문단사이의 간격도 좀 넓게 나오고 있습니다.
이제 그럴듯하게 메뉴바도 만들어봅니다.
<h2> 태그를 이용하여 소제목을 만들고 <ul>태그를 만듭니다. 메뉴바는 나열된 항목이므로 <li>태그로 만듭니다. ul은 unordered list의 첫글자로 순서가 없는 목록, 즉 일련번호가 없는 목록이란 의미입니다. 첫째 메뉴를 <li>태그로 감싸서 만들어줍니다.
메뉴바가 존재하는 것은 다른 페이지로 이동하기 위해서죠 그럴려면 링크를 걸어줘야합니다. 링크는 <a>태그를 사용합니다. 시작 <a>태그안에는 href라는 속성을 입력하고 값으로 웹페이지 주소를 입력합니다. 여기서는 홈페이지인 index.html을 입력합니다. href는 hyperlink reference로 이해하시면 됩니다.
이 줄을 복사해서 붙여넣기를 해야하므로 줄번호를 클릭하면 줄전체가 선택됩니다. Ctrl+C키를 누르면 복사되고 커서를 16번옆에 클릭하고 Ctrl+V키를 누르면 붙여집니다. Ctrl+V키를 두번 더 눌러주면 4개의 메뉴항목이 만들어집니다.
새로 만들어진 세개의 li 태그의 파일명과 메뉴이름을 고처주면 하나의 페이지가 완성됩니다. Ctrl+S키를 눌러 저장합니다. 그런 다음 Ctrl+Shift+S키를 누르면 다른이름으로 저장하기 브라우저 창이 나옵니다. index파일이 저장된 폴더에 위 파일이름 순서대로 파일명을 만들어서 세번 저장합니다. 그러면 세개의 웹페이지가 추가로 만들어집니다.
탭바를 보면 마지막으로 저장한 파일이름으로 나옵니다. 메뉴에서 파일-Open Folder를 선택하고 나오는 창에서 저장한 폴더를 선택한 다음 확인을 클릭하면 새 창이 뜨면서 좌측 사이드바에 폴더이름과 파일들이 나타납니다. 이전 창은 닫습니다. 이 바가 안보이면 메뉴에서 View-Side Bar-Show Sidebar를 선택하면 나타납니다. 단축키는 Ctrl+K, Ctrl+B키를 순서대로 두번 눌러줘야합니다. 사이드바에서 index.html을 클릭하면 에디터창에 나타납니다.
이전에 열었던 index.html페이지가 있는 웹브라우저를 열고 Ctrl+R키를 누르면 새로고침이 되고 메뉴들이 나타납니다. 링크표시가 되어있어서 클릭하면 해당페이지로 이동하지만 모두가 같은 내용의 페이지이므로 변동은 없습니다. 주소창에서 페이지 이름이 나오므로 확인이 가능합니다.
inline.html페이지를 열고 첫번째 <p> 태그에 style="color:#f00;"을 삽입합니다. Ctrl+S키를 눌러 저장하고 웹브라우저 창으로 가서 링크를 클릭해봅니다.
Inline CSS메뉴를 클릭했을 때만 글자가 빨간색으로 나옵니다. 이처럼 인라인 방식의 스타일 적용은 해당 태그에만 적용이됩니다. 이 방식의 장점은 무엇이 있을까요. 제 경우는 블로그에서 특정부분 예를 들면 사이드바의 광고나 위젯의 위치를 변경하고자 할때 사용합니다. 왜냐하면 CSS 수정 페이지로 가기가 귀찮아서입니다. 이런식으로 인라인방식의 스타일시트를 많이 사용하게 되면 나중에는 뭐가 어디있는지 알수가 없게 됩니다.
제 블로그의 Best 20이라는 글자부분을 인라인 방식으로 스타일을 적용했는데 마우스 우클릭해서 요소검사를 하면 위처럼 나옵니다. 웹페이지의 요소검사에 대해서는 이곳 의 1번 항목을 참고하세요. html코드에서 h2태그를 클릭하면 우측에 CSS가 나옵니다. 3의 자리를 보면 4처럼 style.css:4라는 표시가 안나오죠. 그러니 스타일 시트의 어디에 위치하는지 알 수가 없습니다. 이런 방식의 스타일 적용이 적으면 다행이지만 많으면 관리하기가 힘들어집니다. 간단한 실험을 한다든가 적용해보고 잘되면 외부 스타일시트로 이동해서 적용하는 것이 좋은 방법입니다.
이번에는 embedded.html페이지를 열고 <head> 태그 안에 위처럼 스타일시트를 적용합니다. 하나의 html 페이지안에 스타일을 적용하는 이런 방식을 임베디드 방식이라고 합니다. 저장을 하고 웹브라우저로 가서 Ctrl+R키를 눌러 새로고침을 하고 링크를 클릭해봅니다.
Embedded CSS링크를 클릭했을 때만 글자가 빨간색으로 나옵니다. 한번의 CSS선언으로 두개의 <p>태그를 적용했으니 조금은 효율적이라고 볼 수 있습니다. 하지만 특정부분에만 적용된다는 점에서는 인라인 방식의 스타일 적용과 다를바 없습니다. 이방식은 웹페이지가 로딩될때마다 CSS스타일을 불러서 새로 적용하게 되므로 로딩도 느립니다. 다만 효과적인 부분이 있다면 인라인 방식과 마찬가지로 실험목적일때만 그렇습니다. 뭔가 적용하고자 할 CSS가 있다면 실험해보고 잘되면 외부 스타일시트로 이동해야하는 것이 웹표준이 됩니다.
그런다음 메뉴에서 파일-New File을 선택하면 새로운 에디터창이 나옵니다. Ctrl+Shift+S키를 눌러 같은 폴더에 external.css로 파일명을 입력하고 저장합니다. 빈 창에 위와같이 CSS코드를 입력하고 저장한 다음 웹브라우저 창으로 가서 새로고침하고 링크를 클릭합니다. 이번에도 마찬가지로 External CSS링크를 클릭했을때 글자가 빨간색으로 나옵니다. 하지만 웹페이지를 처음 만들었을때 이런 방식으로 했다면 각각의 페이지에 별도로 링크 코드를 복사해서 붙여넣을 일이 없었겠지요. 이제 각페이지에 같은 장소에 위 링크 코드를 복사해서 붙여넣으면 되는 것입니다.
어쩔 수 없이 인라인 방식이나 임베디드 방식의 스타일시트를 적용했을때 어떤 특정부분에 중복해서 적용이 될 수가 있는데 이때의 우선순위는 인라인방식이 최우선 적용되고 임베디드방식이 그다음이며 외부스타일방식이 최종적으로 적용됩니다.
각 링크를 클릭하면 인라인방식은 녹색으로 임베디드방식의 스타일이 있는 페이지는 파란색으로 글자가 나옵니다. 이처럼 서로 중복된 스타일 선언은 순서가 정해져있습니다.
우선 3가지 방식에 대해서 알아보기 전에 미니 웹사이트를 만들어봅니다. 왜냐하면 외부 스타일시트 방식의 효율성을 증명하기 위해서죠. 이전 글에서는 W3C School의 실험용 페이지를 이용해서 몇가지 코드만 입력해도 가능했는데 이번에는 실제로 웹페이지를 하나하나 코드를 입력해서 만들어보고 사용되는 태그에 대해서도 설명을 드립니다.
Project.zip위 압축파일은 이글에서 사용된 파일입니다. 코드에 대해서는 많이 타이핑을 해보는 것이 좋습니다. 코드에 자신있다 해도 외워서 쳐보면 어딘가 하나씩 빼먹어서 오류가 나거나 원하는대로 나오지 않기 때문이죠. 코드는 많이 쳐본 사람이 왕입니다. 코드를 입력하려면 텍스트 에디터가 필요하죠 무료이면서도 훌륭한 텍스트 에디터가 많습니다. 제가 주로 사용하는 것은 노트패드 플러스 플러스(Notepad++) 와 서브라임 텍스트 2(Sublime Text 2) 입니다. 여기서는 서브라임 텍스트 2를 사용합니다.
html페이지만들때 가장 먼저 나오는 것이 Doc type입니다. 위 닥타입 HTML5 형식입니다. HTML5 형식의 코드를 사용하지 않지만 간단하므로 위 닥타입으로 만듭니다.
그 다음으로 <html>태그를 만듭니다. 이 안에 모든 코드가 들어가게 됩니다.
3번째 줄의 첫칸에 커서를 위치시키고 Tab키를 누르면 4칸 이동합니다. <head>태그와 <body>태그를 만들어줍니다. <head>태그에는 웹페이지 상단에 나오는 웹페이지 이름인 타이틀이 들어가고 자바스크립트 코드, 제이쿼리 라이브러리, 스타일시트 등 웹페이지상에는 나타나지 않지만 <body>태그 부분에서 컨텐트가 나타나는데 도움이 되는 코드들이 들어가게 됩니다. <body>태그 부분에는 웹페이지 상에 실제로 나타나는 모든 내용이 입력되는 컨텐트가 입력되는 부분입니다.
3번째 줄의 <head>태그 뒤에 커서를 위치시키고 엔터키를 친 다음 탭키를 누르면 4칸 이동합니다. 위처럼 <title>태그를 입력하고 사이트 제목을 입력합니다. 이 부분이 웹브라우저 상단에 나타나는 제목이 됩니다. 그다음에 엔터키를 쳐서 meta 부분을 입력합니다. 글자Set인데요. 이것이 없으면 한글이 깨져서 나옵니다.
그 다음으로 <body>태그 안에 <h1>태그와 <p>태그를 이용해서 본문 제목과 문단 두개를 만듭니다. 탭키를 사용하여 항상 안쪽으로 들이는(indent) 작업을 해줘야 코드가 깨끗해 보이고 찾기도 쉽습니다. <h1>은 제목 태그중에서 제일 큰 글자로 나옵니다. 하지만 이전 글에서 언급했듯이 웹브라우저의 기본 스타일로 나오는 것은 내가만든 스타일시트에 의해 수정하기 때문에 의미가 없습니다. <p>태그는 본문의 문장이 들어갈때 항상 사용하는 태그입니다. 이 <p>태그도 기본적으로 스타일이 없는 것 같지만 문단이 두개일 경우 두개의 <p>태그 사이에 칸이 벌어지는데 이부분이 웹브라우저에 의해 기본적으로 나타나는 스타일입니다. 그러니 마음에 안들면 줄여줘야합니다.
그러면 이부분에서 잠시 멈추고 웹상에서 어떻게 나오는지 확인해야겠죠. Ctrl+Shift+S키를 누르면 브라우저 창이 나옵니다. 폴더(Project)를 하나 만들고 index.html로 파일명을 입력하고 저장합니다. 그런다음 엔코딩 설정을 합니다. 메뉴에서 파일-Reopen with Encoding을 선택하면 세부메뉴가 나옵니다. 상단에서 UTF-8을 선택하면 됩니다. 그런 다음 윈도우 탐색기에서 해당폴더로 이동하여 파일을 클릭하면 웹브라우저에 나옵니다. 한글이 제대로 나오는지 확인합니다.
위처럼 스타일 시트를 적용하지 않아도 기본적으로 글자의 크기가 크게 나오고 문단사이의 간격도 좀 넓게 나오고 있습니다.
이제 그럴듯하게 메뉴바도 만들어봅니다.
<h2> 태그를 이용하여 소제목을 만들고 <ul>태그를 만듭니다. 메뉴바는 나열된 항목이므로 <li>태그로 만듭니다. ul은 unordered list의 첫글자로 순서가 없는 목록, 즉 일련번호가 없는 목록이란 의미입니다. 첫째 메뉴를 <li>태그로 감싸서 만들어줍니다.
메뉴바가 존재하는 것은 다른 페이지로 이동하기 위해서죠 그럴려면 링크를 걸어줘야합니다. 링크는 <a>태그를 사용합니다. 시작 <a>태그안에는 href라는 속성을 입력하고 값으로 웹페이지 주소를 입력합니다. 여기서는 홈페이지인 index.html을 입력합니다. href는 hyperlink reference로 이해하시면 됩니다.
이 줄을 복사해서 붙여넣기를 해야하므로 줄번호를 클릭하면 줄전체가 선택됩니다. Ctrl+C키를 누르면 복사되고 커서를 16번옆에 클릭하고 Ctrl+V키를 누르면 붙여집니다. Ctrl+V키를 두번 더 눌러주면 4개의 메뉴항목이 만들어집니다.
새로 만들어진 세개의 li 태그의 파일명과 메뉴이름을 고처주면 하나의 페이지가 완성됩니다. Ctrl+S키를 눌러 저장합니다. 그런 다음 Ctrl+Shift+S키를 누르면 다른이름으로 저장하기 브라우저 창이 나옵니다. index파일이 저장된 폴더에 위 파일이름 순서대로 파일명을 만들어서 세번 저장합니다. 그러면 세개의 웹페이지가 추가로 만들어집니다.
탭바를 보면 마지막으로 저장한 파일이름으로 나옵니다. 메뉴에서 파일-Open Folder를 선택하고 나오는 창에서 저장한 폴더를 선택한 다음 확인을 클릭하면 새 창이 뜨면서 좌측 사이드바에 폴더이름과 파일들이 나타납니다. 이전 창은 닫습니다. 이 바가 안보이면 메뉴에서 View-Side Bar-Show Sidebar를 선택하면 나타납니다. 단축키는 Ctrl+K, Ctrl+B키를 순서대로 두번 눌러줘야합니다. 사이드바에서 index.html을 클릭하면 에디터창에 나타납니다.
이전에 열었던 index.html페이지가 있는 웹브라우저를 열고 Ctrl+R키를 누르면 새로고침이 되고 메뉴들이 나타납니다. 링크표시가 되어있어서 클릭하면 해당페이지로 이동하지만 모두가 같은 내용의 페이지이므로 변동은 없습니다. 주소창에서 페이지 이름이 나오므로 확인이 가능합니다.
1. 인라인방식 스타일시트
inline.html페이지를 열고 첫번째 <p> 태그에 style="color:#f00;"을 삽입합니다. Ctrl+S키를 눌러 저장하고 웹브라우저 창으로 가서 링크를 클릭해봅니다.
Inline CSS메뉴를 클릭했을 때만 글자가 빨간색으로 나옵니다. 이처럼 인라인 방식의 스타일 적용은 해당 태그에만 적용이됩니다. 이 방식의 장점은 무엇이 있을까요. 제 경우는 블로그에서 특정부분 예를 들면 사이드바의 광고나 위젯의 위치를 변경하고자 할때 사용합니다. 왜냐하면 CSS 수정 페이지로 가기가 귀찮아서입니다. 이런식으로 인라인방식의 스타일시트를 많이 사용하게 되면 나중에는 뭐가 어디있는지 알수가 없게 됩니다.
제 블로그의 Best 20이라는 글자부분을 인라인 방식으로 스타일을 적용했는데 마우스 우클릭해서 요소검사를 하면 위처럼 나옵니다. 웹페이지의 요소검사에 대해서는 이곳 의 1번 항목을 참고하세요. html코드에서 h2태그를 클릭하면 우측에 CSS가 나옵니다. 3의 자리를 보면 4처럼 style.css:4라는 표시가 안나오죠. 그러니 스타일 시트의 어디에 위치하는지 알 수가 없습니다. 이런 방식의 스타일 적용이 적으면 다행이지만 많으면 관리하기가 힘들어집니다. 간단한 실험을 한다든가 적용해보고 잘되면 외부 스타일시트로 이동해서 적용하는 것이 좋은 방법입니다.
2. 임베디드방식
이번에는 embedded.html페이지를 열고 <head> 태그 안에 위처럼 스타일시트를 적용합니다. 하나의 html 페이지안에 스타일을 적용하는 이런 방식을 임베디드 방식이라고 합니다. 저장을 하고 웹브라우저로 가서 Ctrl+R키를 눌러 새로고침을 하고 링크를 클릭해봅니다.
Embedded CSS링크를 클릭했을 때만 글자가 빨간색으로 나옵니다. 한번의 CSS선언으로 두개의 <p>태그를 적용했으니 조금은 효율적이라고 볼 수 있습니다. 하지만 특정부분에만 적용된다는 점에서는 인라인 방식의 스타일 적용과 다를바 없습니다. 이방식은 웹페이지가 로딩될때마다 CSS스타일을 불러서 새로 적용하게 되므로 로딩도 느립니다. 다만 효과적인 부분이 있다면 인라인 방식과 마찬가지로 실험목적일때만 그렇습니다. 뭔가 적용하고자 할 CSS가 있다면 실험해보고 잘되면 외부 스타일시트로 이동해야하는 것이 웹표준이 됩니다.
3. 외부 스타일시트 방식
이번에는 external.html페이지를 열고 <head>태그 안에 링크 코드를 위와같이 입력합니다.
그런다음 메뉴에서 파일-New File을 선택하면 새로운 에디터창이 나옵니다. Ctrl+Shift+S키를 눌러 같은 폴더에 external.css로 파일명을 입력하고 저장합니다. 빈 창에 위와같이 CSS코드를 입력하고 저장한 다음 웹브라우저 창으로 가서 새로고침하고 링크를 클릭합니다. 이번에도 마찬가지로 External CSS링크를 클릭했을때 글자가 빨간색으로 나옵니다. 하지만 웹페이지를 처음 만들었을때 이런 방식으로 했다면 각각의 페이지에 별도로 링크 코드를 복사해서 붙여넣을 일이 없었겠지요. 이제 각페이지에 같은 장소에 위 링크 코드를 복사해서 붙여넣으면 되는 것입니다.
4. 인라인방식, 임베디드방식, 외부 스타일시트 방식의 적용 순위
어쩔 수 없이 인라인 방식이나 임베디드 방식의 스타일시트를 적용했을때 어떤 특정부분에 중복해서 적용이 될 수가 있는데 이때의 우선순위는 인라인방식이 최우선 적용되고 임베디드방식이 그다음이며 외부스타일방식이 최종적으로 적용됩니다.
각 페이지에 대해서 외부 스타일시트 링크코드를 복사해 붙여넣고 인라인 페이지의 <p>태그에 적용한 컬러를 녹색으로 바꿔준 다음 메뉴에서 파일-Save All을 클릭하면 모든 페이지가 한번에 저장됩니다.
각 링크를 클릭하면 인라인방식은 녹색으로 임베디드방식의 스타일이 있는 페이지는 파란색으로 글자가 나옵니다. 이처럼 서로 중복된 스타일 선언은 순서가 정해져있습니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
