포맷팅 요소
포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다.
예를 들면, <b>와 <strong>은 모두 텍스트를 굵게 표현하지만, <strong>요소는 텍스트를 강조
목록형 요소
목록 tag는 하나 이상의 하위 tag를 포함
목록 tag는 각 항목을 들여쓰기로 표현
번호 또는 심볼을 이용해서 목록을 표현
table - HTML table 모델
HTML table 모델은데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시
행 그룹요소인 <thead>, <tbody>, <tfoot> 요소를 사용하여 행들을 그룹화
<colgroup>과 <col> 요소는 열 그룹을 위한 추가적인 구조정보를 제공
table의 셀(Cell)은 머리글(<th>)이나 데이터(<td>)를 가질 수 있음
table - 스타일
<table>, <tr>, <td> tag에는 table에 스타일을 적용하는 다양한 속성들이 있다.
frame 속성은 table의 특정 선을 보여줄지를 결정하며, rules 속성은 셀과 셀사이의 줄이 나타날 것인가를 지정
table 정렬을 위한 align속성, background, bgcolor, border 속성 등이 있음.
HTML5부터는 이러한 속성들을 더 이상 지원하지 않는다. 스타일은 CSS를 사용하여 적용
table - 제목
<caption> tag는 table 제목을 정의하기 위해 사용하며 <table> start tag 바로 뒤에 위치
<caption> tag는 table 당 하나만 사용
table 제목은 기본적으로 가운데 정렬. 정렬 방식 변경은 css를 사용
table - 행(Row) 그룹 요소
table 행 그룹 요소는 table의 행들을 머리글, 바닥글, 하나 이상의 본체 항목으로 그룹핑
행 그룹 요소에는 머리글(<thead>), 본체항목(<tbody>), 바닥글(<tfoot>)요소가 있다.
각 행 그룹은 최소 하나 이상의 <tr>을 가져야함
table - 열 (Column) 그룹 요소
table 열 그룹 요소는 table 내에서 구조적인 분리를 가능하게 함
<colgroup> 요소는 명시적인 열 그룹을 만들며, <col> 요소는 열(column)을 묶어 그룹핑 함
<colgroup> 요소의 span 속성은 열 그룹에서 열의 개수를 정의
<col> 요소의 span 속성은 <col>에 의해 묶여진 열의 개수를 말함
table - 테두리(border)
cellsapcing은 table Cell과 Cell 사이의 공간을 의미
cellpadding은 Cell 외곽과 Cell 컨텐츠 사이 공간을 의미
HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고 CSS를 사용
table - 셀 병합
HTML tabled의 <td> 요소에는 셀(Cell)을 병합하기 위한 두개의 속성이 있음
colspan 속성은 두 개 이상의 열(Column)을 하나로 합치기 위해 사용
rowspan 속성은 두 개 이상의 행(Row)을 하나로 합치기 위해 사용
이미지 요소 - img
<img> tag를 사용하며 이미지를 삽입하기 위해 사용
src 속성은 이미지 경로를 지정하기 위해 사용(상대경로, URL 모두 가능)
height, width 속성은 이미지 사이즈를 지정하기 위해 사용
alt 속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정
<figure>는 설명 글을 붙여야 할 대상을 지정
<gifcaption> : 설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은 <figcaption>태그로 묶는다.
설명 글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어 파일이나 텍스트 단락이나 표
링크 요소 - Anchor
<a> tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 (하이퍼링크) 사용
tag를 서로 중첩해서 사용할 수 없다
href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정
target 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정
같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한번에 이동시킨다.
<tag id =”anchor name”>text or image</tag>
<a href=”#anchor name”>text or image<a>
링크 요소 - 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 속성은 프레임의 이름을 지정
'HTML' 카테고리의 다른 글
| HTML Semantic (0) | 2023.03.09 |
|---|---|
| HTML 공간 분할 태그 (0) | 2023.03.09 |
| HTML form control (0) | 2023.03.09 |
| HTML 기본 (0) | 2023.03.09 |
| HTML이란, HTML 태그 및 속성 (0) | 2023.02.23 |