[콘텐츠 구분]
예전에는 <div>만 가지고 만들 수 있었기 때문에 태그에 의미를 두지 않았지만 html5로 넘어오면서 의미를 갖는 태그가 많이 생김. 그래서 분명한 의미를 가지고 있는 태그에 의미에 맞게 적재적소에 쓰이는 것이 중요
<header>: 문서의 헤더를 설정(보통 로고, 제목, 검색 등을 포함)
<footer>: 문서의 푸터를 설정(보통 작성자, 저작권, 관련 문서 등을 포함)
<header>, <footer>는 후손이 될 수 없음
<main>: 문서의 주요 콘텐츠를 설정
IE 지원 불가, 한 문서에 하나의 <main> 요소만 포함 가능
<article>: 독립적으로 구분되거나 재사용 가능한 영역을 설정(매거진/신문 기사, 블로그 등)
일반적으로 <h1>~<h6>를 포함하여 식별, 작성일자와 시간을 <time>의 datetime 속성으로 작성
→ <h1>~<h2>는 전역 속성만 포함하며 문서의 목차를 만드는 것처럼 사용자 에이전에 사용될 수 있음
→ 제목의 폰트의 크기를 줄이기 위해 낮은 단계를 사용하는 것이 아니라 이때는 css에 font-size 이용
→ 첫 번째 단계의 제목은 한 페이지에 하나만 사용(추천 방법), <h1>부터 차례로 쓰면 됨
<section>: 문서의 일반적인 영역을 설정
일반적으로 <h1>~<h6>를 포함하여 식별
<aside>: 문서의 별도 콘텐츠를 설정(보통 광고나 기타 링크 등의 사이드바(Side bar)를 설정)
<nav>: 다른 페이지 링크를 제공하는 영역을 설정(Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정)
<address>: <body>, <article>, <footer> 등에서 연락처 정보(주소, ex.이메일, 전화번호)를 제공하기 위해 포함하여 사용.
<div>: 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정(Division, 꾸미는 목적으로 사용)
[문자 컨텐츠 구분]
<ol>, <ul>, <li>: 각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<li>)을 설정
Ordered List, Unordered List, List Item, 순서가 필요하거나(<ol>) 순서가 필요하지 않은(<ul>) 목록을 정의
<ol>과 <ul>은 기본값은 block
<ol>은 속성 start로 번호의 시작값을 지정 가능하고 type으로 매겨지는 번호의 유형 변경 가능
<ol>과 <ul>은 자식으로 <li>만 포함 가능, 정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있음
<li>는 단독으로 사용할 수 없으며, <ol>이나 <ul>에 자식으로 포함되어야 함
<dl>, <dt>, <dd>: 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정(Description List, Definition Details, Definition Term)
<dl>은 <dd>, <dt>만을 포함해야 함, 키(key)/값(value) 형태를 표시할 때 유용
스타일링에 한계가 있기 때문에 목록으로 대체해서 사용하기도 함
<p>: 하나의 문단을 설정(Paragraph)
일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함
<hr />: 문단의 분리(주제에 의한)를 위해 설정(Horizontal Rule)
대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야 함
테그는 박스형식이기 때문에 border: none을 이용해 없앤 후 border-top 혹은 border-bottom으로 원하는 두께 설정
<pre>: 서식이 미리 지정된 텍스트를 설정(Preformatted Text)
텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음, 기본적으로 Monospace 글꼴 계열로 표시됨
<blockquote>: 일반적인 인용문을 설정(Block Quotation)
'기초 > HTML l& CSS' 카테고리의 다른 글
| <7> HTML & CSS (0) | 2022.07.22 |
|---|---|
| <6> HTML & CSS (0) | 2022.07.19 |
| <4> HTML & CSS (0) | 2022.07.12 |
| <3> HTML & CSS (0) | 2022.07.10 |
| <2> HTML & CSS (0) | 2022.07.07 |
댓글