HTML5 마크업 요소(Markup Elements)
포맷팅 요소
포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것들이 존재
<abbr>: 생략된 약어 표시. Title 속성을 함께 사용<address>: 연락처 정보 표시<blockquote>: 긴 인용분구 표시, 좌우 들여쓰기<q>: 짧은 인용문구 표시, 좌우 따옴표<cite>: 웹 문서나 포스트에서 참고 내용 표시<pre>: 공백, 줄 바꿈 등 입력된 그대로 화면에 표시<code>: 컴퓨터 인신을 위한 소스 코드<mark>: 특정 문자열을 강조, 화면에는 하이라이팅 됨<hr>: 구분선<b>,<strong>: 굵은 글씨로 표시, 특정 문자열 강조(<strong>)<i>,<em>: 이텔릭(기울게) 표시, 특정 문자열 강조(<em>)<big>,<small>: 큰 글자, 작은 글자 표시<sup>,<sub>: 위 첨자, 아래 첨자로 표시<s>,<u>: 취소선, 밑줄
목록형 요소
목록 태그는 하나 이상의 하위 태그를 포함
목록 태그는 각 항목을 들여쓰기로 표현
번호 또는 심볼을 이용해서 목록을 표현
<ul>: 번호 없는 목록 표시. 항목 앞에 심볼 표시<ol>: 번호 있는 목록 표시. 숫자, 알파벳, 로마숫자 등으로 표시- type
- 1 : 숫자(기본값)
- a : 영어 소문자
- A : 영어 대문자
- i : 로마숫자 소문자
- I : 로마숫자 대문자
- start
- 숫자 : 시작 번호
- reversed
- 역순으로 표시
- type
<li>: 목록 항목<ul>또는<ol>태그 하위에서 사용<dl>: 용어 정의와 설명에 대한 내용을 목록화해서 표시<dt>: 용어 목록의 정의 부분을 나타냄<dd>: 용어 목록의 설명 부분을 나타냄
table
HTML table 모델
HTML table 모델은 데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시
행 그룹요소인 <thead> , <tbody> , <tfoot> 요소를 사용하여 행들을 그룹화
<colgroup> 과 <col> 요소는 열 그룹을 위한 추가적인 구조정보 제공
table의 셀(Cell)은 머리글(<th>)이나 데이터(<td>)를 가질 수 있다
table 스타일
<table> , <tr> , <td> 태그에는 table에 스타일을 적용하는 다양한 속성 존재
frame 속성은 table의 특정 선을 보여줄지 결정, rules 속성은 셀과 셀 사이 줄이 나타날 것인가 지정
table 정렬을 위한 align 속성 , 그 외 background, bgcolor, border 속성 등이 존재
HTML5 부터는 이러한 속성 더 이상 지원하지 않는다. 스타일은 CSS를 사용하여 적용
table 제목
<caption> 태그는 table 제목을 정의하기 위해 사용하며 <table> 시작 태그 바로 뒤에 위치
<caption> 태그는 table 당 하나만 사용
table 제목은 기본적으로 가운데 정렬, 정렬 방식 변경은 CSS 사용
행(Row) 그룹 요소
table 행 그룹 요소는 table의 행들을 머리글, 마닥글, 하나 이상의 본체 항목으로 그룹핑
행 그룹 요소에는 머리글 <thead> , 본체 항목 <tbody> , 바닥글 <tfoot> 요소가 존재
각 행 그룹은 최소 하나 이상의 <tr> 을 가져야 한다
열(Column) 그룹 요소
table 열 그룹 요소는 table 내에서 구조적인 분리를 가능케 한다
<colgroup> 요소는 명시적인 열 그룹을 만들며, <col> 요소는 열(column)을 묶어 그룹핑 한다
<colgroup> 요소의 span 속성은 열 그룸에서 열의 개수를 정의
<col> 요소의 span 속성은 <col> 에 의해 묶여진 열의 개수를 말함
border
cellspacing 은 table Cell 과 Cell 사이의 공간을 의미
cellpadding 은 Cell 외곽과 Cell 컨텐츠 사이의 공간을 의미
HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고, CSS를 사용
셀 병합
HTML table의 <td> 요소에는 셀(Cell)을 병합하기 위한 두 가지 속성 존재
colspan 속성은 두 개 이상의 열(Column)을 하나로 합치기 위해 사용
rowspan 속성은 두 개 이상의 행(Row)을 하나로 합치기 위해 사용
이미지 요소
<img> 태그를 사용하며 이미지를 삽입하기 위해 사용
src 속성은 이미지 경로를 지정하기 위해 사용(상대경로, URL 모두 가능)
height, width 속성은 이미지 사이즈를 지정하기 위해 사용
alt 속성을 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정
<figure> : 설명 글을 붙여야 할 대상을 지정
<figcaption> : 설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption> 태그로 묶는다
설명 글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어파일이나 텍스트 단락이나 표
링크 요소
Anchor
<a> 태그를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해(하이퍼링크) 사용
태그를 서로 중첩해서 사용할 수 없다
href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정
target 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정
<target>
- _blank : 링크 내용이 새 창이나 새 탭에서 열린다.
- _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
- _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
- _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면으로 표시
#anchor
같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한 번에 이동시킨다.
<tag id="anchor name">...</tag>
<a href="#anchor name">...</a>
map
하나의 이미지에 여러 개의 link (Clink 위치에 따라 서로 다른 link)
<map name="map name"><area><area>...</map>
이미지에 영역을 표시 할 때 <area> 사용
area 속성은 href(링크 경로), target(링크 표시 대상), shape(링크로 사용할 영역의 형태) 등
shape의 값으로 default, rect, circle, poly 가 있다.
link
문서와 외부 자원을 연결하기 위해 사용
<head> 위치에 정의하며 여러 자원을 연결할 수 있다.
rel 속성은 현재 문서와 연결된 문서 사이의 연관관계를 지정하기 위해 사용
href 속성은 연결된 문서의 위치를 지정하기 위해 사용
프레임 요소 - iframe
화면의 일부분에 다른 문서를 포함
src 속성은 포함시킬 외부 문서의 경로를 지정(상대 경로, URL 모두 가능)
height, width 속성은 프레임 사이즈를 지정
name 속성은 프레임의 이름을 지정
보안 상의 이유로 보통 X-Frame-Options : Deny로 설정
'Front-End > HTML5' 카테고리의 다른 글
| semantic (0) | 2022.09.04 |
|---|---|
| HTML5 마크업 요소(Markup Elements) 3 (0) | 2022.09.01 |
| HTML5 마크업 요소(Markup Elements) 2 (0) | 2022.09.01 |
| HTML 기본 (0) | 2022.08.30 |
| HTML 소개 (0) | 2022.08.30 |