HTML

웹 문서를 구성하는 HTML을 이해하고, 주요 태그와 특성들에 대해 알아봅니다.
HTML


HTML 기초

HTMLHTML

웹 브라우저는 다양한 응답 데이터를 처리 할 수 있지만, HTML 문서를 해석하고 렌더링하는 것이 기본적인 기능입니다. HTML의 개념과 구조에 대해서 친숙해질 필요가 있습니다. HTML(Hypertext Markup Language)은 프로그래밍 언어라기보다는 웹 문서를 표현하기 위해 고안된 텍스트 포맷입니다.

HTML 문서

HTML 문서는 HTML 요소(Element)들로 구성

  • HTML 문서는 요소들이 레고 블록과 같이 조립된 형태로 이루어져있습니다.
  • 요소는 다른 요소를 포함하여 상하 관계를 이루기도 합니다.

HTML 요소(Element)는 태그(Tag)로 표현

  • 태그들은 Paragraph(문단), Table(표), Heading(제목), Image(이미지)와 같은 특정 요소들을 표현합니다.
  • 태그는 부가적인 특성(Attribute)을 가질 수 있습니다.

웹 브라우저는 HTML을 렌더링

  • 웹 브라우저는 HTML 태그를 그대로(텍스트로) 보여주는 것이 아니라, 태그들의 구조와 특성을 해석(Parsing)하여 그래픽으로 보여줍니다.

짝 태그와 홑 태그

짝 태그(Container Tag)

시작 태그와 끝 태그로 이루어진 태그를 뜻합니다. 내부에 다른 태그를 포함 할 수 있습니다.
<tagName attribute1="특성1" attribute2="특2">...</tagName>처럼 적습니다.

<div>
    <span>
        <p>Container Tags</p>
    </span>
</div>

홀 태그(Empty Tag)

단독으로 사용하는 태그를 뜻 합니다. 내부에 다른 태그를 포함 할 수 없습니다.

<tagName attribute1="특성1" attribute2="특2" />처럼 적습니다.

<img src="../images/photo.png">
<br>
<br />
<!-- 홑태그 끝에 / 가 올 수도 있습니다 -->

Display 속성

HTML 태그들은 렌더링될 때 문서의 공간을 차지하는 방식에 따라 Display 속성을 갖습니다. 태그에 따라 기본적인 Display 속성이 정해져 있습니다. 하지만 이 속성을 명시적으로 변경 할 수도 있습니다.

인라인 태그(Inline Tag)

인라인 태그는 줄을 바꾸지 않고 다른 요소와 같은 줄에 위치하려는 성향의 태그입니다.

블록 태그(Block Tag)

블록 태그는 한 줄의 공간을 차지하려는 성향의 태그입니다.

주요 태그

태그명설명형태display
htmlHTML 문서의 시작을 나타냄block
head문서 자체에 대한 정보를 나타냄
link, title, meta 태그 등을 포함
none
body화면에 보여질 태그의 시작을 나타냄block
table표를 나타냄
행을 tr 태그로, 그 안에 열을 td 태그로 나타냄
block
divDivision; 공간을 분할 함block
h1Heading; 큰 글씨를 표현 (h1 ~ h6)block
aAnchor; 링크를 거는 태그inline
pParagraph; 문단을 나타냄 짝block
ulUnordered-list; 리스트
항목을 나타내는 li 태그를 포함
block
olOrdered-list; 번호가 매겨지는 리스트
항목을 나타내는 li 태그를 포함
block
img이미지를 그리는 태그inline
embed다른 응용프로그램이나 플러그인을 불러오는 태그 (영상, 오디오, 플래시 등)inline
form입력을 받을 수 있는 양식을 나타냄
input, textarea, select, button 등이 포함
block

전체 태그들의 목록

주요 특성

태그의 특성(Attribute)

<form action="/write" method="post">
    <input type="text" name="message">
</form>
<img src="sample.jpg">

태그를 구체적으로 선언하기 위해서 특성(Attribute)을 지정 할 수 있습니다. 특성은 키-값 형식으로 이루어져있으며, 여러 특성을 가질 경우 그 순서는 중요하지 않습니다. 특정 태그는 필수적인 특성을 가지기도 합니다.

특성설명특성을 가질 수 있는 태그
id문서내에서 태그를 고유하게 식별할 수 있게하는 문자열모든 태그
name태그를 식별하기 위한 문자열, 중복 가능button, form, iframe, input, meta, select, textarea
style렌더링시 스타일의 지정모든 태그
width요소의 너비block 및 inline-block 태그
height요소의 높이block 및 inline-block 태그
type태그가 여러가지 형태 혹은 여러 파일 타입을 특성으로 가질 경우, 그 형태나 파일 타입을 지정input, link, script, style
hrefHypertext Reference; 관련 문서/파일의 주소a, link, base
valueinput, option
srcSource; 대상 문서/파일의 주소img, audio, video, embed, iframe, script

전체 특성들의 목록

HTML 문서 쓰고 읽기

HTML 태그와 특성에 익숙해지면, 문서를 읽으면서 렌더링된 화면을 상상 할 수 있습니다.

목차
3. 웹 프론트엔드
4. 웹 백엔드
저자

김동욱

개발 경력 약 10년, 전문 분야는 웹 및 각종 응용 소프트웨어 플랫폼입니다. Codeflow를 운영하고 있습니다.

2018년 04월 09일 업데이트

지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.