HTML 1 : html 기초

HTML 1 : html 기초

2025. 1. 21. 16:24ㆍFront-end (Basic)/HTML

[ 대표 이미지 ]

1. HTML이란?

Hyper Text Markup Language의 약어로, HTML의 표준은 W3C와 WHATWG가 주도적으로 작성한다

HTML의 구성요소

: 시작 태그와 종료 태그 사이에 내용을 작성하는 방식으로 구성된다

1. Start Tag, End Tag (시작태그와 종료태그)

: 요소의 시작과 끝을 의미하는 태그

2. Void 요소

: End Tag가 없는 태그들(input, hr, meta, link 등)

3. Content(내용)

: start tag와 end tag 사이의 내용

4. Attributes(속성)

: 태그의 동작을 제어하도록 지정하는 값

<input type="checkbox" />

위 코드에서의 속성은 type="checkbox"가 된다.

앗! 태그에 <, >를 사용해버린다면 본문에 태그를 직접 작성하고 싶을 때는 어떻게 해야할까??

이러한 꺽쇠기호는 그대로 작성하지 않고 바꿔서 작성해주어야한다.

< → < (less than)
> → > (greater than)

2. HTML 문서 골격

vscode를 사용한다면, html 빈 문서에 느낌표(!)를 치면 문서 골격이 완성된다.

DOCTYPE

문서의 타입을 지정한다. html로 지정함으로써 HTML5로 작성된 문서임을 나타낸다.

모던 브라우저에서는 DOCTYPE을 명시하지 않아도 HTML5로 작성되었음을 인식하지만, IE9 이전 버전의 브라우저는 안되기 때문에, 일관된 렌더링을 위해 반드시 명시하는 것이 좋다.

<!DOCTYPE html>

html

문서의 루트 지점을 명시하는 태그로, lang 속성으로 해당 서비스 국가를 명시하는 것이 중요하다.

다국어를 지원하는 서비스라면, 언어가 변경될 때 lang 속성도 함께 변경해야한다.

<html lang="ko">
	<!-- lang 속성에 한국 언어 식별자 "ko" 할당 -->
</html>

head

문서의 제목, 인코딩 형식 등을 지정한다.

자주 사용되는 중요한 요소로는 <title>, <meta>가 있다.

<head>
	<title>문서의 제목</title>
    	<!-- 사용자 북마크/검색 엔진에서 식별하는 기준으로 사용됨 -->
    <meta chaset="UTF-8"/>
    	<!-- 인코딩 방식, 뷰포트 지정 등의 작업을 수행 -->
        <!-- chaset : 문서의 인코딩 방식을 지정한다. 안하면 깨질 수 있음 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    	<!-- IE의 렌더링 사양을 세밀하게 조정. X-UA-Compatible 값을 IE=Edge로 지정하면 최신 Edge 사용 -->
</head>

body

문서의 내용이 들어가며, 일반적으로 <head> 태그 다음에 작성한다.

<!DOCTYPE>
<html lang="ko">
	<head>
    	<title>문서의 제목</title>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </head>
    <body>
    	<!-- 문서의 내용 -->
    </body>
</html>

3. HTML 요소(태그) 분류하기

1. 인라인 요소 & 블록 요소

인라인(inline) 요소 : 태그가 할당된 텍스트/이미지의 크기에 맞는 필요한 공간만 차지 : <span>, <button>, <img> 등
블록(block) 요소 : 태그가 시작되면 개행하여 시작하며, 부모 요소의 100% 너비를 차지 : <div>, <article>, <form> 등

블록 요소는 인라인 요소와 블록 요소 모두 포함할 수 있지만, 인라인 요소는 인라인 요소만 포함할 수 있다

2. 콘텐츠 모델(Contents Model)

HTML5에서는 요소가 어떤 콘텐츠를 표현할 수 있는지, 어떤 하위 요소를 가지는지에 따라 모델을 분류한다.

Metadata Content : 나머지 콘텐츠의 표시, 동작을 설명하거나 다른 문서와의 관계를 설정하는 요소
- <base>, <link>, <meta>, <nonscript>, <script>, <template>, <title>
Flow Content : 본문에서 사용되는 대부분의 요소
- <a>, <abbr>, <address>, <area>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keyget>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>
Sectioning Content : 아웃라인을 정의하며, Heading(제목) 요소와 Footer(바닥글) 요소의 범위(Scope)를 정의
- <article>, <aside>, <nav>, <section>
Phrasing Content : 문서 내의 텍스트를 의미하며 단락을 형성하는 요소
- <a>, <abbr>, <address>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <fieldset>, <figure>, <footer>, <form>, <header>, <hr>, <i>, <input>, <ins>, <kbd>, <keyget>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <noscript>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <template>, <textarea>, <time>, <u>,<ul>, <var>
Heading Content : 섹션의 헤더를 정의하는 요소
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Embedded / Interactive Content : 외부의 자원을 가져오거나 삽입할 때 사용하는 요소(유저와의 상호작용에 사용)
- <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>

참고

닫기

기초부터 완성까지, 프런트엔드 (이재성|한정)

'Front-end (Basic) > HTML' 카테고리의 다른 글

<a> 태그에 대해 알아보자 (0)	2025.11.01
HTML : 메타태그 <meta> (2)	2025.07.29
HTML : 링크 태그 <a> (0)	2025.07.29
HTML : 시맨틱 태그 (Semantic Tag) (2)	2025.07.29

🥔 감자의 오묘한 개발 🥔