HTML과 CSS는 이용자의 동작에 따른 변화를 일반적으로 화면에 반영할 수 없다. 그러나 어떤 요소 위에 커서를 올려 놓거나 뗐을 때처럼 자주 구현할 필요성이 있는 동작 일부는 가상 클래스나 요소의 형태로 제공하기도 한다. 이번 포스트에서는 가상 클래스와 요소에 대해 알아보고, 여러 선택자가 한 요소를 꾸며줄 때 우선순위를 표기하기 위해 사용되는 구체성의 정의에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

가상 클래스pseudo class

예를 들어, <p>가 있다고 가정하자. 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주려면 어떻게 해야 할까? 해당 동작을 위해 구현해야 할 부분은 다음과 같다. 

(1) 임의의 클래스 선택자를 선언해 특정 스타일 규칙을 만든다.

(2) <p> 요소에 커서가 올라가면 클래스를 집어넣는다.

(3) <p> 요소에서 커서가 빠지면 클래스를 삭제한다.

이런 형태의 기능은 HTML과 CSS에서는 만들어 내기 어렵다. 2, 3번은 동적으로 변화돼야 하는 부분인데, 두 언어는 정적인 언어이기 때문에 이런 부분을 구현할 수 없기 때문이다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해 미리 정의해 놓고 이를 가상 클래스 형태로 제어할 수 있게 했다.

:pseudo-class {
    property: value;
}

가상 클래스의 기본형은 위와 같다. 가상 클래스를 이용하면, 다른 언어를 끌어오지 않고도 CSS 내에서 동적인 기능을 처리 가능하므로 훨씬 효율적이다. 아래부터는, 기본적인 가상 클래스의 유형에 대해 다룬다.

문서 구조와 관련된 가상 클래스

first-child : 첫 번째 자식 요소 선택.
last-child : 마지막 자식 요소 선택.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

해당 코드를 사용하면 처음 <li>와 마지막 <li>에 각각 색상이 적용된다. 즉, 가상 선택자로 위와 같이 구현한 코드는 아래 코드처럼 가상 선택자 없이 구현될 수도 있다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

앵커 요소와 관련된 가상 클래스

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커.
:visited : 이미 방문한 하이퍼링크를 의미.

a:link { color: blue; }
a:visited { color: gray; }

사용자 동작과 관련한 가상 클래스

이것들도 주로 <a>에 많이 쓰인다. 다만 앵커 관련 클래스와 달리 조건만 맞으면 다른 요소에도 사용 가능하다.

focus: 현재 입력 초점을 가진 요소에 적용
hover: 마우스 포인터가 있는 요소에 적용
active: 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

가상 요소 pseudo element

::pseudo-element {
    property: value;
}

가상 클래스처럼 문서 내에 보이지 않지만 미리 정의한 위치에 삽입되도록 약속되어 있는 것으로, 가상 요소가 있다. 가상 요소를 사용하면 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다. 기본적으로 가상 클래스와 동일하게 콜론으로 선언했으나, CSS3부터는 가상 클래스와의 구분을 위해 ::(더블 콜론) 기호를 사용하게 개편됐다. 다만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있을 수 있고 이 때는 ; 기호를 사용해야 한다.

before : 가장 앞에 요소를 삽입.
after : 가장 뒤에 요소를 삽입.
first-line : 요소의 첫 번째 줄에 있는 텍스트.
first-letter : 블록 레벨 요소의 첫 번째 문자.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해서는 content 속성을 이용해야 한다. 눈에 보이지 않는 요소를 구체화해 보면 다음과 같다.

<p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>

선언의 구체성

h1 { color: red; }
body h1 { color: green; }

요소를 선택하는 데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 위 코드에서, 두 규칙은 모두 <h1>을 지정하지만 두 규칙이 지정하는 스타일은 서로 다르다. 이럴 때 <h1>은 어떻게 표현될까.

선택자에는 어떤 규칙이 우선으로 적용돼야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로, 구체성의 값이 클 수록 우선으로 적용된다.

0, 0, 0, 0

구체성은 위와 같이 네 개의 숫자 값으로 이뤄져 있다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클 수록 높은 구체성을 갖는다. 구체성은 아래의 규칙대로 계산된다. 

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

 0, 0, 0, 0 : 전체 선택자

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

인라인 스타일

p#page { color: red; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

위 두 스타일 선언문을 보자. 전자는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언한 것이고 두 번째는 요소에 직접 인라인 스타일 방식으로 선언한 것이다. 둘 중 무엇이 우선순위로 적용될까? 정답은 후자다. 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다. 
 

규칙에 우선권 적용하기, important

p#page { color: red !important; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

important 키워드는 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖는다. 속성값 뒤에 한 칸 공백을 주고 느낌표 기호와 함께 쓰면 important를 적용할 수 있다. 위의 <p>에는 important로 인해 color: red가 적용된다.
 

속성의 상속

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

위 코드에서 <em>은 부모인 <h1>의 color: grey를 상속받는다. 다만, 모든 부모의 속성이 자식에게 상속되는 건 아니다. 상식적으로 구분될 만한 속성 외, margin/ padding/ background/ border 등은 상속되지 않는다.

상속 속성의 구체성

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

위 코드에서, <em>에는 color: red가 적용된다. 상속된 속성은 구체성을 가지지 못 하는 점을 기억하자.

선택자는 CSS에서 스타일을 입힐 HTML 등 마크업 언어의 요소를 선택하는 문자를 뜻한다. 대부분의 CSS 코드는 A { (B): (C); } 형태로 이뤄져 있는데, 스타일을 나열한 중괄호 앞 부분에 오는 A 부분이 바로 선택자다. 이번 포스트는 선택자의 유형과 조합에 대해 알아보고, 선택자와 문서의 관계 기준으로 문서 구조를 이해해 본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

요소 선택자

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

선택자 중 가장 기본이 되는 선택자로, 선택자 부분에 태그 이름이 들어가는 점을 따서 태그 선택자라고도 한다. 요소 선택자를 사용하면 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }
* { color: yellow; }

선택자는 기본적으로 쉼표를 이용해서 그룹화할 수 있고, asterisk 기호(*)로 문서 내의 모든 요소를 선택할 수도 있다. 

h1 { color: yellow; font-size: 2em; background-color: gray; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 선택자 뿐 아니라 선언도 그룹화 가능하다. 물론 선택자와 선언을 동시에 그룹화할 수도 있다.

요소 선택자의 한계

아래와 같은 코드가 있다고 가정하자.

<dl>
    <dt>HTML</dt>
    <dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

당신은 해당 HTML 문서의 "HTML" 부분에는 보라색 글자를 지정하고, "CSS" 부분에는 밑줄을 선언하고 싶다. 하지만 요소 선택자로는 동일한 이름으로 묶여 있는 요소를 각각 선택해서 규칙을 적용하기는 불가능하다. <dt>에 보라색을 지정하면 "CSS"도 보라색으로 변할 것이고, 반대로 <dt>에 밑줄을 그으면 "HTML"에도 동일하게 밑줄이 그어질 것이다. 당신이 원하는 방식대로 문맥마다 스타일을 각각 적용할 방법은 없을까? 

class 선택자

.foo { font-size: 30px; }

<p class="foo"> ... </p>

요소에 구애받지 않고 스타일 규칙을 적용시키는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. HTML에서 동일한 스타일을 적용받을 class명을 적어 놓고 CSS에서 적용할 규칙을 써 놓으면 동일한 class명을 가진 모든 요소에 동일한 스타일 규칙이 적용된다. 그럼 class 선택자를 이용해 요소 선택자로 구현해내지 못 했던 부분을 구현해 보자.

.html { color: purple; }
.css { text-decoration: underline; }

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

이때, 한 요소는 class 속성을 동시에 여러 개 가질 수 있다. 공백으로 구분해 여러 개의 class 값을 넣어 주면 된다. 

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

위 HTML문의 <p> 안에는 "foo"와 "bar"라는 두 개의 class가 선언돼 있다. CSS문에는 또 foo class가 30px의 폰트 크기를 갖게, bar class는 글자를 파란색으로 적용하도록 설정돼 있다. 위 코드를 실행하면, <p>에 foo, bar 둘 모두의 규칙이 적용되고 있다는 것을 알 수 있다.

id 선택자

#bar { background-color: yellow; }

<p id="bar"> ... </p>

id 선택자는 class 선택자와 거의 유사하다. 다만 .(마침표) 대신 #(해시) 기호를 쓴다는 점과, 요소에 class 속성 대신 id 속성을 사용한다는 점이 다르다. 또, 여러 요소에 중복 선언될 수 있는 class와 다르게 id는 문서 내에서 단 한 번만 쓰일 수 있다. 
 

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

위 예제와 같이, 여러 선택자를 조합해 사용할 수도 있다.

속성 선택자

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 타 선택자와 달리 대괄호를 이용해 묶고 대괄호 안에 속성 이름이 들어가는 선택자다. 요소에 해당 이름의 속성이 있다면 적용된다.

정확한 속성값으로 선택

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

class, id값 존재 자체로 두루뭉술 묶을 수도 있지만 이처럼 명확한 속성을 지정해 줄 수도 있다. 이처럼 속성 선택자에 속성값까지 지정해 주면 동일한 속성에 동일한 속성값을 가진 부분에만 스타일이 적용된다.

 

부분 속성값으로 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택.
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택.
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택.
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

문서 구조의 이해

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지 살펴보자. 이들의 관계는 부모와 자식, 조상과 자손, 그리고 형제 관계로 분류될 수 있다.

부모와 자식 관계

부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 한 요소의 부모 요소는 하나뿐이다. 자식 요소는 부모 요소의 반대라고 생각하면 된다. 다만 한 요소의 부모 요소는 한 개만 존재할 수 있는 반면 한 부모 아래의 자식 요소는 여러 개 존재할 수 있다.

<body>의 부모 요소 : <html> ↔ <html>의 자식 요소 : <body>
<div>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
<h1>의 부모 요소 : <div> ↔ <div>의 자식 요소 : <h1>
<span>의 부모 요소 : <h1> ↔ <h1>의 자식 요소 : <span> 
<p>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
 

조상과 자손 관계

조상과 자손의 관계 여러 부모 자식 관계를 포함해 확장한 관계라고 보면 된다. 조상 요소는 한 요소를 포함하는 (부모 요소를 포함한) 모든 요소고, 자손 요소는 반대로 그 요소가 포함하고 있는 모든 요소다.

<body>의 조상 요소 : <html> ↔ <html>의 자손 요소 : <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>
<h1>의 조상 요소 : <html>, <body>, <div> ↔ <div>의 자손 요소 : <h1>, <span>
<span>의 조상 요소 : <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소 : <span>
<p>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>

형제 관계

서로 같은 부모를 가지고 있는 요소 사이의 관계를 형제 관계라고 한다. 위 코드 중 <div>, <p>가 형제 관계다. 형제 관계 중 바로 뒤에 있는 요소를 지칭할 경우는 인접한 관계를 가진다, 혹은 인접한다고 부른다. 위 코드에서는 <p>가 <div>에 인접한 형제 요소가 된다.  

문서 구조 관련 선택자

문서 구조를 이용한 선택자로 자손 선택자, 자식 선택자, 인접 선택자가 있다.

 

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호 없이 공백으로 구분한다. 이 선택자는 <div>의 자손 요소인 <span>을 선택하는 선택자다.
 

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 이 선택자는 <div>의 자식 요소인 <h1>을 선택하는 선택자다. 

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 +를 넣어 표현한다. 

CSS는 마크업 언어, 즉 HTML을 꾸며 주는 표현용 언어다. HTML이 문저의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인한다. CSS는 HTML과는 독립된 다른 언어이지만 표현을 하기 위한 언어이기 때문에 마크업 문서 자체가 존재하지 않다면 무용지물이 된다. 때문에, 보통 CSS는 HTML과 묶어 얘기한다.

전 세계의 많은 웹 사이트들은 전부 HTML 태그를 이용해 만들어진다. 하지만 웹 사이트를 구축하는 데 자주 사용하는 HTML의 개수는 십여 개밖에 되지 않는다. 이 모든 사이트를 각각 다양하고 독창적인 디자인으로 표현될 수 있게 해 주는 게 CSS다. 이번 포스트에서는 기본적인 CSS 문법에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

CSS 구문

h1 { color: yellow; font-size:2em; }

선택자selector : "h1"

속성property : "color"

값value : "yellow"

선언declaration : "color: yellow", "font-size: 2em"

선언부declaration block : "{ color: yellow; font-size:2em; }"

규칙rule set : "h1 { color: yellow; font-size:2em; }"

CSS 파일은 여러 개의 규칙으로 이루어져 있다. 구문을 작성할 때는 개행에 주의해야 하는데, 선택자와 선언부 사이나 선언과 선언 사이는 개행 해도 상관 없으나 속성이름과 속성값 사이에는 개행해선 안 된다.
 

/* 올바른 예 */

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

/* 잘못된 예 */

h1 {
    color:
    yellow;
}

 

CSS와 마크업 문서 연결 방법

(1) 인라인Inline 방식

<div style="color:red;"> 내용 </div>

인라인 방식은 해당 요소에 직접 스타일 속성을 사용해서 규칙들을 선언하는 방법을 뜻한다. 해당 요소에 직접 입력하기 때문에 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어 주면 된다. 인라인 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지는 않는다.

(2) 인터널Internal 방식

<style> div {color: red;} </style>

인터널 방식은 <head>에 <style> 태그를 활용해 문서마다 스타일을 선언해 주는 방법이다. 이 방식을 활용하면 문서 내의 모든 <div>에 같은 스타일을 줄 수 있다. 다만, 많은 페이지가 있을 경우 까다로운 건 매한가지다.
 

(3) 익스터널External 방식

div {color: red;}

익스터널 방식은 외부 스타일 시트 파일을 이용하는 방법이다. 한 개 문서를 만들어 거기에 전체 문서가 공용으로 사용할 스타일 규칙을 만들어 넣고, .css 확장자로 저장한 후 페이지마다 링크로 CSS 파일을 연결해 주면 된다.

<link rel="stylesheet" href="css/style.css">

이렇게 <head> 내부에 <link>를 선언한 후 href 속성을 이용해 경로를 적어주면 되는데, 이 때 rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet'라고 적어야 한다. 이 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있으며, 수정할 때도 한 번에 모든 페이지에 반영할 수 있다. 이러한 익스터널 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용된다.
 

HTML은 Hyper Text Markup Language의 약자다. 이 때의 Hyper Text는 문서 너머와 연결을 해 주는 텍스트, 즉 링크를 의미하고 Markup Language는 정보를 구조적/ 계층적으로 표현하는 언어란 뜻이다. 이번 포스트에서는 HTML에서 쓰이는 문법, 태그를 정리한다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

제목Heading 태그

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
... 이하 생략

문서 내 제목을 표현할 때 사용하는 태그다. 제목의 레벨에 따라서 <h1> ~ <h6>로 구분된다. <h1>은 보통 페이지를 대표하는 큰 제목으로 사용되며, 숫자가 올라갈 수록 낮은 수준의 소제목을 나타내는 데 사용한다. 제목 태그를 사용하면 일반 텍스트보다 크기와 굵기가 더 강조돼 보이는데, 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다.

단락Paragraph 태그

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
    ... 이하 생략
</p>

단락 태그를 사용해 제목 외 본문 내용의 계층을 구분해 줄 수 있다. 위 예제는 제목 태그 예제와 동일한 형태로 노출되지만, 이전 예제보다 의미에 맞게 짜인 마크업 구조라고 볼 수 있겠다.
 

 

개행Linebreak 태그

1980년, <br>
유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 <br>
HTML의 원형인 인콰이어를 제안했다. <br>

HTML은 두 칸 이상의 공백 및 개행을 무시하기 때문에 여러 칸을 스페이스 바로 개행하더라도 화면에 나타나지는 않는다. 이럴 때 쓰이는 태그가 <br>이다. 개행하고자 하는 데서 <br>을 선언하면 개행된다. <br>은 개행 역할 외 내용이 존재하지 않는 빈 태그이며 별도로 닫기 태그를 사용해주지 않아도 된다.

텍스트 표현 태그

<b> : bold. 글자를 굵게 표현하는 태그.

<i> : italic. 글자를 기울여 표현하는 태그.

<u> : underline. 글자의 밑줄을 표현하는 태그.

<s> : strike. 글자의 중간선을 표현하는 태그.

상기 태그들은 텍스트를 변형해 보여주기 위한 태그고, 글씨의 강조 역할에는 기여하지 못 한다. 단, HTML5 버전에서는 <i> 태그만 기술적인 용어/ 외국어 문구/ 소설 속 인물의 생각 등의 표현을 할 때 사용된다는 의미가 추가됐다. 다른 표현형 태그에 의미를 부여하고 싶다면 아래 시멘틱 마크업 태그를 참고하자.

시멘틱 마크업Semantic Markup

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

앵커anchor 태그

<a href="http://www.naver.com/" target="_blank">네이버</a>

앵커 태그는 링크를 만드는 태그다. 앵커 태그의 기본형은 위와 같다. 링크로 이동할 목적지인 hrefhypertext reference URL 값을 선언해 줘야 작동하며, target 속성을 사용하면 링크된 리소스를 어디에 표시할지도 지정할 수 있다. target 속성에 _self를 사용하면 현재 창에, _blank를 사용하면 새로운 창에 각각 링크 페이지를 표시할 수 있으며, 별도로 지정해주지 않으면 자동으로 _self값으로, 현재 화면에 출력한다. 

이때 <a>에 들어가는 href 값을 꼭 외부 페이지로 설정할 필요는 없다. 페이지 내부의 특정 요소로 초점을 두고 이동할 수도 있으며 이를 내부 링크라고 한다. 이 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

<a href="#some-element-id">회사 소개로 이동하기</a>
<h1 id="some-element-id">회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우에, 빠르게 화면 최상단으로 이동시키기 위해 내부 링크를 사용한다. 웹페이지 화면 하단에 있는 'top', '맨 위로 이동하기' 버튼이 이에 해당한다.

컨테이너Container 태그

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

컨테이너 태그는 요소들을 묶기 위해 사용하는 태그다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 컨테이너 태그들이 많이 사용된다. 대표적인 컨테이너 태그는 <div>, <span>이다. 이 때 <div>는 블록 레벨(부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소)이고 <span>은 인라인 레벨(하나의 라인 안에서 자신의 내용만큼만 박스를 만드는 요소)이다.

리스트List 태그

리스트는 일련된 항목들이 나열된 것들을 의미한다. 콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다. 리스트 태그는 순서가 없는 리스트를 표현할 때 사용되는 <ul> 태그, 순서가 있는 리스트를 표현할 때 사용되는 <ol> 태그, 용어와 정의를 표현할 때 사용되는 <dl> 태그로 구분한다.

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

이미지image 태그

<img src="./images/pizza.png" alt="피자">

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그다. 이미지 태그 역시 두 가지의 필수 속성값을 가지는데, 이미지의 경로를 나타내 주는 속성인 src와 이미지의 대체 텍스트를 나타내는 속성인 alt다.

별개로 width/ height로 크기값을 지정해줄 수 있으며 (값의 단위는 지정해주지 않아도 자동으로 픽셀 단위로 계산된다.) 이미지의 크기가 고정적이라면 미리 크기를 선언해 두는 것이 성능적인 측면에서 좋다. 두 개 모두 선언하지 않으면 원본 크기대로 노출되며 둘 중 하나만 선언하면 나머지 한 값의 비율대로 자동 변경돼 나온다. 반대로 둘 다 선언하면 원본 크기의 비율과 상관 없이 원하는 비율로 이미지를 끼워 넣을 수 있다.

src에 들어가는 이미지의 경로는 상대경로와 절대경로로 각각 지정해 줄 수 있다. 이 때 상대경로는 현재 웹 페이지를 기준으로(./) 상대적인 이미지의 위치를 나타내는 경로고 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

표table 태그

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있으며, 가로 방향을 행row, 세로 방향을 열column이라 부른다. 하나의 테이블은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 된다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다.

<table> : 표를 나타내는 태그.
<tr> : 행을 나타내는 태그.
<th> : 제목 셀을 나타내는 태그.
<td> : 셀을 나타내는 태그.
 

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

위는 1부터 16까지를 4행 4열로 표현한 표를 나타내는 코드다. 브라우저 기준으로 코드를 작성해 확인하면 테두리가 없어 표가 어색해 보일 수 있는데, 이는 브라우저에서 제공하는 테이블의 기본 스타일에 테두리가 없기 때문이다. 확인을 위해 아래 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있다.

<style>
    th, td { border: 1px solid; }
</style>

표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 어려워질 것이다. 따라서, 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다.

<caption> : 표의 제목을 나타내는 태그.
<thead> : 제목 행을 그룹화하는 태그.
<tfoot> : 바닥 행을 그룹화하는 태그.
<tbody> : 본문 행을 그룹화하는 태그.

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>

폼form 태그

폼 요소는 서버에 데이터를 전달하기 위한 요소고, <input>은 대표적인 폼 요소다. <input> 자체는 내용 없는 빈 요소이나 후술할 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.

<input type="text" placeholder="ㅇㅇㅇ">

아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하는 텍스트 타입. 텍스트 타입에는 placeholder 속성이 존재하는데, 이 속성을 이용하면 사용자가 입력하기 전에 미리 화면에 값을 노출해, 사용자가 입력해야 할 값의 양식을 표현해줄 수 있다.

<input type="password">

암호와 같이 공개할 수 없는 내용을 입력할 때 사용하는 패스워드 타입. 이 타입을 사용하면 화면엔 텍스트 타입과 같게 나타나지만 사용자가 실제로 입력할 땐 값을 노출하지 않는다.
 

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용하는 라디오 타입. 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

 
체크박스 버튼을 만들 때 사용되는 체크박스 타입. 체크박스는 중복 선택이 가능하다.

<input type="file">

파일을 서버에 올릴 때 사용하는 파일 타입. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 한다.

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

클릭 가능한 버튼을 만드는 submit, reset, image, button 타입.
 
submit : form의 값을 전송하는 버튼.
reset : form의 값을 초기화하는 버튼.
image : 이미지를 삽입할 수 있는 버튼. (submit과 동작이 동일함.)
button : 아무 기능이 없는 버튼.
 

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

<select>는 선택 목록 상자 또는 콤보박스라고도 한다. 몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그다. 기본적으로 하나를 선택하는 형태로 만들어지지만 multiple 속성을 사용하면 다중 선택도 가능하다. <select> 내부의 <option>으로 각 항목을 표현해줄 수 있으며 <option> 내부에 selected 속성을 표현해주면 시작부터 선택된 항목을 구현할 수 있다.

<textarea rows="5" cols="30">
    ...
</textarea>

<textarea>는 한 줄만 입력할 수 있는 input의 텍스트 타입과 달리 여러 줄의 텍스트를 입력할 때 사용한다. cols와 rows 속성을 각각 줄 수 있으며 이때 cols는 가로 크기를, rows는 세로 크기를 조절하는 속성이다.

<button type="submit|reset|button">ㅇㅇㅇ</button>

<button>은 버튼을 만들 때 사용할 수 있으며 submit, reset, button 세 가지의 타입을 가진다. 세 버튼의 용도는 위에서 표기한 input의 동일 이름 타입과 같은 기능을 가진다. 다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있어 input 대비 조금 더 자유로운 스타일을 표현할 수 있다는 장점이 있다.
 

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

<label>은 form 내부의 이름과 요소를 명시적으로 연결시키기 위해 사용한다. 사용을 위해서는 form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어줘야 하며, <label>을 사용하면 클릭했을 경우 해당 <form> 요소를 클릭한 것처럼 동작한다. 사용성, 접근성 측면으로 중요한 역할을 하므로 반드시 써 주는 것이 좋다.

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<fieldset>, <legend>는 form 요소를 구조화하기 위해 필요한 태그다. 여러 태그를 함께 쓸 때, <fieldset>의 바로 밑에는 반드시 자식 열인 <legend>가 위치해야 한다.

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용.
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성.

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해 주는 역할을 한다. <fieldset>으로 구조화돼 있다면 <fieldset>도 함께 감싸 줘야 한다. <form>에는 2가지 속성이 있는데, 데이터를 처리하는 서버의 주소를 표기하는  action 속성과 데이터를 전송하는 방식을 지정하는 method 속성이다. 이때 method 속성값에는 get/ post 두 가지 방식이 존재하며, get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출되는 형식이며 post는 데이터가 전송될 때 노출되지 않는 형식이다.