웹스토리보이

HTML(HyperText Markup Language)은 웹 문서를 표현하기 위한 하이퍼텍스트 마크업 언어입니다.

하이퍼텍스트란 문서에서 다른 문서로 이동하는 것을 말하며, 마크업이란 태그를 사용하여 콘텐츠의 의미를 부여하는 것을 말합니다.

HTML(Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

태그는 HTML에서 정보를 전달하는 방식을 의미합니다.

열린 태그(Opening tag) : 이것은 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작부터 효과가 적용되기 시작합니다.
닫는 태그(Closing tag) : 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 열린 태그와 같습니다. 이것은 요소의 끝에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
내용(Content) : 요소의 내용이며, 이 경우 단순한 텍스트입니다.
요소(Element) : 열린 태그, 닫는 태그, 내용을 통틀어 요소라고 합니다.

HTML 속성은 태그에 기본 기능 및 유형을 설정하고, 태그의 동작으로 제어하기 위한 용어입니다.

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
속성 이름 다음엔 등호(=)가 붙습니다.
속성 값은 열고 닫는 따옴표로 감싸야 합니다.

요소는 HTML을 구성하는 가장 기본 단위입니다.

태그의 시작태그와 끝나는 태그 사이의 범위를 요소라고 합니다.

주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다.

<!-- 주석표시 -->;

블록요소는 박스, 인라인 요소는 텍스트를 의미합니다.

블록 엘리먼트(Block Element)
- 독립된 박스 영역으로 한 줄에 하나에 블록 요소만 표현 할 수 있습니다.
- 블록 요소에는 블록 요소와 인라인 요소를 포함 할 수 있습니다.
- <div>, <p>, <ul>, <li>, <hr>, <address>
인라인 엘리먼트(Inline Element)
- 독립된 텍스트 영역으로 한 줄에 여러개의 인라인 요소를 표현할 수 있습니다.
- 인라인 요소에는 블록요소가 포함 될 수 없지만, 인라인 요소는 포함 할 수 있습니다.
- <span>, <a>, <img>, <input>, <button>, <br>

웹 문서를 제작하기 위해서는 웹 문서 유형을 설정해야 합니다.

DTD(Document Type Declaration)을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지기 때문에 독타입을 설정해야 합니다.

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

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

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

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

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

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

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

<!-- html5 -->
<!DOCTYPE html>

콘텐츠의 언어를 인식하고 언어 정보를 추출하는데 사용합니다.

미리 언어를 설정하면 효율성이 더 좋아집니다.

<!-- HTML5 -->
<html lang="ko">

<!-- HTML4 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

HTML는 구조는 html 요소 안에 head와 body로 이루어져 있습니다.

HTML 구조는 독타입 선언을 해주어야 하나의 웹 문서가 완성됩니다.
HTML 문서는 상하 관계가 존재하는 계층적인 구조로 되어있습니다. 상위에 있는 요소와 하위에 있는 요소는 부모 자식 관계로 표현하며, 이러한 구조를 DOM 구조라고 합니다.
HEAD 요소에는 제목, 사이트 정보, 스크립트, 스타일시트, 메타 정보등을 제공합니다.
BODY 요소에는 문서 본문에 해당하는 콘텐츠 영역입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>

    </head>
    <body>

    </body>
</html>

section태그는 일반적으로 문서의 콘텐츠 영역을 설정할 때 사용합니다.

콘텐츠와 관련된 한 가지 주제 영역을 의미합니다.
section 요소는 문장이나 스타일링 요소가 아니기 때문에 편의나 영역을 위함이라면 div 태그가 좋습니다.
section 요소는 제목이 없는 경우 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
section 요소는 일반적인 영역의 주제가 아니라면 구체적인 요소(article, aside, nav)를 대신 사용하는 것이 더 적절합니다.

nav 태그는 웹 페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹을 설정합니다.

nav는 문서의 핵심적인 페이지 메뉴 및 서브 메뉴에서 사용합니다.
nav 요소는 문서에서 주로 한 번만 사용합니다.
문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
nav는 핵심적인 네비게이션에 사용해야 하므로 푸터 내에 링크 그룹의 사용은 적절하지 않습니다.

main 태그는 웹 문서에서 주요 콘텐츠 영역을 나타낼 때 사용합니다.

main 태그는 웹 페이지에서 한번만 사용할 수 있으며, 접근섭과 검색 영역 노출을 향상시킵니다.
article, aside, footer, nav의 하위 요소로 사용할 수 없습니다.

aside 태그는 메인 콘텐츠와 관련된 사이트 콘텐츠 영역을 설정합니다.

aside는 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분 적인 정보를 그룹화할 때 사용합니다.

header 태그는 웹 문서의 헤더 영역을 설정합니다.

header는 웹 페이지의 소개, 네비게이션 영역, 검색영역, 로고 영역을 포함하는 영역입니다.
header 태그에는 제목 태그가 포함 될 수 있으며, 필수 조건은 아닙니다.
header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.

footer 태그는 웹 문서의 푸터 영역을 설정합니다.

footer 태그는 저작권 정보, 회사 정보, 관련 링크, 바닥글, 주소 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
footer 태그는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside 태그를 포함 할 수 있습니다.

article 태그는 웹 문서의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.

article 태그는 신문기사, 잡지, 블로그 항목, 게시판 글 등의 독립적인 항목을 나타냅니다.
section 태그는 하나의 주제를 나타낸다면, article 태그는 주제를 묶은 독립적인 콘텐츠입니다.
section 요소 안에는 article 요소를 쓸 수 있으며, article 요소 안에도 section 요소를 쓸 수 있습니다.

div태그는 문서의 섹션을 만들거나 영역을 만들 때 사용합니다.

p 태그는 문단을 쓸 때 사용합니다.

p태그와 p태그 사이에는 한 줄의 행간이 표현됩니다.

ul 태그는 순서가 없는 목록을 쓸 때 사용합니다.

ul태그는 li태그와 같이 사용합니다.
블릿기호는 점으로 표현됩니다.

li 태그는 목록의 항목을 쓸 때 사용합니다.

li태그는 ul 태그, ol 태그, munu 태그와 같이 사용합니다.
li태그 안에는 다른 목록을 중첩으로 사용할 수 있습니다.

ol 태그는 순서가 있는 목록을 쓸 때 사용합니다.

ol태그는 li태그와 같이 사용합니다.
블릿기호는 번호(숫자)로 표현됩니다.

a 태그는 하이퍼 링크를 설정합니다.

하이퍼 링크란 현재 페이지에서 다른 페이지 이동을 말합니다.
방문하지 않은 링크는 밑줄과 파란색으로 표현됩니다.
방문한 링크는 밑줄과 보란색으로 표현됩니다.
활성화된 링크는 밑줄과 빨간색으로 표현됩니다.
HTML5에서는 예외적으로 인라인 구조인 a 태그에 블록 요소에 포함할 수 있습니다.

meta 태그는 웹 문서에 대한 여러가지 정보를 제공합니다.

메타태그의 종류와 설명을 알려주는 표입니다.
메타데이터	설명
charset	웹 페이지 언어를 설정합니다.
author	웹 페이지를 만든 사람을 설정합니다.
description	웹 페이지에 대한 설명을 설정합니다.
keywords	웹 페이지에 대한 키워드를 설정합니다.
application-name	웹 페이지에 관련된 응용프로그램 이름을 설정합니다.
generator	웹 페이지에서 만든 소프트웨어의 이름 설정합니다.

<!-- HTML5 언어 설정 -->
<meta charset="UTF-8">

<!-- HTML4 언어 설정 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- 웹 문서에 대한 제작자 설정 -->
<meta name="author" content="webstoryboy">     

<!-- 웹 문서에 대한 설명 -->
<meta name="description" content="이 사이트는 무슨무슨 사이트입니다.">

<!-- 웹 문서에 대한 키워드 설정 -->
<meta name="keyword" content="키워드, 키워드, 키워드">

<!-- 웹 문서에 대한 웹 응용 프로그램 이름 -->
<meta name="application-name" content="응용 프로그램 이름">

<!-- 웹 문서에 대한 소프트웨어 이름 -->
<meta name="generator" content="소프트웨어 이름">

HTML Reference v1.0 </doc>

HTML

태그(tag)

속성(Attributes)

요소(Element)

주석

블록요소 / 인라인요소

DTD 선언

언어 속성 설정

문서 구조

웹 표준과 웹 접근성

시멘틱 태그

HTML5에 새로 생긴 것(의미 변경된 것)

HTML5에 없어진 것

<section>

<nav>

<main>

<aside>

<header>

<footer>

<article>

<div>

<p>

<ul>

<li>

<ol>

<a>

<title>

<meta>