HTML Sections & Outlines
1. 구조적 마크업의 이해
구조적 마크업은 문서의 구조를 정의
표현적 마크업은 문서의 외형을 정의
구조적 마크업과 표현적 마크업의 혼용
오래된 HTML은 구조적 마크업과 표현적 마크업을 혼용해 사용
현재 웹 표준에서는 표현적 마크업을 HTML에서 퇴출
문서의 구조는 HTML을 사용, 문서의 표현은 CSS를 사용
표현적 마크업 사용의 문제점
표현적 요소의 사용은 접근성을 저해
더 높은 유지비용 발생
문서 크기 비대화
블록 레벨 요소와 인라인 레벨 요소
블록 레벨 요소
: 줄 바꿈이 일어나는 단락 요소인라인 레벨 요소
: 줄 바꿈이 일어나지 않는 행의 일부 요소
2. Section Elements in HTML5
HTML Navigational Element (
<nav>
)defines a section that contains navigation links that appear often on a site.
You can have primary and secondary menus, but you never nest, or put a
<nav>
element inside a<nav>
element.
HTML Article Element (
<article>
)defines a piece of self-contained content.
It does not refer to the main content alone and can be used for comments and widgets.
HTML Section Element (
<section>
)defines a section of a document to indicate a related grouping of semantic meaning.
Utilize the section element providing extra context from the parent element makes sense.
HTML Aside Element (
<aside>
)defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement.
It has its own outline, but doesn't belong to the main one.
Other Semantic HTML elements used in Sectioning
HTML Body Element (
<body>
)defines all the content of a document.
It contains all the content and HTML tags.
HTML Header Element (
<header>
)defines a page which typically contains the logo, title, and navigation.
The header can also be used in other semantic elements such as
<article>
or<section>
— or section header, containing perhaps the section's heading, author name, etc.<article>
,<section>
,<aside>
, and<nav>
can have their own<header>
.Despite its name, it is not necessarily positioned at the beginning of the page or section.
HTML Footer Element (
<footer>
)defines a page footer which typically contains the copyright, legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc.
<article>
,<section>
,<aside>
, and<nav>
can have their own<footer>
.Despite its name, it is not necessarily positioned at the end of the page or section.
3. HTML elements reference from MDN
Main root
Element | Description |
---|---|
The HTML |
Document metadata
Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information.
Element | Description |
---|---|
| The HTML |
| The HTML |
| The HTML External Resource Link element ( |
| The HTML |
| The HTML |
| The HTML Title element ( |
4. HTML 표 (Table)
HTML 표의 사용시 주의 점
표는 접근성이 떨어지므로 표 이외에 더 좋은 표현 방법이 있다면 표를 사용하지 않아야 한다.
표를 페이지 레이아웃에 사용하지 말아야 한다.
입력 서식을 나타낼 때도 되도록이면 표를 사용하지 말아야 한다.
HTML 표 작성
table
요소: HTML 표를 의미한다.
tr 요소: 테이블의 row를 나타낸다.
th 요소: 테이블 헤더셀을 나타낸다. 제목 셀에 사용한다
td 요소: 테이블의 셀(칸)을 의미한다.
셀 병합
가로셀 병합: colsapn 속성 사용
세로셀 병합: rowspan 속성 사용
표의 구조화 요소
접근성 강화와 데이터 분석을 위해 표를 구조화 한다
thead 요소
표의 제목으로 구성된 row의 집합
표에 두 개 이상의 thead가 정의 되어서는 안된다.
tbody 요소
표의 몸 부분으로 표의 내용이 들어간다
여러 개의 tbody설정 가능
tfoot 요소
표의 푸터로 구성된 row의 집합
위치와 상관없이 표 마지막에 나타난다.
표에 두 개 이상의 tfoot이 정의 되어서는 안된다
col 요소: 구조적으로 하나의 column을 대표한다. caption 요소의 뒤에 thead나 tbody의 앞에 설정한다. 표의 컬럼 갯수 만큼 col 요소를 사용한다.
colgroup 요소: col 요소의 그룹 구조에 따라 여러개의 colgroup으로 분리할 수 있다.
scope 속성
헤더셀의 영향력이 어느쪽으로 향하는지를 지정
scope의 값이 row 또는 col이면
헤더셀은row 또는 column에 제목
scope의 값이 rowgroup또는 colgroup이면 헤더셀은 row의 그룹(아래에 있는 여러 줄) 또는 col의 그룹(우측에 있는 여러 컬럼들)의 제목
caption 요소
표의 캡션(제목)을 나타낸다.
table 요소의 첫 번째 자식 요소로 가장 먼저 설정되어야 한다.
table이 figure 요소의 유일한 자식요소라면 caption 대신 figcaption요소로 캡션을 표시해야 한다.
5. HTML 시식 (Form)
form 요소
HTML 입력 서식을 의미한다
action 속성: 서식이 전송되는 서버 파일 URL
metho 속성: 폼이 전송되는 방식, get 또는 post 값을 가진다.
input 요소
다양한 타입을 가지는 입력 데이터 필드
Last updated