HTML의 요소 [HTML][요소][섹션]

구조적 마크업의 이해

[광고 누르면 오늘의 행운 상승!!]

• 구조적 마크업은 문서의 구조를 정의
• 표현적 마크업은 문서의 외형을 정의
• 구조적 마크업과 표현적 마크업의 혼용
• 오래된 HTML은 구조적 마크업과 표현적 마크업을 혼용해 사용
• 현재 웹 표준에서는 표현적 마크업을 HTML에서 퇴출
• 문서의 구조는 HTML을 사용, 문서의 표현은 CSS를 사용

표현적 마크업 사용의 문제점

• 표현적 마크업 사용의 문제점
• 표현적 요소의 사용은 접근성을 저해
• 더 높은 유지비용 발생
• 문서 크기 비대화

블록 레벨 요소와 인라인 레벨 요소

• 블록 레벨 요소: 줄 바꿈이 일어나는 단락 요소
• 인라인 레벨 요소: 줄 바꿈이 일어나지 않는 행의 일부 요소

HTML5의 섹션 요소

<section> : 보통 제목으로 시작하는 콘텐츠의 의미적 그룹

<nav> : 문서의 동일 페이지 또는 다른 페이지를 연결하는 네비게이션 링크로 구성되는 섹션

<aside> : 문서의 주요 콘텐츠와 별개의 영역 정의, 대체로 사이드바 형태

<header> : 페이지 또는 섹션의 머릿글 그룹, 제목, 소개, 네비게이션 등이 포함 섹션 요소가 아님

<footer>: 가장 가까운 조상 요소의 푸터, 섹션 요소가 아님

<h1> ~ <h6> :세션의 제목, 헤딩은 명시적 섹션을 생성

<hgroup> :h1~h6 요소들을 그룹 짓기 위해 사용, <hgroup>의 등급은 포함된 헤딩 요소의 가장높은 등급

<address> :가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보를 의미

그룹 콘텐츠 요소

<p> : 문단, p요소 보다 더 적합한 요소가 있을 때에는 해당 요소를 사용함

<blockquote> : 다른 소스로부터 가져온 인용 섹션 인용된 소스의 URL주소가 있다면 cite 속성으로 표시

<pre>: 형식화된 텍스트 블록을 표현

<hr> : 문단 레벨에서 주제의 분리, 마침 요소 없이 단독으로 사용

• 순서가 있는 목록 : 순서가 바뀌면 의미가 바뀌는 목록
  <ol> 요소로 정의
  <li> 요소가 목록 아이템을 정의

• 순서가 없는 목록 : 목록 아이템을 말머리 기호로 시작
  <ul> 요소로 정의
  <li> 요소가 목록 아이템을 정의

• 정의 목록: 사전식 정의를 위해 사용
  <dl> : 정의 목록 요소
  <dt> : 정의 목록 제목 요소
  <dd> :정의 목록 데이터(값) 요소

<figure> : 사진, 일러스트, 비디오 등을 표시

<figcaption> : figure요소 내용에 대한 캡션, <figure>요소 내부에서 사용

<div> :스타일 또는 스크립트 목적으로 콘텐츠를 분리하기 위해 사용

전역 속성

• 대부분의 요소에서 속성으로 사용 가능한 전역 속성
• id 속성은 HTML 코드 내에 유일한 식별자
• class 속성은 HTML 코드 내에 같은 값을 다수 가질 수 있음
• class 속성은 css 나 자바스크립트에서 HTML 코드 내 여러 요소에 동일한 스타일 또는 작동을 적용
• title 속성은 요소의 조언 정보를 나타내며 웹 브라우저에서 툴팁으로 표시

텍스트 관련 요소 : 인라인 레벨 요소

<a> : 하이퍼링크

1. href 속성으로 링크 경로를 지정
2. target속성은 어떤 윈도우에서 링크가 열릴지 결정
3. _self : 현재의 웹 브라우저 창에서 링크가 열림
4. _parent: 현재의 웹 브라우저 창의 부모 창이 있다면 그 부모 창에서 링크가 열림
5. _top: 최상위 웹 브라우저 창에서 링크가 열림
6. _blank : 새로운 웹 브라우저 창을 생성하고 링크가 열림

Ii, <em> : 내용을 강조

<strong> : 내용이 중요함을 나타냄

<q> : q 요소는 인용을 나타내는 인라인 요소

<cite>: 책, 수필, 시, 대본, 논문, 그림, 연극, 영화 등과 같은 작품의 제목을 언급하거나 참조 했을 때 사용

<abbr> : abbr 요소는 약어 및 두문자어를 나타냄 title 속성을 이용하여 두문자의 원형을 나타냄

<i> : 다른 언어 표시나 영문에서 이텔릭체로 표현하는 숙어인용, 분류학 등에 사용

<b> :b요소는 의미 있는 중요성을 부가하지 않고 눈에 띄게 하기 위해 사용

<sup>, <sub>
- sup 요소는 위첨자를 나타낸다.
- sub 요소는 아래첨자를 나타낸다.

<span> :인라인 레벨에서 스타일을 적용하거나 스크립트에서 사용하고자 콘텐츠를 분리하는 역할

<br> : 마침 요소 없이 사용되며 문단 분리가 아닌 단순 줄바꿈을 표시

<p> 요소 대용으로 사용하면 안됨

<img>

1. img 요소는 이미지를 의미.
2. img 요소는 마침 요소가 없이 단독으로 사용.
3. src 속성에 이미지의 경로를 지정.
4. alt 속성은 이미지를 대체하기 위한 텍스트. 반드시 사용.