08
20
스마트팩토리/HTML

Sections 요소, Main, Text Level, Grouping etc...

HTML 섹션(Sections) 요소들과 메인(Main) 요소

문서 상에서 body 태그는 그 안에 존재하는 모든 요소들의  root(=root section)가 될 수 있다. 이 body section은 각각 <header>와 <footer>를 가질 수 있다. 일반적으로 header 내에서는 로고, 내비게이션, 검색 등과 같은 것을 포함하게 되고 사용자가 보는 주요 콘텐츠 페이지의 경우는 <main>이라는 요소를 사용할 수 있다. 그리고 하단 영역에서는 <footer>가 들어올 수 있는데 내비게이션, 사이트에 대한 정보, 저작권 등의 내용을 넣을 수 있다. 내비게이션 역할은 <nav>(navigation section) 요소를 사용할 수 있다.

일반적으로 카테고리를 분류하려는 목적에 사용되는 <section>인 general section이 있으며, 그 안에서 블로그 등의 기사글, 신문에서의 기사글과 같은 것들을 <article> 태그(article section)로 사용할 수 있다. 그리고 보조적인 수단으로써 사용할 수 있는 <aside> 태그가 있고, 이 aside는 광고(배너)와 같은 내용이 들어올 수 있다.

 

섹션(Sections) 요소들

섹션 요소는 일반적인 컨테이너 요소(ex. 포토샵에서의 그룹핑과 같은 것)가 아니며, 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소로써 적합하다는 규칙이 있다. 일반적인 컨테이너 요소는 표현을 목적으로 그룹핑해 주는 목적(단순히 묶어주는 역할)으로 한다면 섹션 요소는 각 카테고리별 주제에 해당되는 것들이 섹션이 될 수 있다. 일반적인 컨테이너 요소로는 <div>, <span> 등이 있다.

 

section

<section> 태그는 문서, 애플리케이션의 일반적인 섹션이다. 이 컨텍스트의 섹션은 주제별로 그룹화된 콘텐츠로 예를 들어 소개, 뉴스 항목, 공지사항, 연락처 정보와 같은 내용을 그룹화하기 위한 섹션으로 사용하여 나눌 수 있다. 그리고 콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 section 요소 대신에 article 요소를 사용하는 것을 권장한다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <h1>How to Fish</h1>
    <section>
      <h2>Introduction</h2>
      <p>People have been catching fish for food since before recorded history…</p>
    </section>

    <section>
      <h2>Equipment</h2>
      <p>The first thing you’ll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you’re expecting to land…</p>
    </section>
  </body>
</html>

 

예제 실행 화면

 

article

<article> 태그는 문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션이다. 예를 들어 잡지, 신문, 논문, 에세이, 보고서, 블로그 등을 article 태그로 사용할 수 있다. 일반적인 규칙은 article 태그의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하며, 각 article 태그는 일반적으로 태그의 하위 항목으로 제목(h1 ~ h6 태그)을 포함시켜 식별해야 한다. 만약 article이 헤딩을 포함하고 있지 않다면 이 기사 내용이 무엇에 대한 것인지를 판별하기 힘들어진다. 그리고 general section 태그인 <section>은 <article>을 포함할 수 있으며 반대로 <article>이 <section> 태그를 포함할 수도 있다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <article class="forecast">
      <h1>Weather forecast for Seattle</h1>
      <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
      </article>
      <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
      </article>
      <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
      </article>
    </article>
  </body>
</html>

 

예제 실행 화면

 

aside

<aside> 태그는 메인 콘텐츠가 아닌 보조적인 콘텐츠, 다시 말해 웹 사이트의 사이드바에 해당하는 부 콘텐츠(메인 콘텐츠와 분리된) 섹션을 말한다. 주로 광고(배너) 등에 많이 사용된다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <h2>과메기</h2>
    <p>과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안 얼렸다 녹였다를 반복하여 반건조시킨 음식이다.</p>
    <aside>
      <h4>포항</h4>
      <p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며, 포항시 중심을 관통하는 형산강이 영일만에 유입되면서 
        넓은 충적평야를 형성하고 있다.</p>
    </aside>
  </body>
</html>

 

예제 실행 화면

 

nav

<nav> 태그는 내비게이션을 뜻하며 다른 페이지로 이동하는 링크 또는 사이트 내 탐색 링크를 포함하는 섹션 태그로 사용한다. nav 태그 내부에는 비순차 목록인 <ul> 태그를 사용한다. 그리고 사이트의 모든 링크를 nav에 포함할 필요는 없으며, 주로 사이트를 탐색하는 링크를 포함한다. 사이트 하단에 위치한 footer 요소로만 사용해도 크게 상관없다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <nav class="crumbs">
      <ol>
        <li class="crumb"><a href="bikes">Bikes</a></li>
        <li class="crumb"><a href="bikes/bmx">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
      </ol>
    </nav>
    <h1>Jump Bike 3000</h1>
    <p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>
  </body>
</html>

 

예제 실행 화면

 

header

<header> 태그는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는 데 사용한다. 하지만 article 내에서도 내용이 많다면 header 태그를 사용하여 묶어줄 수 있다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <article>
      <header>
        <h3>날씨 정보</h4>
        <h4>2월 19일</h4>
        <p>- 기상청 제공 -</p>
      </header>
      <p>서울 : 맑음</p>
      <p>대전 : 흐림</p>
      <p>부산 : 비</p>
    </article>
  </body>
</html>

 

예제 실행 화면

 

footer

<footer> 태그는 일반적으로 섹션의 저자, 링크 저작권 정보 등을 포함하는 데 사용한다. 그리고 footer가 반드시 하단에만 위치해야 할 필요가 없으며 상단으로 가야 할 필요성이 있다면 상단에 위치해도 무방하다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <footer>
      <p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
      <address>Contact webmaster for more information. 070-1234-5678</address>
    </footer>
  </body>
</html>

 

예제 실행 화면

 

main

<main> 태그는 문서 또는 애플리케이션 body 태그의 메인 콘텐츠에 해당한다. main 태그는 섹션 요소가 아니며, 보이는 태그가 2개 이상이면 안된다. 사용되지 않는 main 태그는 화면에서 감춤(hidden)으로 처리해야 한다. section, article, aside, nav 태그는 main 태그를 자식으로 포함할 수 없지만 반대로 main 태그는 섹션 태그들을 포함할 수 있다. main 내부에는 header, footer 태그를 직접적으로 포함하지 않는다.

 

ex)

<!DOCTYPE html>
<html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <main>
      <h1>바나나</h1>
      <p>바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를 총칭한다.</p>
      <article>
        <h2>다이어트 식품</h2>
        <p>바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의 열량을 갖는다.</p>
      </article>
      <article>
        <h2>다양한 섭취법</h2>
        <p>바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한 요리에 응용된다.</p>
      </article>
    </main>
  </body>
</html>

 

예제 실행 화면

 

컨테이너(Containers) 태그들

컨테이너 태그는 의미를 가지지 않는 일반적으로 시각적 표현으로써 그룹핑에 목적을 두고 감싸주는 태그를 말한다. 그렇기 때문에 이 태그들은 적절한 시멘틱 태그가 없을 때 사용해야 한다.

  • <div> : Division 태그, 블록화된 영역을 나누기 위해 사용한다.
  • <span> : 스팬(span) 태그는 인라인(inline) 컨테이너로 인라인 요소들(a, strong, em, b, i 등)을 감쌀 때 사용된다. 다시 말해, 짧은 영역을 뜻하는 단어로 인라인 태그 간 디자인 표현을 위해 주로 사용한다. 블록 태그들(h1 ~ h6, p, blockquote, section 등)을 감쌀 수 없다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <div style="background-color:red">첫번째 영역</div>
    <div style="width:100px; height:100px; background-color:#CF0">두번째 영역</div>
    <div style="width:50px; height:50px; border:1px solid black; background-color:yellow">세번째 영역</div>
    <div style="width:100px; height:50px; border:3px solid black; float:right">네번째 영역</div>
    <div style="width:30; height:30px; background-color:green; float:left; margin:30px;">다섯번째 영역</div>
  </body>
</html>

 

예제 실행 화면

 

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <!-- 크기와 배경색 지정 -->
    <span style ="display:block;width:100px;height:50px;background:yellow">애국가</span>
	
    <!-- 글자의 색상과 타입 지정 -->
    <p>동해물과 <span style="color:blue; font-weight:bold">백두산이 </span>마르고 닳도록 <span style="color:red;font-style:italic">하나님이 보우하사</span> 우리나라 만세<br>
	
    <!-- margin, padding, 테두리색 지정 -->
    <span style ="display:inline-block; margin:10px; padding:5px; border:dotted 5px blue; color:blue; font-weight:bold; background:pink;">무궁화 삼천리 화려강산</span> <br>
	
    <!-- span태그의 css지정 -->
    <span class="box">대한사람 대한으로 길이 보전하세</span>
  </body>
</html>

 

예제 실행 화면

 

텍스트 레벨(Text Level) 태그들

텍스트 레벨에서 사용되는 HTML 태그에는 다음과 같은 것들이 있다.

  • <sup> : 윗첨자 태그(superscript text), 다른 글자 오른쪽 위에 놓이는 작은 글자, 약어 또는 각주를 나타낼 때 사용
  • <sub> : 아래첨자 태그(subscript text), 다른 글자 오른쪽에 놓이는 작은 글자로 대부분 화학식이나 수학식에 사용
  • <abbr> : 축약 태그(Abbreviation)
  • <s> : 더 이상 관련이 없거나 더 이상 정확하지 않은 태그(strikethrough)
  • <mark> : 일반적으로 사용자가 검색을 해서 나타나는 화면단에서의 검색 키워드를 시각적으로 하이라이팅을 하여 표시해주는 경우, 관련 참조 목적의 하이라이트 된 글자 태그
  • <time> : 기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 태그
  • <small> : 저작권, 법적 텍스트, 주석 및 작은 글씨 태그

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    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>
  </body>
</html>

 

예제 실행 화면

 

그룹핑(Grouping) 태그 중 address & pre

grouping content는 무엇인가를 감싸는 경우에 사용된다.

  • <address> : 사람(들), 조직(기업)에 대한 정보를 제공하고자 하는 경우에 사용, 물리적인 주소, digital location, contact information(연락처 정보)을 제공할 때 사용
  • <pre> : 지정된 텍스트 서식 보존 요소(pre-formatted text, preserved text) 코드의 공백이나 줄 바꿈 등의 공백, 여백 등을 보존하도록 해주는 태그, 이메일, 빈 줄이 표시된 단락, 글 머리표가 붙은 줄로 표시된 목록 등에 사용, 컴퓨터 코드(언어) 표시 목적으로 사용, ASCII 아트 표시, 컴퓨터 코드, 출력, 키보드 블록을 나타내기 위해 pre 태그는 code, samp, kbd 태그와 함께 사용 가능하다.

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <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>
  </body>
</html>

 

예제 실행 화면

 

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <pre>
    동해물과 백두산이 마르고닳도록
    하느님이 보우하사 길이 보우하세
    무궁화 삼천리 화려강산
    대한사람 대한으로 길이보전하세
    </pre>
  </body>
</html>

 

예제 실행 화면

 

임베디드(Embedded) 태그들

HTML 문서에 끼워 넣는(embedded) 이미지, 비디오, 오디오, 웹사이트, 이미지맵, SVG 벡터 그래픽 같은 콘텐츠 태그다.

 

picture

<picture> 태그는 다양한 스크린 환경(스마폰, 데스크탑, TV 등)에 맞는 이미지를 화면에 적절하게 표시해 주기 위해 사용한다. 이 태그를 사용할 때 이미지는 1개 이상의 이미지가 필요하고 picture 자식으로 <source> 태그를 필요(0개 이상)에 따라 사용할 수 있다. 구형 브라우저에서는 img를 보여주게 되고 모던 브라우저에서는 source(다중 미디어 리소스 지정 태그)를 파악하여 보여주게 된다.

 

ex)

<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <picture>
      <!-- 최소 폭이 1000px 인경우 boss.png 이미지를 띄움 -->
      <source media="(min-width: 1000px)" srcset="boss.png">
      <!-- 최소 폭이 600px 인경우 graph.png 이미지를 띄움 -->
      <source media="(min-width: 600px)" srcset="graph.png">
      <!-- 그 외인경우 money.png 이미지를 띄움 -->
      <img src="money.png" alt="Money">
    </picture>
  </body>
</html>

 

예제 실행 화면

 

cf. MIME(Multipurpose Internet Mail Extensions)

브라우저가 인식할 수 없는 확장자라면 MIME(마임타입)을 정의한다. MIME는 파일 변환을 뜻하며 이메일과 함께 동봉할 파일을 텍스트 문자로 전환해서 이메일 시스템을 통해 전달하기 위해 개발되었다. 현재는 웹을 통해서 여러 형태의 파일을 전달하는데 쓰이고 있다.

 

Video

<video> 태그는 동영상 콘텐츠를 포함하기 위해서 사용하며, src 속성이나 <source> 태그를 이용해 여러 개의 동영상 소스 중 하나를 표시하도록 할 수 있다. video 태그를 이용할 때 동영상을 보기 전에 포스터를 보여주고 싶다면 poster="posterimage.jpg"와 같이 정의해 줄 수 있으며, 구형 브라우저 사용자를 위해 가이드해줄 수도 있다.

  • src : 비디오 파일 경로
  • poster : 포스터 이미지 경로
  • preload : auto(기본값), 브라우저를 미리 읽어와서 사용자 경험 향상(메타데이터/ 비디오 다운로드) 시키기 위한 설정 [none, metadata, auto]
  • controls : 재생 컨트롤 표시 설정
  • autoplay : 자동 재생 설정
  • loop : 반복 설정
  • muted : 음소거 설정

audio

<audio> 태그도 vedio 태그와 유사하게 사용한다. 이 audio 태그도 src 속성이나 <source> 태그를 이용해 여러개의 동영상 소스를 표시할 수 있다.

  • src : 오디오 파일 경로
  • volume : 볼륨 조절(0,0 ~ 1,0)
  • muted : 음소거 설정
  • preload : auto(기본값), 브라우저를 미리 읽어와서 사용자 경험 향상(메타데이터/ 비디오 다운로드) 시키기 위한 설정 [none, metadata, auto]
  • controls : 재생 컨트롤 표시 설정
  • autoplay : 자동 재생 설정
  • loop : 반복 설정

track

<track> 태그는 비디오 또는 오디오 재생 시에 자막을 표시하도록 해준다. .vtt는 video text track의 약어이며 트랙을 설정할 때 속성 값으로 종류인 subtitle(자막), 인코딩 언어를 설정(ko, en) 할 수 있으며, 플레이어의 우측 하단에 표시될 레이블 값을 설정할 수 있다. 기본값으로 보이게 하고 싶은 것이 있다면 default 속성 값을 사용할 수 있다. .vtt 파일 작성 시에는 WebVTT(자막 파일)라고 상단에 적어주고 각각의 인덱스를 지정하고 시간과 시간 사이에 -->로 표시해준다. 그리고 그다음에 자막을 넣을 수 있다.

 

iframe(아이프레임)

iframe 태그는 인라인 프레임(Inline Frame)의 약어이며, 다른 HTML 페이지를 포함시켜 화면에 표시하도록 해준다. 아이프레임은 페이지 안의 페이지라고 볼 수 있으며, 페이지 내에 다른 콘텐츠를 삽입하는 경우에 많이 사용된다. 그리고 타 도메인(다른 서비스 페이지)의 경우 그 디자인을 커스텀할 수 없으나(보안상) 만약 같은 도메인 내에서는 가능하다.

  • src : 프레임 소스 설정
  • width : 프레임 너비 설정
  • height : 프레임 높이 설정
  • allowfullscreen : 프레임 전체화면 설정
<!DOCTYPE html>
  <html>
  <head>
    <mata charset="EUC-KR">
    <title>Insert title here</title>
  </head>
  <body>
    <iframe width="600" height="300" src="http://www.daum.net" name="test" id="test" frameborder="1" scrolling="yes" align="left">
    이브라우저는 iframe을 지원하지 않습니다.</iframe>
    <p><a href="http://www.tistory.com" target="test">티스토리 바로가기</a></p>
  </body>
</html>

 

예제 실행 화면

 

map(image Map)

이 <map> 태그는 이미지지 맵(클릭 가능한 링크 영역)을 정의하기 위해 <area>와 함께 사용되는 태그다. <area>는 이미지의 핫스팟 지역 정의와 하이퍼링크를 설정할 수 있으며 오직 map 내부에서만 사용 가능하다. usemap 속성 값으로 하이퍼링크와 유사한 해쉬값을 이용하여 name 값과 맵핑하여 설정한다.

  • shape : 핫스팟 모양을 설정
  • coords : 모양의 좌표 값을 설정
  • href : 하이퍼링크 주소 설정
  • target : 새 창(탭) 열림 설정
  • alt : 대체 텍스트 설정
  • hreflang : 연결된 페이지의 언어 속성 설정

 

저작자표시

'스마트팩토리 > HTML' 카테고리의 다른 글

meta Tag  (0) 2022.10.20
Interactive, User Interaction, Metadata  (0) 2020.09.01
Tables, 폼(양식, Forms) 구성 요소  (0) 2020.08.21
HTML Element  (0) 2020.08.19
HTML(Hyper Text Markup Language)  (3) 2020.08.19
COMMENT
 

티스토리툴바