HTML 파일 구조, 개발자가 아니어도 읽는 법

Qorlize 팀 작성 · 마지막 검토 2026년 11월 11일

Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기

웹페이지 파일을 메모장으로 열어 보면 대부분 비슷한 모양입니다. 맨 위에 <!DOCTYPE으로 시작하는 줄이 있고, 화면에는 나오지 않는 내용이 모인 head가 있고, 그 아래 길게 이어지는 body에 실제로 보이는 내용이 들어 있습니다. 각 부분의 역할을 알고 나면 파일이 암호처럼 보이지 않고, 무엇을 바꾸려면 어디를 손대야 하는지 짐작할 수 있습니다. 이 글은 짧은 예시로 HTML 파일의 뼈대를 설명하고, 화면의 특정 글자를 만드는 줄을 정확히 찾는 방법으로 마무리합니다.

모든 페이지가 공유하는 뼈대

아래는 완결된 HTML 파일의 최소 형태입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>망원동 빵집 - 매일 아침 굽는 빵</title>
  <meta name="description" content="망원동에서 매일 아침 구운 깜파뉴와 구움과자를 팝니다.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>망원동 빵집</h1>
  <p>오전 8시부터 오후 8시까지, 월요일 휴무</p>
  <script src="js/menu.js"></script>
</body>
</html>

<!DOCTYPE html>은 브라우저에게 최신 표준 방식으로 화면을 그리라고 알립니다. 이 줄이 없으면 브라우저가 옛날 호환 모드(quirks 모드)로 바뀌어 일부 크기와 간격이 다르게 계산됩니다. 항상 첫 줄에 그대로 둡니다.
<html lang="ko">는 문서 전체를 감쌉니다. lang 값은 화면 낭독기와 번역 도구에 페이지 언어를 알려 줍니다. 영어 페이지라면 lang="en"입니다.
<head>에는 페이지에 관한 정보가 들어갑니다. 여기 있는 내용은 본문 화면에 그려지지 않습니다.
<body>에는 눈에 보이는 모든 것, 즉 제목·문단·이미지·버튼이 들어갑니다.

head 안에 들어 있는 것들

head의 줄이 잘못되어도 오류 메시지가 뜨는 경우는 드뭅니다. 대신 어딘가가 조용히 이상해지므로, 줄마다 무슨 일을 하는지 알아 두면 원인을 빨리 찾을 수 있습니다.

줄	하는 일	없거나 틀리면
`<meta charset="UTF-8">`	파일의 문자 인코딩을 알림	한글이나 특수 기호가 깨진 글자로 보일 수 있음
`<meta name="viewport" …>`	휴대폰이 기기 폭에 맞춰 화면을 그리게 함	휴대폰에서 데스크톱 화면을 축소한 듯 글자가 아주 작게 보임
`<title>`	브라우저 탭 글자, 대개 검색 결과의 제목	탭에 파일 이름이나 주소가 대신 나옴
`<meta name="description">`	검색 결과 제목 아래에 나올 수 있는 요약문	검색엔진이 본문에서 임의로 문장을 골라 보여 줌
`<link rel="stylesheet">`	바깥 CSS 파일을 불러옴	검은 기본 글꼴만 있고 배치가 사라진 맨 화면이 됨
`<script>`	메뉴, 슬라이드, 폼 등에 쓰이는 자바스크립트	움직이는 부분이 멈춤. 글자는 대체로 그대로 보임

스크립트는 head에 있기도 하고 body 맨 끝에 있기도 합니다. 둘 다 흔한 방식이니 위치를 옮길 필요는 없습니다. 한글이 깨져 보이는 문제는 깨진 한글 고치기에서 자세히 다룹니다.

태그, 속성, class와 id

body 안의 내용은 태그로 감싸여 있습니다. 대부분 여는 태그와, 빗금이 붙은 닫는 태그가 짝을 이룹니다. <img>나 <br>처럼 안에 담을 내용이 없는 태그는 닫는 태그가 없습니다.

<section id="pricing" class="card highlight">
  <h2>월간 요금제</h2>
  <p class="price">월 12,000원</p>
  <a href="#contact" class="button">문의하기</a>
</section>

여는 태그 안에서 태그 이름 뒤에 이름="값" 꼴로 적힌 것이 속성입니다. 페이지를 고치는 사람에게 특히 중요한 속성은 두 가지입니다.

class는 여러 요소가 함께 쓰는 이름표입니다. class="price"를 단 요소가 여러 개일 수 있고, 위의 card highlight처럼 한 요소가 띄어쓰기로 구분한 여러 class를 가질 수도 있습니다. 스타일은 보통 class에 붙입니다.
id는 페이지 안에서 단 하나의 요소에만 붙이는 고유 이름입니다. 페이지 안 이동 링크(href="#pricing"을 누르면 id="pricing"인 곳으로 이동)와 스크립트에서 씁니다. 같은 id를 두 요소에 붙이면 안 됩니다.

태그는 상자 안에 상자를 넣듯 겹겹이 들어갑니다. 위 예시에서 제목, 가격, 링크는 section 상자 안의 자식입니다. 닫는 태그 하나를 지웠을 때 그 아래가 전부 틀어지는 이유도 여기에 있습니다. 브라우저가 상자가 어디서 끝나는지 알 수 없게 되기 때문입니다.

스타일이 적히는 세 곳

요소의 색, 크기, 간격은 CSS가 정합니다. CSS는 세 군데에 적을 수 있습니다.

요소에 직접 적기(인라인):

<p style="color: #c0392b; font-size: 18px;">금요일까지 할인</p>

그 요소 하나에만 적용됩니다. 찾기는 쉽지만 같은 빨간색이 스무 곳에 있다면 스무 줄을 고쳐야 합니다.

head 안 <style> 블록에 적기:

<style>
  .price { color: #c0392b; font-size: 18px; }
</style>

.price의 점은 class를 뜻합니다. 이 파일에서 class="price"가 붙은 모든 요소에 이 규칙이 적용됩니다.

바깥 파일에 적고 head에서 연결하기:

<link rel="stylesheet" href="css/style.css">

같은 종류의 규칙이 style.css 파일에 들어 있습니다. 여러 페이지가 이 파일을 함께 연결하고 있다면 여기서 한 번 고치면 모든 페이지가 바뀝니다.

처음 고쳐 보는 분들이 가장 놀라는 지점이 여기입니다. .price 규칙의 색을 바꾸면 페이지의 모든 가격이 한꺼번에 바뀝니다. 모두 같은 규칙을 가리키고 있으니까요. 대개는 그게 원하는 결과지만, 가격 하나만 다르게 보이게 하고 싶다면 공용 규칙을 건드리지 말고 그 요소에만 인라인 스타일이나 class를 하나 더 붙이는 편이 안전합니다. 같은 속성이 여러 곳에 정해져 있으면 대체로 인라인 스타일이 class 규칙보다 우선합니다. "CSS 파일을 고쳤는데 화면이 그대로"인 흔한 이유입니다.

파일을 다른 폴더로 옮긴 뒤 화면이 서식 없는 맨 글자로만 보인다면, 스타일 연결 줄의 href 경로가 CSS 파일을 찾지 못하는 경우가 대부분입니다. 이미지도 같은 이유로 사라지는데, HTML 파일에서 이미지가 안 보일 때에 원인별로 정리해 두었습니다.

화면의 글자를 만드는 줄 찾기

긴 파일은 수천 줄이 넘기도 합니다. 스크롤로 뒤지지 말고 브라우저에게 위치를 물어보는 편이 빠릅니다.

크롬이나 엣지에서 페이지를 열고 찾고 싶은 글자를 오른쪽 클릭해 검사를 누릅니다. 개발자 도구가 열리고 Elements 패널에 해당 요소가 강조됩니다. Ctrl+Shift+C를 누르면 화면에서 아무 요소나 눌러 고를 수 있는 선택 모드가 켜집니다.
강조된 태그의 이름, class, id를 적어 둡니다. 이것이 검색어가 됩니다.
옆의 Styles 창을 봅니다. 규칙마다 출처가 표시됩니다. element.style은 인라인 스타일이고, style.css:42 같은 표시는 그 파일의 42번째 줄이라는 뜻입니다. 줄이 그어진 규칙은 위쪽의 다른 규칙에 밀려 적용되지 않는 것입니다.
실제 파일을 메모장이나 VS Code로 열고 Ctrl+F로 class 이름이나 글자 몇 단어를 검색합니다. CSS 파일에서는 .price처럼 앞에 점을 붙여 찾습니다.

개발자 도구에서 바꾼 값은 새로 고침하면 사라집니다. 위치를 찾고 값을 시험해 보는 데 쓰고, 실제 수정은 파일에서 해야 합니다. 어떤 도구로 고칠지는 코딩 몰라도 HTML 파일 고치는 방법에서 비교했습니다.

시각 편집기에서는 이 구조가 어떻게 보이나

태그를 직접 칠 일이 없더라도 구조를 알면 도움이 됩니다. Finipage 왼쪽 패널의 레이어는 body의 상자 구조를 그대로 나무 모양으로 보여 주고, 부모 요소 선택 버튼을 누르면 선택이 한 겹 바깥으로 넓어집니다. 가격 글자에서 카드로, 카드에서 섹션 전체로 올라가는 식입니다. 오른쪽 속성 패널의 문서 항목은 head의 <title>과 meta description을 고치고, 글자·색·여백 항목은 지금 선택한 요소에 적용됩니다. 다만 소스를 직접 고치는 기능은 없어서 style.css의 공용 규칙을 바꾸거나, 스크립트를 고치거나, head에 다른 태그를 추가하는 일은 메모장이나 VS Code 같은 편집기로 해야 합니다. 고친 결과가 코드로 어떻게 바뀌었는지는 HTML 소스 보기 버튼으로 확인할 수 있습니다.

이어서 읽을 만한 글은 위의 CSS 개념을 바탕으로 한 웹페이지 글꼴의 원리와 바꾸는 법입니다.

내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.