html 에서 자주 사용되는 요소와 그 특성에 대해 알아보도록 하겠습니다.
HTML 섹션(Sections) 요소들 & 메인(Main) 요소
문서 또는 사이트, 애플리케이션의 각 섹션, 메인 영역을 구조화하는 방법에 대해 알아보겠습니다.
문서 상에서 body 요소는 그 안에 존재하는 모든 요소들의 root(=root section) 가 될 수 있습니다.
root section 이라고 부르는 이유는 이 body 안에 존재하는 모든 요소들에 대해 뿌리가 되기 때문입니다.
그리고 이 body section 은 각각 <header> 와 <footer> 를 가질 수 있습니다.
일반적으로 header 내에서는 로고, 내비게이션, 검색 등과 같은 것을 포함하게 되고 사용자가 보는 주요 콘텐츠 페이지의 경우는 <main> 이라는 요소를 사용할 수 있습니다.
그리고 하단 영역에서는 <footer> 가 들어올 수 있는데 내비게이션, 사이트에 대한 정보, 저작권 등의 내용을 넣을 수 있습니다.
내비게이션 역할은 <nav>(navigation section) 요소를 사용할 수 있습니다.
일반적으로 카테고리를 분류하려는 목적에서 사용되는 <section> 인 general section 이 있으며, 그 안에서 블로그 등의 기사글, 신문에서의 기사글과 같은 것들을
<article> 요소(article section)로 사용할 수 있습니다.
그리고 보조적인 수단으로써 사용할 수 있는 <aside> 요소가 있고, 이 aside 는 광고(배너)와 같은 내용이 들어올 수 있습니다.
섹션(Sections) 요소들
섹션 요소는 일반적인 컨테이너 요소(ex. 포토샵에서의 그룹핑과 같은 것)가 아니며, 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소로써 적합하다는 규칙이 있습니다.
일반적인 컨테이너 요소는 표현을 목적으로 그룹핑해 주는 목적(단순히 묶어주는 역할)으로 한다면 섹션 요소는 각 카테고리별 주제에 해당되는 것들이 섹션이 될 수 있습니다.
일반적인 컨테이너 요소로는 <div>, <span> 등이 있습니다.
section
<section> 요소는 문서, 애플리케이션의 일반적인 섹션을 말합니다.
이 컨텍스트의 섹션은 주제별로 그룹화된 콘텐츠로 예를 들어 소개(introduction), 뉴스 항목(news item), 공지 사항(notification), 연락처 정보(contact information) 와 같은 내용을 그룹화 하기 위한
섹션으로 사용하여 나눌 수 있습니다.
그리고 콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 section 요소 대신에 article 요소를 사용하는 것을 권장합니다.
article
<article> 요소는 문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션을 말합니다.
예를 들어 잡지, 신문, 논문, 에세이, 보고서, 블로그, 기타 소설 미디어 등을 article 요소로 사용할 수 있습니다.
일반적인 규칙은 article 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하며, 각 article 요소는 일반적으로 요소의 하위 항목으로 제목(h1 ~ h6 요소)을 포함시켜 식별해야 합니다.
만약 article 이 헤딩을 포함하고 있지 않다면 이 기사 내용이 무엇에 대한 것인지를 판별하기 힘들어 지게 됩니다.
그리고 general section 요소인 <section> 은 <article> 을 포함할 수 있으며 반대로 <article> 이 <section> 요소를 포함할 수도 있습니다.
섹션과 헤딩
섹션(Sections) 요소들은 일반적으로 헤딩(h1 ~ h6) 요소를 가질 수 있습니다.
그리고 이 헤딩 요소는 섹션의 제목에 해당되게 됩니다.
aside
<aside> 요소는 메인 콘텐츠가 아닌 보조적인 콘텐츠, 다시 말해 웹 사이트의 사이드바에 해당되는 부 콘텐츠(메인 콘텐츠와 분리된) 섹션을 말합니다.
주로 광고(배너) 등이 많이 사용됩니다.
nav
<nav> 요소는 내비게이션을 뜻하며 다른 페이지로 이동하는 링크 또는 사이트 내 탐색 링크를 포함하는 섹션 요소로 사용합니다.
이 요소는 내용을 쉽게 이해할 수 있도록 nav 요소 내부에는 비순차 목록인 <ul> 요소를 사용합니다.
그리고 사이트의 모든 링크를 nav 에 포함할 필요는 없으며, 주로 사이트를 탐색하는 링크를 포함합니다.
사이트 하단에 위치한 링크는 footer 요소로만 사용해도 크게 상관이 없습니다.
header
<header> 요소는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용합니다.
하지만 article 내에서도 내용이 많다면 header 요소를 사용하여 묶어줄 수 있습니다.
footer
<footer> 요소는 일반적으로 섹션의 저자, 링크, 저작권 정보(copyright) 등을 포함하는데 사용합니다.
그리고 footer 가 반드시 하단에만 위치해야할 필요가 없으며 상단으로 가야할 필요성이 있다면 상단에 위치해도 무방합니다.
main
<main> 요소는 문서 또는 애플리케이션 body 요소의 메인 콘텐츠에 해당합니다.
main 요소는 섹션 요소가 아니며, 보이는 요소가 2개 이상이면 안됩니다.
사용되지 않는 main 요소는 화면에서 감춤(hidden)으로 처리해야 합니다.
section, article, aside, nav 요소는 main 요소를 자식으로 포함할 수 없지만 반대로 main 요소는 섹션 요소들을 포함할 수 있습니다.
main 내부에는 header, footer 요소를 직접적으로 포함하지 않습니다.
<main><section></section></main>
<main>
<section>
<header></header>
</section>
</main>
<main hidden></main>
<main hidden></main><section><main></main></section>
<main>
<header></header>
<section></section>
<footer></footer>
</main>컨테이너(Containers) 요소들
컨테이너 요소는 의미를 가지지 않는 일반적으로 시각적 표현으로써 그룹핑에 목적을 두고 감싸주는 요소를 말합니다.
그렇기 때문에 이 요소들은 적절한 시멘틱 요소가 없을 때 사용해야 합니다.
<div>- Division 요소, 블록화된 영역을 나누기 위해 사용합니다.<span>- 스팬(span) 요소는 인라인(inline) 컨테이너로 인라인 요소들(a, strong, em, b, i 등)을 감쌀 때 사용됩니다.
다시 말해, 짧은 영역을 뜻하는 단어로 인라인 요소간 디자인 표현을 위해 주로 사용합니다.
블럭 요소들(h1 ~ h6, p, blockquote, section 등)을 감쌀 수 없습니다.
텍스트 레벨(Text Level) 요소들
텍스트 레벨에서 사용되는 HTML 요소들에는 다음과 같은 요소들이 있습니다.
<sup>- 윗첨자 요소<sub>- 아래첨자 요소<abbr>- 축약 요소<s>- 더 이상 관련이 없거나 더 이상 정확하지 않은 요소<mark>- 관련 참조 목적의 하이라이트된 글자 요소<time>- 시간 요소<small>- 저작권, 법적 텍스트, 주석 및 작은 글씨 요소
<sup> 요소(superscript text)는 위첨자로 다른 글자의 오른쪽 위에 놓이는 작은 글자로, 약어 또는 각주를 나태낼 때 사용할 수 있습니다.
<sub> 요소(subscript text)는 아래첨자로 기준선의 아래, 다른 글자의 오른쪽에 놓이는 작은 글자로 대부분 화화식이나 수학식에 사용됩니다.
그리고 <mark> 요소는 일반적으로 사용자가 검색을 해서 나타나는 화면단에서의 검색 키워드를 시각적으로 하이라이팅을 하여 표시해 주는 경우에 사용할 수 있습니다.
다시 말해, 관련 참조 목적의 하이라이트된 글자 요소에 사용하는 것입니다.
<abbr> 는 Abbreviation 의 약어로 축약어를 표시할 때 사용합니다. 예를 들어 인싸(인사이더),아싸(아웃사이더),TMI(Too Much Information) 라는 용어를 모르는 사람도 인지할 수 있도록
정보를 제공해 주어야 할 때 사용할 수 있습니다.
<s> 요소(strikethrough)는 쇼핑몰 같은 곳에서 가격 정보를 할인된 가격으로 표시하고자 할 때 정가에 실선으로 가격 정보를 가로지르게 표현하는데 이럴때 사용할 수 있는 요소입니다.
국내에서는 이 요소를 제대로 활용하는 사례를 찾아보기 쉽지 않습니다. 기술 사양에서 명시적으로 권장하고 있지만 대개 이러한 크로스된 실선 모양을 CSS 로 처리하고 있는 경우가 많은데 옳은 방법은 아닙니다.
<time> 요소는 기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 요소입니다.
H<sub>2</sub>SO<sub>4</sub>
<!-- 위와 같이 마크업을 하면 어떤 내용인지 파악하기가 힘들기 때문에 정의(define) 용어로 아래와 같이 감싸줄 필요가 있음 -->
<dfn id="sulfuric-acid">H<sub>2</sub>SO<sub>4</sub></dfn>
<blockquote cite="https://ko.wikipedia.org/wiki/%ED%99%A9%EC%82%B0">
<p>
<a href="#sulfuric-acid">황산은</a> 강산성의 액체 화합물이다.
중국과 일본에서는 유황(硫黃)의 산이라 하여 硫酸이라고 하며, 북한에서도 류산이라고 한다.
우리나라에서도 유산이라는 말을 쓰기도 하지만 젖산을 뜻하는 유산(乳酸, 락트산)과 착각할 수 있으므로 황산을 사용한다.
물을 제외하고는 가장 많이 제조되며, 많은 곳에 사용된다.
2001년의 세계 황산 생산량은 1억 65백만 톤에 달한다. 비료 제조, 광석 처리, 폐수 처리, 석유 정제 등에 사용된다.
</p>
<cite>위키백과에서</cite>
</blockquote>
<p>이것은 각주<sup><a id="footnote-01" href="#footnote-02">[1]</a></sup>입니다.</p>
<abbr title="인사이더" style="cursor:help;">인싸</abbr>
<time datetime="2018-11-23T14:20">2010.11 23. 14:20</time>
<p>
<span class="a11y-hidden">원래 가격</span><s>19,900</s>원
<em>50%</em><span class="a11y-hidden">할인</span> 9,950원
</p>
<p><time datetime="2018-11-23">오늘마감</time> 7개 남음</p>
<!--
화면단에서의 오늘마감이라는 것은 사람들은 이해할 수 있지만
검색봇, 브라우저의 기계적인 부분에서 어떤 날짜인지 정확히 알 수 없기 때문에
time 요소를 사용하여 기계가 읽을 수 있는 텍스트를 제공해 줄수 있음.
-->
<!-- 수평선 : horizontal rule
마크업 구조상 구분을 짓기 위해 사용하며 정보의 의미를 담고 있는 것이 아니라
CSS가 없는 환경에서는 정보들을 구분하기가 어렵기 때문에 정보 구분을 위해서 사용하는게 일반적.
-->
<hr>
<p id="footnote-02"><a href="#footnote-01">각주</a>에 대한 설명이 블라블라블라....블라블라블라입니다....</p>Related Info
그룹핑(Grouping) 요소 중 address & pre
grouping content 는 무엇인가를 감싸는 경우에 사용되는데 이 중에 address, pre 요소에 대해 알아보겠습니다.
<address>: 사람(들), 조직(기업)에 대한 정보를 제공하고자 하는 경우에 사용
즉, 물리적인 주소, digital location, contact information(연락처 정보)을 제공할 때 사용<pre>: 지정된 텍스트 서식 보존 요소(pre-formatted text, preserved text)
코드의 공백이나 줄바꿈 등의 공백,여백 등을 보존하도록 해주는 요소입니다.- 이메일, 빈 줄이 표시된 단락, 글 머리표가 붙은 줄로 표시된 목록 등에 사용
- 컴퓨터 코드(언어) 표시 목적으로 사용
- ASCII 아트 표시
code,samp,kbd요소와 함께 사용 가능합니다.
<address>
서울특별시 용산구 한강대로 12길 3 대표전화 <a href="tel:+82262566500">02-6256-6500</a> <br>
대표 : 김재희, 사업자 번호 <a href="#사업자 번호 조회 가능한 주소">123 45 6789</a> <br>
<small>Copyright©2018 DIW Co., Ltd. All rights reserved.</small>
</address>
<!-- 아스키(ASCII) 코드 -->
____ ∧ ∧
|＼ /(´～`)＼
| |￣￣￣￣￣|
| |＝みかん＝|
＼ |＿＿＿＿＿|
Related Info
임베디드(Embeded) 요소들
HTML 문서에 끼워 넣는(embedded) 이미지, 비디오, 오디오, 웹사이트, 이미지맵, SVG 벡터 그래픽 같은 콘텐츠 요소에 대해 알아보겠습니다.
picture
<picture> 요소는 다양한 스크린 환경(스마트폰,스마트 패드,데스크탑,TV 등)에 맞는 이미지를 화면에 적절하게 표시해 주기 위해 사용합니다.
이 요소를 사용할 때 이미지는 1개 이상의 이미지가 필요하고 picture 자식으로 <source> 요소를 필요(0개 이상)에 따라 사용할 수 있습니다.
source 요소를 사용할 수 없을 경우에는 <img> 요소가 화면에 표시하게 됩니다.
다시 말해, 구형 브라우저에서는 img 를 보여주게 되고 모던 브라우저에서는 source(다중 미디어 리소스 지정 요소) 를 파악하여 보여주게 됩니다.
<!-- media 속성의 사용 예 -->
<picture>
<source srcset="pen.png" media="(min-width: 600px)">
<img src="pen-narrow.png" alt="Pen">
</picture>
<!-- type 속성의 사용 예 -->
<picture>
<source srcset="pen.svg" type="image/svg+xml">
<img src="pen-narrow.png" alt="Pen">
</picture>
브라우저가 인식할 수 없는 확장자라면 MIME(마임타입)을 정의하여 주도록 합니다.
미디어 타입(media type), MIME 타입(MIME type), 콘텐츠 타입(content type)[1]은 인터넷에 전달되는 파일 포맷과 포맷 콘텐츠를 위한 2 부분의 식별자이다.
video 요소
<video> 요소는 동영상 콘텐츠를 포함하기 위해서 사용하며,
src 속성이나 <source> 요소를 이용해 여러 개의 동영상 소스 중 하나를 표시하도록 할 수 있습니다.
<video src="videofile.mp4" poster="posterimage.jpg">
HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
<a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
</video>
<!-- picture, audio, video 요소의 다중 미디어 리소스를 지정하기 위해 사용하는 예시 -->
<video src="videofile.mp4" poster="posterimage.jpg" controls>
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogg" type="video/ogg">
<source src="videofile.mov" type="video/quicktime">
HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
<a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
</video>
video 요소를 이용할 때 동영상을 보기 전에 포스터를 보여주고 싶다면 poster="posterimage.jpg" 와 같이 정의해 줄 수 있으며, 구형 브라우저 사용자를 위해 가이드를 해줄 수도 있습니다.
video 속성값에는 다음과 같은 것이 있습니다.
- src - 비디오 파일 경로
- poster - 포스터 이미지 경로
- preload - auto(기본값), 브라우저를 미리 읽어와서 사용자 경험 향상(메타데이터 / 비디오 다운로드) 시키기 위한 설정 [none, metadata, auto]
- controls - 재생 컨트롤 표시 설정
- autoplay - 자동 재생 설정
- loop - 반복 설정
- muted - 음소거 설정
audio 요소
<audio> 요소도 vedio 요소와 유사하게 사용합니다.
이 audio 요소도 src속성이나 <source> 요소을 이용해 여러개의 동영상 소스를 표시할 수 있습니다.
<audio src="audiofile.mp3">
<p>
HTML5 <code>audio</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
<a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a>로 업데이트 하세요.
</p>
</audio>
- src - 오디오 파일 경로
- volume - 볼륨 조절(0.0 ~ 1.0)
- muted - 음소거 설정
- preload - auto(기본값), 브라우저를 미리 읽어와서 사용자 경험 향상(메타데이터 / 비디오 다운로드) 시키기 위한 설정 [none, metadata, auto]
- controls - 재생 컨트롤 표시 설정
- autoplay - 자동 재생 설정
- loop - 반복 설정
현재는 .mp3, .mp4 브라우저는 모두 호환이 되기 때문에 큰 문제가 없지만 불과 얼마 전까지만 하더라도 video 와 같은 경우에는
.ogg, .webm 와 같은 브라우저에 맞는 포맷을 사용해야 올바르게 동작했었습니다.
그리고 Chrome 브라우저는 2018년 4월부터 음소거가 설정되지 않은 비디오/오디오 콘텐츠의 자동 재생을 허용하지 않습니다.
비디오/오디오 콘텐츠의 자동 재생은 접근성 문제를 야기합니다.
다시 말해, 자동재생을 허용한다면 이는 접근성 4대 원칙 중, "인식의 용이성" 1원칙의 명료성 지침의 위반에 해당합니다.
이러한 자동재생을 막은 처사는 다른 브라우저에 비해 모범을 보이려 한 것으로 평가됩니다.
단, 소리를 자동 재생하지 않으면 Chrome 브라우저에서도 자동재생 시킬 수 있습니다.
접근성 위반인 명료성은 바로 시각 장애인이 사용하는 스크린 리더와 자동재생되는 비디오/오디오 콘텐츠의 소리가 섞이는 것을 말하기 때문입니다.
track 요소
<track> 이라는 요소는 비디오 또는 오디오 재생 시에 자막을 표시하도록 해주는 요소입니다.
<!-- 사용 예시 -->
<video src="videofile.mp4" poster="posterimage.jpg">
<track kind="subtitles" src="videofile.ko.vtt" srclang="ko" label="한국어" default>
<track kind="subtitles" src="videofile.en.vtt" srclang="en" label="English">
</video>
<audio src="audiofile.mp3">
<track kind="subtitles" src="audiofile.ko.vtt" srclang="ko" label="한국어">
<track kind="subtitles" src="audiofile.en.vtt" srclang="en" label="English">
</audio>
.vtt 는 video text track 의 약어이며 트랙을 설정할 때 속성값으로 종류인 subtitle(자막), 인코딩 언어를 설정(ko, en) 할 수 있으며, 플레이어의 우측 하단에 표시될 레이블값을 설정할 수 있습니다.
기본값으로 보여지게 하고 싶은 것이 있다면 default 속성값을 사용할 수 있습니다.
.vtt 파일 작성 시에는 WebVTT(자막 파일) 라고 상단에 적어주고 각각의 인덱스를 지정하고 시간과 시간 사이에 --> 로 표시해 줍니다. 그리고 그 다음에 자막을 넣어줄 수 있습니다.
iframe(아이프레임) 요소
<iframe> 요소는 인라인 프레임(Inline Frame)의 약어이며, 다른 HTML 페이지를 포함하여 화면에 표시하도록 해주는 요소입니다.
즉, 아이프레임은 페이지 안의 페이지라고 볼 수 있으며, 페이지 내에 다른 콘텐츠를 삽입하는 경우에 많이 사용합니다.
그리고 타 도메인(다른 서비스 페이지)의 경우 그 디자인을 커스텀할 수 없으나(보안상) 만약 같은 도메인 내에서는 가능합니다.
아이프레임의 속성값은 다음과 같습니다.
- src - 프레임 소스 설정
- width - 프레임 너비 설정
- height - 프레임 높이 설정
- allowfullscreen - 프레임 전체화면 설정
<!-- 사용 예시 -->
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/Il-an3K9pjg"
frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.1739210737333!2d126.97054991571503!3d37.55096597980084!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b581daaaaaaab%3A0xd16346279906acfb!2zQ0rsmKzrpqzruIzrhKTtirjsm43siqQo7KO8KQ!5e0!3m2!1sko!2skr!4v1543190811185"
width="600" height="450"
frameborder="0" style="border:0" allowfullscreen>
</iframe>
map(image Map) 요소
이 <map> 은이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 <area> 와 함께 사용되는 요소입니다.
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">
<area shape="circle" coords="124,58,8" alt="Venus" target="_blank" hreflang="en-GB" href="venus.html">
</map>
<area> 는 이미지의 핫스팟 지역 정의와 하이퍼링크를 설정할 수 있으며 오직 map 내부에서만 사용 가능합니다.
usemap 속성값으로 하이퍼링크와 유사한 해쉬값을 이용하여 name 값과 맵핑하여 설정합니다.
area 에서 사용할 수 있는 속성값은 다음과 같습니다.
- shape - 핫스팟 모양을 설정
- coords - 모양의 좌표 값을 설정
- href - 하이퍼링크 주소 설정
- target - 새 창(탭) 열림 설정
- alt - 대체 텍스트 설정
- hreflang - 연결된 페이지의 언어 속성 설정
'HTMLㆍCSS 기초 강좌 > HTML' 카테고리의 다른 글
| #5 Interactive, User Interaction, Metadata (0) | 2018.12.26 |
|---|---|
| #4 Tables, 폼(양식,Forms) 구성 요소들 (0) | 2018.12.26 |
| #2 HTML Element (1) | 2018.12.20 |
| #1 HTML 이란 무엇인가? (5) | 2018.12.20 |
