웹 페이지 저작의 기초

1. HTML과 CSS

HTML(Hyper Text Markup Language)

웹 페이지의 구조를 만드는 언어로 표현하려는 콘텐츠의 제목, 문단, 목록 등을 HTML 태그로 작성하면 웹 브라우저가 이 태그를 해석해서 웹 페이지로 출력합니다. HTML 문서를 표준 문법에 따라 의미있게 작성하면 검색 엔진이 웹 문서를 수집하기 좋고 다양한 접근 환경에서 사용할 수 있습니다.

CSS(Cascading Style Sheet)

HTML이 웹 페이지의 구조를 담당하는 언어라면 CSS는 표현을 담당하는 언어입니다. 웹 브라우저에는 HTML 요소에 대한 기본적인 표현 양식이 있는데, CSS를 사용하여 이 표현 양식을 더 보기 좋게 바꿀 수 있습니다. 특정 HTML 요소를 선택하고 해당 요소에 CSS 속성을 부여하여 화면에서 배치, 색, 선,모양, 배경, 이미지 등을 자유롭게 표현할 수 있습니다.

2. HTML의 이해

HTML은 데이터에 '의미'를 부여해서 무질서한 데이터를 유용한 '정보'로 바꾸는 힘이 있습니다. HTML문서를 배치하고 꾸미려면 CSS를 사용해야 합니다. 데이터의 '의미'와 '표현'을 잘 구별해서 적합한 언어를 사용하여 HTML을 작성하면 다른 사람이 쉽게 이해하고 편집할 수 있습니다. 문서의 '표현'을 CSS로 분리한다면 디자인을 바꾸기 위해 HTML을 편집해야 하는 수고를 덜 수 있습니다.


2.1 요소와 속성, 값

HTML은 요소와 속성, 값으로 구성되어 있습니다.

요소(Element)

<h1 title="s2junn's weBlog">s2junn's blog</h1>

<h1>로 시작해서 </h1>로 끝나는 전체가 '요소'입니다. 이 요소는 '<h1> 요소'라고 지칭하며, <h1>과</h1>은 각각 '시작 태그'와 '종료 태그'라고 부릅니다. 그 사이에 있는 's2junn's blog'는 이 요소의'내용(contents)'이라고 합니다. 'h'는 제목을 의미하는 'heading'의 약어로서 많은 태그가 이렇게 약어를 사용합니다. 숫자는 제목의단계를 표시하고 '1'이면 최상위 수준의 제목입니다. 대부분의 웹 브라우저는 제목을 크고 굵게표현하는데, 웹 제작자는 단순히 글꼴을 크고 굵게 표현하기 위하여 이 요소를 사용해서는 안 됩니다. 데이터에 아무런 의미를 부여하지 않고 크고 굵게 만드는 것은 '표현'에 해당하기 때문에 CSS로처리해야 합니다.

속성(Attribute)

<h1 title="s2junn's weBlog">s2junn's blog</h1>

이 코드에서 'title'은 속성입니다. '속성'은 현재의 요소가 다른 요소와 어떤 차이가 있는지 나타냅니다. 'title' 속성은 현재 요소의 의미를 부연 설명하는 '참고 제목' 역할을 합니다. HTML 요소마다 사용할 수있는 속성이 다르게 규정되어 있습니다.

값(Value)

<h1 title="s2junn's weBlog">s2junn's blog</h1>

속성에는 반드시 '값'이 있습니다. "s2junn's weBlog"는 'title' 속성의 값입니다. 값은 현재의 '요소'가 어떤'속성'을 지녔는지 구체적으로 정의하며, 화면 표시에 직접 영향을 주기도 합니다. 속성에 따라 잘못된 값을 입력하면 화면이 제대로 표시되지 않을 수도 있습니다. 값은 속성에 따라서 이미 정해져 있기도하지만, 어떤 속성의 값은 사용자가 정의해야 합니다. "s2junn's weBlog"은 사용자 정의 값에 해당합니다.

2.2 HTML의 시작과 끝

모든 HTML 요소에는 데이터의 범위를 명시하기 위하여 시작과 끝이 있습니다.

<h1 title="s2junn's weBlog">s2junn's blog</h1>

이 요소의 시작은 <h1>입니다. 여기서부터 첫 번째 제목이 시작됩니다. 이 요소의 끝은 </h1>입니다. 첫 번째 제목은 여기서 끝납니다.

텍스트 콘텐츠가 아닌 경우 HTML 요소 자체가 데이터가 되는 경우도 있는데 이런 경우는 시작과 동시에 끝납니다. 다음과 같은 경우 이미지가 다른 콘텐츠를 포함하지 않으므로 시작과 동시에 닫습니다.

<img />

2.3 부모 요소와 자식 요소

HTML에서 요소는 다른 요소를 포함할 수 있습니다. 예를 들어, 제목 "s2junn's blog"를 클릭하면 초기 화면으로 이동하는 콘텐츠를 작성해 보겠습니다.

<h1 title="s2junn's weBlog">     <a href="index.html">s2junn's blog</a> </h1>

<h1> 요소 안에 <a> 요소가 포함되어 있습니다. 이와 같이 하나의 데이터는 여러 개의 요소로 중첩할 수 있습니다. 이 때 <h1> 요소와 같이 바깥쪽에 있는 요소를 <a> 요소의 '부모 요소'라 부르고, <a> 요소와 같이 <h1> 요소의 안쪽에 있는 요소를 '자식 요소'라 부릅니다. <a> 요소는 데이터가 다른 자원을 참조하도록 연결합니다. href 속성은 <a> 요소 안에서 참조 대상을 지정합니다. 즉, 위의 예제 코드는 "s2junn's blog 라는 데이터는 최상위 수준 제목이며 index.html을 참조하고 있다"라는 것을 정의합니다.

단, 요소를 중첩해서 사용할 때는 시작 태그와 종료 태그의 사용 순서를 지켜야 합니다. 다음과 같이 선언하는 것은 중첩 규칙을 어긴 잘못된 예입니다.

<h1 title="s2junn's weBlog">     <a href="index.html">s2junn's blog</h1> </a>

2.4 인라인 요소와 블록 요소

블록 요소는 '하나의 독립된 덩어리'로 취급하며 줄을 바꿔서 표현합니다. <div>, <h>, <p> 요소 등이블록 요소에 해당합니다. 인라인 요소는 '행 안의 일부'로서 줄 바꿈 없이 연속으로 표현합니다. <span>,<img>, <a> 요소 등이 대표적인 인라인 요소입니다. 블록 요소는 인라인 요소를 포함할 수 있지만 인라인 요소는 블록 요소를 포함할 수 없습니다. 어떤요소가 블록이고 어떤 요소가 인라인인지는 HTML 규격을 보면 알 수 있습니다.

다음은 블록 요소가 인라인 요소를 감싸고 있는 올바른 마크업입니다. <h1> 요소는 블록 요소이고<a> 요소는 인라인 요소입니다.

<h1><a>s2junn's blog</a></h1>        <!-- 올바른 마크업 -->

단, 요소를 중첩해서 사용할 때는 시작 태그와 종료 태그의 사용 순서를 지켜야 합니다. 다음과 같이 선언하는 것은 중첩 규칙을 어긴 잘못된 예입니다.

<a><h1>s2junn's blog</h1></a>        <!-- 잘못된 마크업 -->

3. CSS의 이해

HTML이 웹 문서에 '의미'를 부여해서 데이터를 '정보'로 바꾼다면 CSS는 문서의 '배치와 표현'에 관여하여 콘텐츠를 이해하기 쉽고 보기 좋게 만듭니다. CSS 문법을 익히면 문서를 보기 좋게 꾸밀 수 있을 뿐만 아니라 HTML을 더 의미있고 적법하게 사용할 수 있습니다.


3.1 선택자와 속성, 값

CSS는 '선택자'와 '속성'과 '값'으로 구성되어 있습니다. '선택자'는 HTML의 특정 '요소'를 선택하고 '속성'과 '값은 선택된 HTML 요소가 화면에 어떻게 출력될 것인지를 정의합니다.

선택자(selector)

h1  {  font-size:24px;  }

'h1'은 '선택자'입니다. <h1> 요소를 가리킵니다.

속성(property)

h1  {  font-size:24px;  }

'font-size'는 '속성'입니다. <h1> 요소의 글꼴 크기를 제어하는 선언입니다.

값(value)

h1  {  font-size:24px;  }

'24px'은 '값'입니다. <h1> 요소의 font-size 속성(글꼴 크기) 값을 구체적으로 명시합니다.

3.2 CSS 선택자의 종류

CSS 선택자는 특정 HTML 요소를 선택하는 역할을 합니다. 선택자를 사용하면 선택된 요소에 고유한 CSS 양식을 표현할 수 있습니다. CSS는 다양한 유형의 선택자를 지원합니다.

타입 선택자(type selector)

h1 { ... }

HTML 요소 이름을 그대로 선택자 이름으로 사용하는 것을 타입 선택자라고 합니다. HTML 문서에서 요소 이름이 일치하면 모두 선택합니다. 표준 HTML 요소 이름을 선택자 이름으로 사용할 수 있습니다.

아이디 선택자(id selector)

#selector { ... }

아이디 선택자는 선택자 이름 앞에 숫자 기호(#)를 표시합니다. HTML 문서에서 아이디의 값이 일치하는 요소를 선택합니다. 아이디 선택자의 이름은 사용자가 정의할 수 있습니다. 아이디 선택자의 이름을 정의하는 규칙은 다음과 같습니다. 모든 자연어를 선택자 이름으로 사용할 수 있지만 영문 대소문자와 숫자의 조합을 권장합니다. 선택자 이름으로 특수문자를 사용할 수 없지만 언더스코어(_)와 하이픈(-)은 사용할 수 있습니다. 숫자로 시작할 수 없습니다. HTML 문서는 한 페이지에 2개 이상의 아이디 값을 사용하도록 허용하지 않습니다. 아이디 값은 하나의 HTML 문서 안에서 고유해야 합니다.

클래스 선택자(class selector)

.selector { ... }

클래스 선택자는 선택자 이름 앞에 점(.)을 표시합니다. HTML 문서에서 클래스의 값이 일치하는 요소를 선택합니다. 클래스 선택자의 이름은 사용자가 정의할 수 있습니다. 클래스 선택자의 이름을 정의하는 규칙은 다음과 같습니다. 모든 언어를 선택자 이름으로 사용하는 것이 가능하지만 영문 대소문자와 숫자의 조합을 권장합니다. 선택자 이름으로 특수문자를 사용할 수 없지만 언더스코어(_)와 하이픈(-)은 사용할 수 있습니다. 클래스 선택자 이름은 숫자로 시작할 수 없습니다. HTML 문서는 한 페이지에 2개 이상의 동일한 클래스 값을 사용할 수 있습니다.

자식 선택자(child selector)

h1>a { ... }

자식 선택자는 선택자 사이에 꺾은 괄호(>)를 적용해서 표시합니다. 선택자의 나열이 HTML 요소의 중첩 순서와 일치하면 선택합니다. 중첩이 2단계 이상 깊어지는 자손(자식의 자식)은 선택하지 않습니다. 오직 한 단계 바로 아래 포함된 자식만 선택합니다.

자손 선택자(descendant selector)

h1 a { ... }

자손 선택자는 선택자 사이에 띄어쓰기를 적용해서 표시합니다. 선택자의 나열이 HTML 요소의 중첩 순서와 일치하면 선택합니다. 즉, 다음과 같이 <h1> 요소 안에 포함된 <a> 요소만을 선택한다는 의미입니다.

<h1><a>s2junn's blog</a></h1>

<h1> 요소 밖에 존재하는 <a> 요소는 이 선언의 영향을 받지 않습니다.

공용 선택자(universal selector)

* { ... }

공용 선택자는 별표(*)로 표시합니다. 이 선택자는 모든 HTML 요소를 선택합니다. 웹 브라우저는 보통 HTML 요소마다 기본 CSS 양식을 지정해 두는데 이것을 동일한 값으로 초기화할 수 있습니다. 공용 선택자를 사용하면 페이지 표시 속도가 느려지므로 꼭 필요한 경우가 아니면 사용을 권장하지 않습니다.

가상 선택자(pseudo selector)

a:focus { ... }

가상 선택자는 다른 선택자 뒤에 콜론(:)을 붙여 표시합니다. 요소의 상태를 선택하는 '가상 클래스 선택자'와 HTML 코드 속에 없는 가상의 요소를 선택하는 '가상 요소 선택자'가 있습니다. 다른 선택자들이 정적인 상태의 HTML 요소를 선택하는 것에 반해서 가상 선택자는 HTML 요소의 동적인 변화 상태를 선택하거나 HTML 코드에 없는 가상의 요소를 선택합니다. 가상 클래스 선택자의 종류는 다음과 같습니다.  가상 클래스 선택자  설명  예제  :link  아직 방문한 적이 없는 링크를 선택합니다. 'a' 라는 타입 선택자와 결합해서 사용합니다.  a:link  :visited  이미 방문한 링크를 선택합니다. 'a' 라는 타입 선택자와 결합해서 사용합니다.  a:visited  :hover  마우스 포인터가 가리키는 동안의 상태를 선택합니다.  a:hover  :active  마우스가 클릭되는 순간 또는 엔터 키를 누른 순간의 상태를 선택합니다.  a:active  :focus  포커스를 받은 요소의 상태를 선택합니다.  a:focus  :first-child  첫 번째 자식 요소를 선택합니다.  li:first-child  :lang(language)  언어 속성이 일치하면 선택합니다.  p:lang(en) 'a' 요소에 다양한 상태의 가상 클래스 선택자를 지정할 때는 :link(링크) :visited(방문시) :hover(지나치게) :active(활동하면) :focus(주목받습니다) 순서를 유지하는 것이 좋습니다. 나중에 선언된 클래스의 우선순위가 높기 때문에 먼저 선언된 것들을 모두 덮어쓰게 됩니다. 예를 들어, :hover 뒤에 a:visited 를 쓰면 이미 방문한 링크 위에 마우스를 올려도 :hover 가 적용되지 않습니다. 이미 방문한 링크 위에 마우스를 올렸을 때 반응하게 하려면 :visited 다음에 :hover 클래스가 오도록 작성해야 합니다. 가상 요소 선택자의 종류는 다음과 같습니다.  가상 요소 선택자  설명  예제  :first-line  첫 번째 행을 선택합니다. 블록 요소에만 적용할 수 있습니다.  p:first-line  :first-letter  첫 번째 문자를 선택합니다. 블록 요소에만 적용할 수 있습니다.  p:first-letter  :before  요소 시작 지점 안쪽의 가상 요소를 선택합니다.  div:before{ content:"..." }  (div 요소 시작 지점 안쪽에 가상의 "..." 문자열을 생성하고 선택합니다.)  :after  요소 종료 지점 안쪽의 가상 요소를 선택합니다.  div:after{ content:"..." }  (div 요소 종료 지점 안쪽에 가상의 "..." 문자열을 생성하고 선택합니다.)

선택자 묶음(Selector Grouping)

.apple,  .tomato  {  color:red  }

선택자 묶음은 쉼표(,)를 사용해서 여러 개의 선택자를 하나로 묶고 속성과 값을 한 번만 선언합니다. 여러 선택자가 같은 속성과 값을 공유할 때 하나의 선택자로 묶을 수 있습니다.

위의 선택자 묶음 선언은 아래의 선언과 같은 의미입니다.

.apple  {  color:red  }  .tomato  {  color:red  }

인접 형제 선택자(Adjacent Sibling Selector)

h1+h2  {  color:red  }

형제 선택자는 선택자 사이에 덧셈 기호(+)를 넣어 표시합니다. 요소가 형제 관계에 있고 나열 순서가 같으면 뒤에 등장하는 요소를 선택합니다.

위의 인접 형제 선택자 선언 예제에 따르면, 다음과 같은 HTML 코드에서 <h1> 요소 다음에 <h2> 요소가 순서대로 등장하므로 <h2> 요소는 붉은색 글꼴로 처리됩니다.

<h1>s2junn</h1>  <h2>Hwang</h2>

속성 선택자(Attribute selector)

input[checked]  {  ...  }    /* input 요소에 checked 속성이 사용되면 무조건 선택 */  input[type=text]  {  ...  }    /* input 요소의 type 속성이 text인 경우에만 선택 */  img[alt~=dog]  {  ...  }    /* img 요소의 alt 값에 'dog'라는 단어가 포함되면 선택 */  p[lang|=en]  {  ...  }    /* p 요소의 lang 속성이 en으로 시작되면 선택 */

HTML 요소에 선언된 속성을 사용하여 해당 요소를 선택합니다. 속성 선택자의 종류는 다음과 같습니다.  속성 선택자  설명  예제  [attribute]  HTML 요소에 attribute 라는 속성이 사용되면 값의 존재 여부와 무관하게 요소를 선택합니다.  input[checked]  [attribute=value]  HTML 요소에 attribute 라는 속성이 사용되고 오직 하나의 값이 존재하는데 그 값이 정확하게 value일 때 요소를 선택합니다.  input[type=text]  [attribute~=value]  HTML 요소에 attribute 라는 속성이 사용되고 하나 이상의 값이 공백으로 분리되어 존재하는데 그 중 하나의 값이 value 일 때 요소를 선택합니다.  img[alt~=dog]  [attribute|=value]  HTML 요소에 attribute 라는 속성이 사용되고 값이 value 로 시작되면 요소를 선택합니다.  p[lang|=en]

참고
W3C HTML 4.01 규격: http://trio.co.kr/webrefer/html/cover.html
W3C HTML 4.01 요소 색인: http://trio.co.kr/webrefer/html/index/elements.html
W3C HTML 4.01 속성 색인: http://trio.co.kr/webrefer/html/index/attributes.html
W3C XHTML 1.0 규격: http://trio.co.kr/webrefer/xhtml/overview.html
W3C 마크업 유효성 검사: http://validator.w3.org/
W3 Schools 온라인 자습서: http://www.w3schools.com/
CSS 규격 한글 번역문: http://trio.co.kr/webrefer/css2/cover.html
CSS Reference: http://www.w3schools.com/css/css_reference.asp
XE Skin Manual Ko(v1.0) http://www.scribd.com/doc/63876607/XE-Skin-Manual-Ko-v1-0