HTML 문서의 구성 요소
- <html> tag는 HTML 문서의 전체를 정의
- Head와 Body로 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>제목</title>
</head>
<body>
내용
</body>
</html>
Head 요소
문서 머리글(head), 제목(title)
- <head> tag는 브라우저에게 HTML문서의 머리 부분임을 인식
- <title>, <meta>, <style>, <script>, <link> tag를 포함 가능
- <title> tag는 문서의 제목을 의미, 브라우저의 제목 표시줄에 tag의 내용이 나타남
- <title> 이외의 다른 tag로 표현한 정보는 화면에 출력 X
메타 데이터(meta)
- 문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 일반 정보를 나타냄
- name과 content 속성을 이용하여 다양한 정보를 나타냄
- http-equiv 속성을 이용하여 문서 이동 및 새로고침이 가능
- charset 속성을 이용하여 문서의 인코딩 정보를 설정
Body 요소
body
- Web Browser에 보여질 문서의 내용을 작성
- <head> tag 다음에 위치하고 <head> 내부에 위치하는 tag와 <html>을 제외한 모든 tag
- id 속성을 이용하여 문서 내에서 tag를 유일하게 식별 가능
- class 속성을 이용하여 여러 tag에 공통적인 특성(CSS)을 부여
heading
- 문단의 제목을 지정할 때 사용
- <h1> 부터 <h6>까지 구분
- <section> tag를 이용하면 같은 tag를서로 다르게 표현
- 문서 구조를 <section> tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>head tag</title>
</head>
<body>
<h1>문단 제목 h1</h1>
<h2>문단 제목 h2</h2>
<h3>문단 제목 h3</h3>
<h4>문단 제목 h4</h4>
<h5>문단 제목 h5</h5>
<h6>문단 제목 h6</h6>
<section>
<h1>섹션 문단 제목 1번째</h1>
<section>
<h1>섹션 문단 제목 1-1번째</h1>
<section>
<h1>섹션 문단 제목 1-2번째</h1>
</section>
</section>
<h1>섹션 문단 제목 2번째</h1>
</section>
</body>
</html>
특수문자
| 엔티티 이름 |
설명 |
화면출력 |
| |
Non-breaking space(공백) |
|
| < |
Less than |
< |
| > |
Greather than |
> |
| & |
Ampersand |
& |
| " |
Quotation mark |
" |
| © |
Copyright |
© |
| ® |
registered trademark |
® |
HTML 기본 태그
포맷팅 요소
- 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있음
| tag명 |
설명 |
| <abbr> |
생략된 약어 표시. Title 속성을 함께 사용 |
| <address> |
연락처 정보 표시 |
| <blockquote> |
긴 인용문구 표시. 좌우로 들여쓰기가 됨 |
| <q> |
짧은 인용문구 표시. 좌우로 따옴표가 붙음 |
| <cite> |
웹 문서나 포스트에서 참고 내용 표시 |
| <pre> |
공백, 줄 바꿈 등 입력된 그대로 화면에 표시 |
| <code> |
컴퓨터 인식을 위한 소스 코드 |
| <mark> |
특정 문자열을 강조. 화면에는 하이라이팅 됨 |
| <hr> |
구분선 |
| <b>, <strong> |
굵은 글씨로 표시, 특정 문자열을 강조(<strong>) |
| <i>, <em> |
이탤릭(기울게) 표시, 특정 문자열을 강조(<em>) |
| <big>, <small> |
큰 글자, 작은 글자로 표시 |
| <sup>, <sub> |
위 첨자, 아래 첨자로 표시 |
| <s>, <u> |
취소선, 밑줄 |
목록형 요소
- 목록 tag는 하나 이상의 하위 tag를 포함
- 목록 tag는 각 항목의 들여쓰기로 표현
- 번호 또는 심볼을 이용해서 목록을 표현
| tag명 |
설명 |
| <ul> |
번호 없는 목록을 표시 |
| 항목 앞에 심볼을 표시 |
|
| <ol> |
번호 있는 목록을 표시 |
| 숫자, 알파벳, 로마숫자 등으로 표시 |
|
| <li> |
목록 항목 |
| <ul>이나 <ol> tag의 하위에서 사용 |
|
| <dl> |
용어 정의와 설명에 대한 내용을 |
| 목록화해서 표시 |
|
| <dt> |
용어 목록의 정의 부분을 나타냄 |
| <dd> |
용어 목록의 설명 부분을 나타냄 |
[ol태그 속성]
| 속성 |
속성값 |
설명 |
| type |
1 |
숫자(Default) |
| " |
a |
영문 소문자 |
| " |
A |
영문 대문자 |
| " |
i |
로마 소문자 |
| " |
I |
로마 대문자 |
| start |
숫자 |
시작 번호 |
| reversed |
|
역순으로 표시 |
table
- HTML table 모델
- HTML table 모델은 데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시
- 행 그룹요소인 <thead>, <tbody>, <tfoot> 요소를 사용하여 행들을 그룹화
- <colgroup>과 <col> 요소는 열 그룹을 위한 추가적인 구조정보를 제공
- table의 셀(Cell)은 머리글(<th>)이나 데이터(<td>)를 가질 수 있음
- table 제목
- <caption> tag는 table의 제목을 정의하기 위해 사용하며 <table> start tag 바로 뒤에 위치
- <caption> tag는 table당 하나만 사용
- table 제목은 기본적으로 가운데 정렬
- 행(Row) 그룹 요소
- table 행 그룹요소는 table의 행들을 머리글, 바닥글, 하나 이상의 본체 항목으로 Grouping
- 행 그룹 요소에는 머리글(<thead>), 본체항목(<tbody>), 바닥글(<tfood>) 요소가 있음
- 각 행 그룹은 최소 하나 이상의 <tr>을 가져야 함
- 열(Column) 그룹 요소
- table 열 그룹 요소는 table 내에서 구조적인 분리를 가능하게 함.
- <colgroup> 요소는 명시적인 열 그룹열을 만들며, <col> 요소는 열<column>을 묶어 그룹핑 함
- <colgroup> 요소의 span 속성은 열 그룹에서 열의 개수를 정의
- <col> 요소의 span 속성은 <col>에 의해 묶여진 열의 개수를 말함
- 실질적으로는 CSS로 스타일을 다루고 <colgroup> 태그는 사용하지 않음
- 셀 병합
- colspan 속성은 두 개 이상의 열(Column)을 하나로 합치기 위해 사용
- rowspan 속성은 두 개 이상의 행(Row)을 하나로 합치기 위해 사용
이미지 요소 - img
- <img> tag를 사용하며 이미지를 삽입하기 위해 사용
- src 속성은 이미지 경로를 지정하기 위해 사용 (상대경로, URL 모두 가능)
- height, width 속성을 이미지 사이즈를 지정하기 위해 사용
- alt 속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정
- <figure>는 설명글을 붙여야 할 대상을 지정
- 설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption> 태그로 묶음
- 설명 글을 붙일 수 있는 대상은 미디어파일 / 텍스트 단락/ 표
링크 요소
- Anchor
- <a> tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 하이퍼링크 사용
- tag를 서로 중첩해서 사용할 수 없음
- href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정
- target
- 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정
| 속성 값 |
설명 |
| _blank |
링크 내용이 새 창이나 새 탭에서 열림 |
| _self |
target 속성의 기본 값으로 링크가 있는 화면에서 열림 |
| _parent |
프레임을 사용했을 때 링크 내용을 부모 프레임에 표시 |
| _top |
프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면으로 표시 |
- #anchor
- 같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한번에 이동
- <tag id="anchor name"> text or image </tag>
- <a href="#anchor name"> text or image <a>
- 위 처럼 두개가 있을 떄 아래를 클릭 시 위의 tag로 이동
- map
- 하나의 이미지에 여러 개의 link (Click 위치에 따라 서로 다른 link)
- <map name="map name"> <area> <area> ... </map>
- 이미지에 영역을 표시할 때 <area> 사용
- area의 속성은 href(링크 경로), target(링크 표시 대상), shape(링크로 사용할 영역의 형태) 등
- shape의 값으로는 default, rect, circle, poly가 있음
- link
- link tag를 사용하며 문서와 외부 자원을 연결하기 위해 사용
- <head> 위치에 정의하며 여러 자원을 연결할 수 있음
- rel 속성은 현재 문서와 연결된 문서 사이의 연관관계를 지정하기 위해 사용
- href 속성은 연결된 문서의 위치를 지정하기 위해 사용
프레임 요소 - iframe
- 화면의 일부분에 다른 문서를 포함
- src 속성은 포함시킬 외부 문서의 경로를 지정(상대경로, URL 모두 가능)
- height, width 속성은 프레임 사이즈를 지정
- name 속성은 프레임의 이름을 지정
