1-1)HTML의 정의

HTML ?

Hyper Text Markup Language약어로 웹 페이지를 위한 마크업 언어.

HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어

.html 확장자 포맷을 가지고 있습니다.

 

시멘틱 마크업(Semantic Markup)

Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 말 그대로 평범하고 오래된 의미론적인
HTML이라는 뜻입니다.

 

HTML 문서 작성을 위한 기본 문법

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성됩니다.
문서의 타이틀(title) 은 웹 페이지의 제목으로 브라우저 탭에 표시됩니다.

 

HTML 문서 작성을 위한 DTD

HTML 을 작성하려면 문서타입이라는 것이 반드시 필요합니다.
문서 타입을 DTD 라고 하며, DTD(DOCTYPE or Document type Definition)는 DTD는 HTML 문서의 반드시 최상 위에 위치해야 합니다.

DOCTYPE 의 버전별선언(HTML5, HTML4, XHTML)에 따라서 HTML 은 지원하는 태그가 조금씩 다릅니다.
그리고 DOCTYPE 태그가 아니라 선언문으로서의 역할이기 때문에 HTML문서 최상위에 위치하는 것입니다.
또한 DOCTYPE 종료하는 태그가 없는 것이 특징이며 <!DOCTYPE>은 HTML 문서의 구성 요소는 아닙니다.

<!DOCTYPE html> <html lang="ko">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML 4.01 문서타입</title>
<link rel="stylesheet" type="text/css" href="css/service_name.css">
</head>
<body>

</body>
/html>

위와 같이 최상단에 문서 타입 지정을 지정하고, 여기서 PUBLIC 은 DTD가 공공(모든 사용자)에게 공개되어 있으며 문서타입에 따른 W3C 표준안의 URI 을 작성하게 됩니다.

그리고 URI 를 생략할 경우에도 페이지는 쿼크 모드로 렌더링됩니다.

HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이 독타입입니다.

 

 

HTML 4.01 문서 유형

The HTML 4.01 Transitional DTD

• Strict DTD 에서 deprecated 요소와 속성을 포함합니다.
• 권장되지 않는 요소나 속성을 문서에 포함할 필요가 있을 때, 하위 호환성을 위해 이 선언문을 사용하면 됩니다.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

The HTML 4.01 Strict DTD

• Traditional DTD에서 deprecated된 요소와 <frameset> 관련 요소 및 속성을 제외한 가장 엄격한 DTD입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

The HTML 4.01 Frameset DTD

 

• Traditionl DTD에 frameset을 포함합니다. Frameset을 적용한 문서에서는 이 선언문을 사용해야 합니다.
• 가장 느슨한 문서 형식입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

 

The XHTML 1.0 문서 유형

The XHTML 1.0

 

• XHTML 1.0에서는 HTML 4.01의 DTD 와 유사하게 3가지 DTD 중 하나를 사용할 수 있습니다.
• HTML 과 유사하지만 문법이 좀 더 엄격한 특징이 있습니다.
• XML 의 응용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

 

The XHTML 1.1

 

• HTML 1.1에서는 하나의 DTD만 정의할 수 있습니다.
• 이것은 기존의 XHTML 1.0 Strict DTD를 기본으로 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

---

lang

문서에 사용되는 언어(language)를 설정

<html lang="ko">

언어 코드는 ISO 639(전 세계 언어 명칭에 고유 부호를 부여하는 국제 표준)를 참고하여 언어를 설정하도록 합니다.

• 한국어 - ko 또는 ko-KR(Korea of Republic)
• 영어 - en
• 중국어 - zh
• 일본어 - ja

이러한 속성은 장애인을 위한 장치인 화면 낭독 프로그램인 스크린 리더기 통해서 위와 같은 속성을 읽게 해줌으로써 음성이 어떻게 출력될 지를 결정해 줄 수 있습니다.

 

 

---

Lists – ul
목록은 리스트를 말하며 리스트는크게 비순차형 목록, 순차형 목록, 정의(설명)형 목록으로 나눌 수 있습니다.

 

• ul, ol : 비순차형 목록은 ul 이며, 순차형 목록은 ol 요소를 사용합니다. ul, ol 은 li(listed item)을 자식으로 가지고 있습니다.(ul > ol)
• dl(정의형 또는 설명형 목록) : 설명형 목록은 dt(Definition Term)인 용어, dd(Definition Description)인 용어 설명 요소와 dl(Description list)인 설명 목록으로 구성되는데 dl 은 dt, dd 를 자식으로 가지게 됩니다.
  다시 말해, 설명,정의형 목록은 여러 쌍의 정의된 용어, 설명을 그룹화 시켜 구성하게 됩니다.(dl > dt=dd)

 

피규어(figure)

도표, 차트, 표, 이미지 등을 캡션과 함께 감싸는 데 사용되고

즉, 문서에서 참조하는 이미지 영역이라는걸 명시해 주도록 figure 요소로 감싸주는 것입니다.
그리고 피규어 캡션(figcaption)은 피규어에 대한 요약(설명)을 나타내는데 사용합니다.

※ 이미지만 사용될 경우는 img 요소만으로 구성하여도 되며,
이미지 + 캡션과 같은 구조일 경우에는 figure, figcaption 요소와 함께 사용하는 것이 좋습니다.

---

 

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

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

 

section

<section> 요소는 문서, 애플리케이션의 일반적인 섹션.

주제별로 그룹화된 콘텐츠로 예를 들어 소개(introduction), 뉴스 항목(news item), 공지 사항(notification), 연락처 정보(contact information) 와 같은 내용을 그룹화 하기 위한 섹션으로 사용하여 나눌 수 있습니다.
그리고 콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 section 요소 대신에 article 요소를 사용하는 것을 권장합니다.

 

article

<article> 요소는 문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션.

일반적인 규칙은 article 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하며, 각 article 요소는 일반적으로 요소의 하위 항목으로 제목(h1 ~ h6 요소)을 포함시켜 식별해야 합니다.
만약 article 이 헤딩을 포함하고 있지 않다면 이 기사 내용이 무엇에 대한 것인지를 판별하기 힘들어 지게 됩니다.
그리고 general section 요소인 <section> 은 <article> 을 포함할 수 있으며 반대로 <article> 이 <section> 요소를 포함할 수도 있습니다.

 

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>
<ection>
<header></header>
</section>
</main>
<main hidden></main>
<main hidden></main>

 

 

컨테이너(Containers) 요소들

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

텍스트 레벨(Text Level) 요소

 

• <sup> - 윗첨자 요소
• <sub> - 아래첨자 요소
• <abbr> - 축약 요소
• <s> - 더 이상 관련이 없거나 더 이상 정확하지 않은 요소
• <mark> - 관련 참조 목적의 하이라이트된 글자 요소
• <time> - 시간 요소
• <small> - 저작권, 법적 텍스트, 주석 및 작은 글씨 요소

• <sup> 요소(superscript text)는 위첨자로 다른 글자의 오른쪽 위에 놓이는 작은 글자로, 약어 또는 각주를 나태낼 때 사용할 수 있습니다.
• <sub> 요소(subscript text)는 아래첨자로 기준선의 아래, 다른 글자의 오른쪽에 놓이는 작은 글자로 대부분 화화식이나 수학식에 사용됩니다.
• 그리고 <mark> 요소는 일반적으로 사용자가 검색을 해서 나타나는 화면단에서의 검색 키워드를 시각적으로 하이라이팅을 하여 표시해 주는 경우에 사용할 수 있습니다.
  다시 말해, 관련 참조 목적의 하이라이트된 글자 요소에 사용하는 것입니다.
• <abbr> 는 Abbreviation 의 약어로 축약어를 표시할 때 사용합니다. 예를 들어 인싸(인사이더),아싸(아웃사이더),TMI(Too Much Information) 라는 용어를 모르는 사람도 인지할 수 있도록 정보를 제공해 주어야 할 때 사용할 수 있습니다.
• <s> 요소(strikethrough)는 쇼핑몰 같은 곳에서 가격 정보를 할인된 가격으로 표시하고자 할 때 정가에 실선으로 가격 정보를 가로지르게 표현하는데 이럴때 사용할 수 있는 요소입니다.
  국내에서는 이 요소를 제대로 활용하는 사례를 찾아보기 쉽지 않습니다. 기술 사양에서 명시적으로 권장하고 있지만 대개 이러한 크로스된 실선 모양을 CSS 로 처리하고 있는 경우가 많은데 옳은 방법은 아닙니다.

• <time> 요소는 기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 요소 입니다.

그룹핑(Grouping) 요소

 

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

 

임베디드(Embeded) 요소

picture

양한 스크린 환경(스마트폰,스마트 패드,데스크탑,TV 등)에 맞는 이미지를 화면에 적절하게 표시해 주기 위해 사용합니다. 이 요소를 사용할 때 이미지는 1개 이상의 이미지가 필요하고 picture 자식으로 <source> 요소를 필요(0개 이상)에 따라 사용할 수 있습니다.
source 요소를 사용할 수 없을 경우에는 <img> 요소가 화면에 표시하게 됩니다.

<!-- 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>

 

video

src 속성이나 <source> 요소를 이용해 여러 개의 동영상 소스 중 하나를 표시

video 요소를 이용할 때 동영상을 보기 전에 포스터를 보여주고 싶다면

poster="posterimage.jpg" 와 같이 정의해 줄 수 있으며,구형 브라우저 사용자를 위해 가이드를 해줄 수도 있습니다.

 

video 속성값에는 다음과 같은 것이 있습니다.

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

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(아이프레임)

인라인 프레임(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> 와 함께 사용되는 요소

area 에서 사용할 수 있는 속성값은 다음과 같습니다.

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

출처: https://webclub.tistory.com/610?category=724656 [Web Club]