doctype

Type 선택자

xhtml 요소명을 선택자로 사용하는 것을 “Type 선택자” 또는 “요소 선택자”, “태그 선택자” 라고 함.

요소명 { 속성 : 값; }  // ex) p { color:#ff0000; }

전체 선택자

선택자에 * 기호를 사용하면 모든 요소에 스타일을 지정할 수 있음.
이를 “전체 선택자” 또는 “유니버셜(universal) 선택자” 라고 함.

* { margin:0; padding:0; }

class 선택자와 id 선택자

xhtml 요소에 class나 id 속성을 부여한 경우에 해당 class나 id 이름으로 접근하여 선택할 수 있음.
class 이름은 여러 번 사용할 수 있으니 한꺼번에 스타일 지정할 때 사용하면 편함.
id 이름은 한번만 사용할 수 있기 때문에 특정 요소에 접근하여 스타일을 지정할 때 사용할 수 있음.

class 선택자 (요소명 생략 가능)
요소명.클래스명 { 속성 : 값; }

id 선택자 (요소명 생략 가능)
요소명#아이디명 { 속성 : 값; }

속성 선택자

xhtml 요소가 특정 속성명이나 속성값을 가진 경우 해당 속성명으로 접근하여 스타일을 적용하는 방법.
IE6 과 같은 구버전의 브라우저에서는 지원하지 않는게 함정.

a[target] { background-color:#ff0000; } // a 요소에 target 속성이 있는 경우
a[target=”_blank”] { background-color:#ff0000; } // a 요소에 target 속성의 값이 _blank인 경우
a[class~=”new”] { background-color:#ff0000; } // a 요소의 class 속성이 여러 개 있는 경우

가상 요소와 가상 클래스

사용자가 지정할 필요 없이 기본적으로 제공되는 요소와 클래스.

1. first-line, first-letter 가상 요소

first-line 선택자는 요소의 첫 번째 줄에 있는 컨텐츠만 선택하여 스타일을 지정할 때 사용. first-line 가상 요소 선택자.
고정된 영역이 아니라 웹 브라우저의 크기에 따라 유동적으로 스타일이 적용됨.

first-letter 선택자는 요소의 첫 글자만 선택하여 스타일을 지정할 때 사용. first-letter 가상 요소 선택자.

2. before, after 가상요소

특정 요소에서 내용의 앞이나 뒤에 가상 컨텐츠를 삽입할 때 :before 가상요소와 :after 가상요소를 선택자로 사용.
IE의 경우 8 이상 버전부터 지원 가능.

p:before { content:"문단시작 컨텐츠 삽입"; }
p:before { content:"문단종료 컨텐츠 삽입"; }

근데 이거 쓸 일이 있긴 있으려나 싶음.

3. first-child 가상 클래스

첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자.

4. 링크 가상 클래스

상황에 따라 링크 스타일을 적용하는 방식.

1. :link - 방문하지 않은 링크
2. :visited - 방문한 링크
3. :hover - 마우스를 올려놓았을 경우
4. :active - 활성화 되었을 경우
5. :focus - 포커스가 생긴 경우

위의 순서대로 선언해야 함.

선택자 조합

1. 하위 선택자

상위 요소가 포함하고 있는 모든 하위 요소에 스타일을 지정할 때 하위 선택자를 사용할 수 있음.
하위 선택자 방식으로 조합할 때는 선택자와 선택자를 공백으로 구분하여 선언.

선택자 선택자 { 속성 : 값; }

div 요소 안의 p 요소에만 color 속성이 적용.

2. 자식 선택자

자식 선택자는 부모 요소의 바로 다음에 있는 자식 요소에 스타일을 적용하는 방법.
선택자와 선택자를 왼쪽 부등호(>)로 구분하여 선언.
IE6 같은 구버전 웹브라우저에서는 지원하지 않음.

선택자 > 선택자 { 속성 : 값; }

child 클래스가 적용된 div 요소의 자식 요소인 p 요소에만 ("동해물과 백두산이 마르고 닳도록") 부분만 적용.
다른 p 요소("하느님이 보우하사 우리나라만세") 부분은 자식이 아닌 손자이기 때문에 적용되지 않음.

3. 인접 형제 선택자

계층 구조로 접근했을 때 먼저 나오는 요소를 형 요소, 뒤에 나오는 요소를 동생요소라고 봄.
동생 요소에 스타일을 적용할 때 사용.

선택자 + 선택자 { 속성 : 값; } // 플러스기호(+)로 구분.

같은 동생 요소라 하더라도 인접한 형 요소가 없으면 두 번째 나오는 동생요소는 스타일이 적용되지 않음.

선택자 그룹화

다수의 요소에 똑같은 선언을 지정할 경우 같은 선언문을 반복해서 작성해야 하기 때문에 코드가 길어짐.
그룹화 하여 같은 선언문을 사용할 수 있음.

선택자, 선택자, 선택자 { 속성 : 값; } // 콤마로 나열함.

CSS란?

Cascading Style Sheet 의 약자.
마크업 요소에 스타일을 적용하기 위해 W3C에서 고안한 언어.

테이블 방식의 레이아웃 때문에 마크업 코드가 복잡해지는 문제를 해결할 수 있고,
표현과 관련된 요소(font, b, i 등)의 사용을 제한하면서 CSS 속성으로 대체할 수 있음.

CSS 방식의 디자인은 웹 사이트의 성능 향상에 기여.
웹 접근성이나 웹 사용성을 높이는데도 효과적.

CSS 서식

1. Rule set

CSS 서식은 ‘선택자’와 ‘선언부’로 나눌 수 있음.
선택자는 스타일을 적용할 대상을 의미.
선언부는 선택자에 적용할 디자인 관련 속성과 값을 의미.

selector { property : value; } // 선택자 { 속성 : 값; }

2. CSS 적용하기

- External Style Sheet (외부 스타일시트)

CSS 파일을 독립적으로 생성하여 웹 문서에 삽입하는 방법.
@import 와 link 요소를 이용하는 두 가지 방법이 있음.
구 버전 웹 브라우저에서는 @import 를 해석하지 못하는 경우가 있으니 주의.

<link rel=”stylesheet” type"=”text/css” href=”연결하려는 css 파일 경로와 파일명” />

<style type=”text/css”>
    @import url(“연결하려는 css 파일 경로와 파일명”);
</style>

외부에서 css 파일을 지정할 경우 css 파일이 캐시에 저장되기 때문에
사용자가 웹 사이트에 다시 방문했을 때 로딩 속도를 빠르게 할 수 있음.

css를 외부에 분리하여 적용할 경우 문자 코드 세트를 첫 줄에 선언해야 함. (@charset “utf-8”;)

- Internal Style Sheet (내부 스타일시트)

html 문서 내의 style 요소에 css 코드를 포함하는 형식.
특정 웹 문서에만 적용할 경우 외부 문서로 선언하는 것보다 효율적일 수 있음.

<style type=”text/css”>
    css 선언
</style>

- Inline Style Sheet (인라인 스타일시트)

특정 요소에 직접 style 속성을 이용하여 적용하는 방법.
기존 font 요소를 이용하는 것과 차이가 별로 없으므로 권장하는 방법은 아님.

<p style=”css 선언”>텍스트</p>

폼 관련 요소

1. 폼이란?

웹 문서가 서로 상호작용을 할 수 있도록 함. (라디오 버튼, 체크박스, 콤보박스, 버튼 등등)

2. 폼 요소 <form>

폼의 범위를 정의할 때 form 요소를 사용.
속성으로는 폼의 내용을 처리하는 서버의 URI를 지정하기 위한 action과
폼의 내용을 처리하는 방법인 method 가 있음.

<form action=”서버 URI” method=”get 또는 post”>
    폼의 내용
</form>

* GET 과 POST 의 전송방식의 차이점
   GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적.
   POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다.

3. 폼 요소 그룹화 및 제목 <fieldset>, <legend>

여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset 요소를 사용.
fieldset 요소를 이용하면 주위에 border가 생성되어 그룹 안에 있는 컨텐츠가 폼과 관련된 요소임이 쉽게 구별됨.

fieldset의 컨트롤들이 어떤 성격의 컨텐츠인지 legend 요소로 제목형식으로 알려줄 수 있음.
fieldset 요소의 바로 뒤에 한번만 작성할 수 있음.
웹 브라우저 스타일이 다르게 적용되어 있어 css 디자인 작업에는 곤란할 수 있음.

<form action=”서버 URI” method=”post”>
    <fieldset>
        <legend>폼 요소의 제목</legend>
        … 생략 …
    </fieldset>
</form>

4. 레이블 <label>

폼을 구조화하고 접근성을 높일 수 있는 요소 중 하나.
각 폼 컨트롤의 연관 관계와 설명을 추가하는 역할을 담당.
웹 접근성을 높이기 위해 모든 폼 컨트롤 등에 label 요소를 사용하도록 권장.
* 최신 웹 브라우저의 경우 레이블만 선택해도 폼 컨트롤을 선택.
* 음성 브라우저의 경우 폼 컨트롤이 레이블과 인접하지 않은 경우에도 인식.

명시적 label (id와 for 속성 연결시키기)

<form action=”member.asp” method=”post”>
    <fieldset>
        <legend>회윈가입 정보</legend>
        <p><label for=”userName”>이름</label>
        <input type=”text” id=”userName” name=”name” value=”value” /></p>
    </fieldset>
</form>

암묵적 label (label 요소에 폼 컨트롤 포함시키기)

5. 다양한 폼 컨트롤 <input>

폼 요소 안에 한 줄 글상자, 라디오 버튼, 체크 박스 등의 폼 컨트롤을 생성할 때는 input 요소를 사용.
type 속성값에 따라 폼의 종류가 결정. (type=”컨트롤값”)

- text : 한 줄 글상자. 이름, id 등의 컨트롤을 생성할 때 사용.
- password : 비밀번호 입력 상자. 입력값이 * 로 표시.
- radio : 여러 개의 라디오 버튼 중 하나만 선택 가능.
- checkbox : 다중 선택이 가능한 체크 박스.
- file : 파일을 첨부형태로 서버로 보낼 때 사용.
- image : 이미지 버튼으로 src 속성을 이용하여 이미지를 지정. alt 속성으로 대체 텍스트 지정 가능.
- submit : 전송 버튼.
- reset : 취소 버튼.
- button : 범용 버튼.
- hidden : 숨김 컨트롤. 화면에 표시되지 않고 데이터 송신 지정을 위한 컨트롤.

<input type=”컨트롤값” vlaue=”초기값” size=”크기” id=”식별자” name=”변수명” />

6. 목록 상자 <select>, <option>, <optgroup>

select와 option 요소를 이용.
드롭다운 메뉴와 리스트 박스.

<select name=”” id=””>
    <option value=”초기값”>항목</option>
</select>

7. 여러 줄 글상자 <textarea>

여러 줄로 된 텍스트를 입력받을 때는 textarea 요소를 이용.
textarea 요소 안에서 입력한 텍스트의 내용이 길어지면 임의의 줄로 바뀜.
텍스트 수의 제한은 없음.

cols, rows 속성을 이용하여 영역크기를 지정.

<textarea cols=”” rows=”” name=”” id=””>
    초기값이 되는 텍스트 작성
</textarea>

8. 버튼 요소 <button>

button 요소를 이용하는 경우는 input 요소의 submit, reset, button 등의 type값과 같음.
그러나 좀 더 유연한 디자인이 가능.

<button type=”버튼의 종류” name=”변수명” id=”식별자”>버튼명</button>

인라인 프레임과 개체 삽입

1. 인라인 프레임 <iframe>

인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe 요소를 사용.
IE의 독자적인 요소였으나 HTML 4.0과 HTML 4.01 dlgn wjdtlrdmfh wldnjs.
XHTML 1.0 Strict 와 XHTML 1.1 에서는 사용할 수 없음.
Transitional DTD 에서만 사용 가능.

<iframe src=”삽입할 문서” id=”식별자” name=”변수명” frameborder=”테두리 표현 여부” width=”가로 크기” height=”세로 크기” scrolling=”스크롤 여부” title=”삽입된 컨텐츠의 성격이나 내용을 대체할 수 있는 설명”>
    프레임이 지원되지 않는 환경 대체 컨텐츠
</iframe>

2. 개체 삽입 <object>

이미지를 포함한 플래시 개체나 동영상, 사운드 등의 플러그인 개체를 의미.
IE와 IE가 아닌 다른 브라우저가 개체를 참조하는 방식이 다른 문제가 있음.

object 요소의 계층화 기법을 이용.

스타일과 스크립트

1. 내부 스타일 적용 <style>

가독성을 높이거나 시각적으로 화려하게 표현하려면 CSS(Cascading Style Sheet)를 이용.
CSS를 HTML 문서에 적용할 때 사용.
style 요소는 <head></head> 사이에만 올 수 있음.

<style type=”text/css”>
    CSS 구문
</style>

<tag style=”css 구문”></tag>

* CSS 코드를 외부 문서로 삽입하는 경우.
<link rel="stylesheet" type="text/css" href=”CSS 파일 경로와 파일명”>

2. 스크립트 삽입 <script>

script 요소는 head 요소와 body 요소에 여러 번 삽입 가능.

<script type=”text/javascript>
    스크립트 코드
</script>

* 스크립트 코드를 외부 문서로 삽입하는 경우.
<script type=”text/javascript” src=”스크립트 파일 경로와 파일명”></script>

그룹화 요소

1. 블록 그룹화 요소 <div>

div 요소는 분할, 나누기의 의미를 가짐.
그룹핑의 역할을 수행.
주로 블록 요소를 그룹화하기 위해 사용.
id, class 속성으로 해당 그룹의 의미를 부여할 수 있음.
레이아웃을 구현할 때 사용할 수 있고 논리적인 구조를 고려하여 서로 연관성 있는 컨텐츠를 그룹핑 하는 것이 좋음.

<div id=”coffee”>
    <div class=”origin”>
        블록 요소
    </div>
    <div class=”blending”>
        블록 요소
    </div>
</div>

2. 인라인 그룹화 요소 <span>

블록 요소를 그룹화 할때에 div를 사용했지만 인라인 요소를 그룹화 할때엔 span.
id, class 속성을 이용하여 그룹화한 요소에 의미를 부여.
span 요소가 인라인 요소이므로 블록 요소(p, ul 등등)를 포함할 수 없음.

<span>
    인라인 요소
</span>

링크와 이미지

1. 하이퍼링크 <a>

a 요소는 텍스트나 이미지 컨텐츠에 링크를 설정할 때 사용.
href, target, title 속성 등을 사용할 수 있음.
Transitional DTD 일 경우에만 target 속성을 지정 가능.

<a href=”파일명 또는 url” target=”_blank” title=”대체 설명”>텍스트 또는 이미지</a>

2. 이미지 <img>

웹 문서에 텍스트가 아닌 이미지 개체를 삽입할 때에 빈 요소인 <img /> 요소를 이용.
src 속성과 alt 속성은 필수.
이미지의 크기 정보를 지정할 때에는 width / height 속성을 사용.
alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용.

<img src=”파일 경로” width=”넓이” height=”높이” alt=”대체 텍스트” />

3. 이미지 맵 <map>, <area>

이미지 맵은 이미지의 여러 곳에 링크를 설정할 때 사용할 수 있음.

* 클라이언트 사이드 이미지 맵 (client-side image map)
   사용자가 이미지의 특정 영역을 클릭할 경우
   브라우저에서 클릭한 곳의 좌표를 기준으로 링크 위치를 판단하는 형태.

* 서버 사이드 이미지 맵 (server-side image map)
   사용자가 이미지의 특정 영역을 클릭하면
   서버에 있는 CGI 등의 프로그램을 통해 클릭한 곳의 좌표가 서버로 전송.

<img src=”URI” alt=”대체 텍스트” usemap=”이미지 맵 ID” />
<map id=”맵 요소 이름”>
    <area shape=”default | rect | circle | poly” codes=”좌표” href=”URI” alt=”대체 텍스트” />
</map>

목록 관련 요소

1. 비순서형 목록 <ul>

순서가 중요하지 않은 컨텐츠에 적절.

2. 순서형 목록 <ol>

순서가 중요한 컨텐츠에 적절.

* 중첩 형식의 하위 목록을 마크업 할 경우 ul요소나 ol요소의 자식요소로는 li 요소만 올 수 있음.

3. 정의형 목록 <dl>

용어 정의 리스트를 생성할 때 사용.
단순히 정의형 목록(용어 제목, 용어 설명 등)만이 아니라 주종 관계가 성립되는 컨텐츠에 광범위하게 사용.

<dl>
    <dt>용어 제목</dt>
    <dd>용어 설명</dd>
</dl>

텍스트 관련 요소

1. 강조 <strong>, <em>

strong 요소는 강한 강조를, em 요소는 강조의 의미를 갖음.
일부 음성 브라우저의 경우 강조 관련 요소로 마크업한 컨텐츠는 좀 더 크게 읽어주거나 두 번 반복해서 읽어주기도 함.

<p>텍스트<em>강조할 텍스트</em>텍스트</p>
<p>텍스트<strong>강조할 텍스트</strong>텍스트</p>

2. 인용문 <blockquote>, <q>

블록 단위의 인용문이나 문장 형태의 짧은 인용문의 경우.
blockquote 요소는 블록 요소만 포함.
q 요소는 인라인 요소와 텍스트를 포함.

<blockquote cite=”출처”>
    <p>블록 인용구</p>
</blockquote>

<p>텍스트 <q site=”출처”>인라인 인용구</q> 텍스트</p>

3. 축약어 및 두문자어 <abbr>, <acronym>

abbr 요소는 WWW(World Wide Web)처럼 스펠링을 하나씩 발음하는 경우나
Apartmention을 Apt.라고 줄여서 단어의 자음이나 모음만 맞추는 등 긴 단어를 단순하게 줄여 사용하는 것을 말함.

<p><abbr title=”World Wide Web Consortium”>W3C</abbr></p>

acronym 요소는 얼핏 abbr 요소와 비슷하지만,
여러 개의 단어들로 이루어진 문장 또는 복합 단어의 앞글자만 따서 줄여 사용하는 것을 말함.
Random Access Memory를 RAM 이라고 발음하는 경우에 해당.

<p><acronym title=”Rich Internet Application”>RIA</acronym></p>

4. 추가글 및 삭제글 <ins>, <del>

이거 쓰긴 쓰나..? 패스.

5. 첨자 <sup>, <sub>

X²  와 같이 윗첨자를 표현할 때엔 sup 요소 사용
H₂O 와 같이 아랫첨자로 표현할 때엔 sub 요소 사용

테이블 관련 요소

1. 테이블 요소 <table>, <tr>, <th>, <td>

제목 셀(th)은 내용 셀(td)과 달리 기본적으로 셀의 가로 가운데 정렬, 굵은 텍스트(bold) 효과가 적용됨.

2. 셀 병합 (colspan속성, rowspan 속성)

제목 셀(th)이나 내용 셀(td)은 colspan 속성이나 rowspan 속성을 이용하여 원하는 방향으로 셀을 병합할 수 있음.
열이 다른 셀을 병합할 때엔 colspan.
행이 다른 셀을 병합할 때엔 rowspan.

3. 테이블 제목 및 요약문 <caption>, <summary>

접근성 높은 테이블 데이터를 마크업할 때엔 테이블의 제목과 데이터의 내용을 요약해서 알려줄 수 있는
caption 요소와 summary 속성을 사용하는 것이 좋음.
caption 에는 테이블의 내용을 대표할 수 있는 제목.
summary 에는 테이블의 내용을 설명하고,
시각적으로 테이블 접근이 쉽지 않은 사용자가 테이블의 컨텐츠를 파악한 후 건너뛸 것인지 탐색할 것인지
선택할 수 있도록 하는 것이 좋음.

<table border=”1” summary=”테이블 내의 데이터 요약”>
    <caption>테이블 제목</caption>
    … 생략 …
</table>

4. 열 그룹화 요소 <colgroup>, <col>

테이블의 열끼리 논리적으로 그룹화 할 때 사용.
그룹화하는 열이 하나 이상일 경우 span 속성을 사용하여 열을 지정.
colgroup 요소는 논리적인 그룹화를 위해 사용하고 col 요소는 스타일 지정을 목적으로 사용하는 점이 다름.

5. 행 그룹화 요소 <thead>, <tfoot>, <tbody>

테이블의 행을 논리적으로 구성할 때 헤더 행은 thead 요소, 행은 tfoot 요소, 본문 행은 tbody 요소를 사용.
thead와 tfoot 요소는 테이블에서 한번만 사용할 수 있음.
선언 순서는 thead, tfoot, tbody 순이고 colgroup 요소나 col 요소의 다음에 지정.
제목 행으로 지정된 thead 요소에는 반드시 제목 셀(th)을 이용해서 테이블의 헤더 영역임을 지정해야 함.

thead, tfoot 요소의 장점

테이블에 데이터가 많을 때에 인쇄할 때 여러 장에 걸쳐 출력되는 경우 테이블의 thead, tfoot 정보를 인쇄할 수 있음.
시각장애인의 경우 thead 요소 다음에 tfoot 요소의 정보가 위치하여
순차적으로 컨텐츠에 접근할 때에 통계 등의 테이블 종합정보를 모든 셀을 다 읽지 않아도 먼저 알 수 있음.

6. 제목 셀과 내용 셀의 연관성 (scope, id, headers 속성)

시각장애가 있거나 음성 브라우저를 사용하는 경우에는 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단하기 때문에
열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않음.
그래서 테이블의 열과 행의 제목 셀에 scope 속성을 지정하고 해당 값으로 col, row, rowgroup, colgroup을 할당하면
해당 셀이 열의 제목인지 행의 제목인지 알 수 있음.

scope 의 경우 주로 병합되지 않은 단순 형태의 테이블에 사용.
복잡한 테이블의 경우 th 요소는 id 속성으로 네이밍을 하고 연관성 있는 내용 셀에 headers 속성과 id값을 연결해줌.

* FireFox 브라우저의 부가기능 중 Juicy Studio Accessibility Toolbar 라는게 있는데
   쉽게 알아볼 수 있도록 제공해 줌.

https://addons.mozilla.org/ko/firefox/addon/juicy-studio-accessibility-too/

문서 정보 및 문서 제목

1. 문서 정보와 문자 코드 세트 (meta)

웹 브라우저에서 한글이나 영어와 같은 문자를 처리하기 위해 사용할 문자 코드 세트(인코딩) 선언 값과
저작자, 키워드, 요약문, 만기일 등에 관한 문서 정보의 경우 빈 요소인 meta 요소를 이용하여 지정할 수 있음.

* 문자 코드 세트 지정하기
   웹 페이지를 제작할 때 사용한 문자가 깨지지 않고 인코딩 되도록 하려면 meta 요소를 이용
   다국어 인코딩의 경우 utf-8 을 지정할 수 있고 한글은 euc-kr 을 지정
   요즘은 다들 utf-8 로 지정하는 듯

   <meta http-equive=”content-type” content=”text/html;charset=utf-8” />

* 키워드 지정하기
   meta 요소를 이용하면 검색 키워드를 지정할 수 있음
   검색 사이트에서 상위에 노출되는 효과를 얻을 수 있음

   <meta name=”keywords” content"=”웹 접근성, 웹 표준, xhtml 요소, 키워드 지정하기” />

* 다양한 문서 정보 지정하기
   화면에 보이진 않지만 웹페이지의 다양한 정보를 지정할 때에도 meta 요소를 사용할 수 있음
   웹페이지의 요약정보, 제작자 정보, 저작권 정보, 검색 로봇 제어 여부 등..

   <meta name=”subject” content=”문서 제목 정보” />
   <meta name=”description” content=”웹 페이지 요약 정보” />
   <meta name=”author” content=”제작자 정보” />
   <meta name=”robots” content=”검색 로봇 제어” />
   <meta name=”copyright” content=”저작권 정보” />

2. 문서 제목 (title)

웹 문서의 제목을 선언할 때 사용하는 요소.
문서마다 유일한 내용으로 구성해야 함.
title 요소는 즐겨찾기 및 북마크에 해당 웹 문서를 추가 할 경우 북마크 이름으로도 활용.

<title>문서 제목</title>

문단 관련 요소

1. 제목 <h1> ~ <h6>

제목 요소는 h1, h2, h3, h4, h5, h6의 여섯 가지를 사용할 수 있음.
잘 구성된 헤딩은 기기에서의 정보 인식성을 높일 수 있음.
헤딩을 이용하여 제목을 작성할 때는 h1 다음에 h2, h3 순으로 나와야 계층구조가 어긋나지 않음.

2. 단락 <p>

텍스트를 단락으로 정의할 때 사용.
단락 요소 안에는 a, img 등 인라인 요소와 텍스트만 포함할 수 있고 블록 요소는 사용할 수 없음.
단락 안에서 강제로 줄바꿈 해야 하는 경우에는 <br> 요소를 사용할 수 있지만 남용은 조심.

3. 줄 바꿈 <br>

단락에서 텍스트를 강제로 줄바꿈할 때에 “line break” 의미인 <br> 요소를 사용함.
<br> 요소는 빈 요소(empty element)로 <br /> 와 같이 사용함.

4. 주소 <address>

웹 문서의 아래쪽에 연락처(이메일 주소 포함) 및 제작자, 저작권(copyright) 정보 등을 표시할 수 있음.
단순한 집 주소의 의미가 아니라 웹 사이트 작성자 정보로써 문서의 공개일, 갱신일, 연락처(이메일 주소)의 정보를
사용자에게 제공하려고 할 때 사용하는 요소.
address 요소는 기울임꼴로 화면에 출력.

5. 구분선 <hr>

hr 요소는 수평선으로 표현되어 구분선 역할을 하고 빈 요소이며 <hr />로 종료 태그 없이 사용.
컨텐츠 전후의 내용을 구분할 수 있도록 선으로 나타내는 것.