[Web Front 2] HTML 기초

Notice

Recent Posts

Recent Comments

Link

인스타그램

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

리제

[Web Front 2] HTML 기초 본문

개발자 호소인/Front

[Web Front 2] HTML 기초

리제🫧 2026. 6. 18. 17:11

HTML 문서의 기본 구조

모든 HTML 문서는 머리(head) + 몸(body) 구조로 이루어져 있다.

구성 요소

<!DOCTYPE html>	HTML5 문서 선언	문서 맨 위 1줄
<html lang="ko">	문서 전체 영역 / 언어 지정	가장 바깥 태그
<head>	문서 정보 영역	화면에 안 보임
<meta charset="UTF-8">	문자 인코딩 지정	없으면 한글 깨짐
<title>	브라우저 탭 제목	즐겨찾기 이름
<body>	실제 콘텐츠 영역	화면에 보임

💡 head vs bodyhead는 무대 뒤(설정), body는 무대 위(관객이 보는 것)라고 이해하면 쉽다.
우리가 작성하는 대부분의 태그는 body 안에 들어간다.

글자 관련 태그 : 제목과 구분

함수 목록

태그 설명 특징

태그	설명	특징
<h1> ~ <h6>	제목 태그	숫자가 클수록 글자가 작아짐
<hr>	수평선	단독 태그
<br>	줄바꿈	단독 태그

💡 숫자는 크기가 아니라 위계가 중요
h1은 페이지 대제목, h2는 소제목...처럼 중요도(문서 구조) 를 나타낸다.
단순히 글자를 많이 넣기 위해 h1을 너무 남발하지 않도록 주의해야 한다.

글자 관련 태그 : 문단 (p vs pre)

문단을 나누는 태그는 와 <pre> 두 가지가 있고,

줄 바꿈·공백 처리 방식이 다르다.

구분	<p>	<pre>
줄바꿈	무시됨 → <br> 필요	입력한 그대로 적용
공백	여러 칸도 1칸으로	입력한 그대로 적용

예제

💡 HTML은 공백과 줄 바꿈을 무시
코드에서 줄을 여러 번 바꾸거나 공백을 여러 칸 넣어도 화면에는 공백 1칸으로만 나옴.
그래서 p 안에서는  (줄 바꿈)와  (공백)가 필요하다.

글자 관련 태그 : 엔티티 코드

<, >, & 같은 기호는 태그 문법에 쓰이는 특수문자라서 그대로 못 쓰고 엔티티 코드로 표현한다.

함수 목록

코드	출력	의미
	(공백)	공백 1칸 강제 삽입
<	<	부등호 열기 (less than)
>	>	부등호 닫기 (greater than)
&	&	앰퍼샌드

글자 관련 태그 : 텍스트 서식

<b>	굵게	단순 굵게 (의미 X)
<strong>	굵게	중요성 강조 (의미 O)
<i>	기울임	단순 기울임 (의미 X)
<em>	기울임	강조 (의미 O)
<mark>	형광펜	하이라이트
<u>	밑줄	underline
<s>	취소선	strike
<sub>	아래첨자	H₂O
<sup>	윗첨자	x²

예제

💡 b vs strong, i vs em의 차이
화면에 보이는 모양은 같지만 의미(시맨틱)가 다르다

b·i → 그냥 모양만 (굵게/기울임)

strong·em → "중요하다 / 강조한다"는 의미까지 포함 → 검색엔진·스크린리더가 다르게 인식

모양이 같다고 아무거나 쓰지 말고 의미에 맞는 태그를 고르는 습관이 중요

⚠️ 태그 중첩 시 닫는 순서 주의
여는 순서의 역순으로 닫아야 한다.
... (O) / (X)

목록 관련 태그

목록은 <li>(목록 아이템)를 <ul> 또는 <ol>로 감싸서 만든다.

함수 목록

태그	설명	표식
<ul>	순서 없는 목록 (Unordered List)	● 점
<ol>	순서 있는 목록 (Ordered List)	1, 2, 3 번호
<li>	목록 아이템 (List Item)	ul/ol 안에 위치

ul / ol 기본

ol 주요 속성

type	번호 형식 (1 A a I i)	type="A" → A, B, C
start	시작 번호 지정	start="5" → 5부터
reversed	역순 정렬	큰 수 → 작은 수

⚠️ 중첩 위치 주의
자식 <ul>은 반드시 부모 <li> 안쪽에 넣어야 한다.
<li> 바깥에 두면 구조가 깨짐.

저작자표시 비영리 변경금지 (새창열림)

'개발자 호소인 > Front' 카테고리의 다른 글

CSS 코드와 웹사이트의 구조 (0)	2026.06.24
Visual Studio Code 실습문제 톺아보기 (0)	2026.06.22
[CSS] "소수는 어렵고 배수는 쉽다" 는 무슨 뜻일까? / Relation 이해하기 (0)	2026.06.22
[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS (0)	2026.06.22
[Web Front 1] 웹을 구성하는 기본구조 HTML (0)	2026.06.18

'개발자 호소인/Front' Related Articles

리제

[Web Front 2] HTML 기초 본문

[Web Front 2] HTML 기초

HTML 문서의 기본 구조

구성 요소

글자 관련 태그 : 제목과 구분

함수 목록

글자 관련 태그 : 문단 (p vs pre)

예제

글자 관련 태그 : 엔티티 코드

함수 목록

글자 관련 태그 : 텍스트 서식

예제

목록 관련 태그

함수 목록

ul / ol 기본

ol 주요 속성

'개발자 호소인 > Front' 카테고리의 다른 글

티스토리툴바