최원종의 개발 블로그

HTML 기본 템플릿에 이해 - 3 본문

HTML_CSS/사전학습

HTML 기본 템플릿에 이해 - 3

chl6698 2026. 4. 15. 14:52

HTML 기본 개념 확인

1. HTML 문서의 기본 구조

HTML 문서는 크게 <html>, <head>, <body>라는 세 부분으로 나뉨

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <!-- 여기에 웹 페이지 내용이 들어갑니다 -->
</body>
</html>

DOCTYPE 선언

<!DOCTYPE html>
  • 역할: 브라우저에게 "이 문서는 HTML5로 작성됨"을 알려줌
  • 중요 포인트: HTML 문서의 첫 줄에 반드시 작성해야 하며, 대소문자 구분 없이 사용 가능

html 태그와 언어 설정

<html lang="ko">
  • 역할: HTML 문서의 시작과 끝을 나타내며, 모든 콘텐츠를 감쌈
  • 속성 lang="ko": 문서의 주 언어가 한국어(ko) 임을 설정
  • 주요 값: ko: 한국어 en: 영어

head 태그와 메타데이터와 설정

<head>
...
</head>
  • 역할: 웹 페이지에 직접 표시되지 않는 정보를 담음

 

<meta charset="utf-8">
<meta name="description" content="HTML 문서에 대한 설명, 구글 엔진이 의외로 참고를 많이는 안한다고 알려져 있음">
<meta name="keywords" content="HTML, CSS, JAVASCRIPT">
<meta name="author" content="Dave Lee">
  • 역할: 문서의 추가 정보를 제공
  • 주요 속성:
  • charset="utf-8": 문자 인코딩을 UTF-8로 설정(한글 표시 필수).
  • name="description": 페이지 설명(SEO에 사용, 현재 중요도 낮음).
  • name="keywords": 관련 키워드(과거 SEO에 유용, 현재는 덜 사용).
  • name="author": 작성자 이름.

 

메타데이터 주요 태그 표

태그 역할 코드 예시
<meta charset="utf-8"> 문자 인코딩을 UTF-8로 설정 <meta charset="utf-8">
<meta name="description" content="..."> 페이지 설명 제공, 검색 엔진 참고 가능 <meta name="description" content="설명">
<meta name="keywords" content="..."> 주요 키워드 정의, SEO 영향 미미 <meta name="keywords" content="HTML, CSS">
<meta name="author" content="tenco"> 작성자 정보 제공 <meta name="author" content="tenco">
<meta name="viewport" content="..."> 모바일 화면 크기 및 확대/축소 설정 <meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible"> IE에서 최신 렌더링 엔진 사용 강제 <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>텐코딩</title> 브라우저 탭과 검색 결과에 표시될 제목 <title>텐코딩</title>

반응형 웹을 위한 Viewport 설정

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 역할: 모바일 기기에서 페이지가 잘 보이도록 설정.
  • 속성 설명:
  • width=device-width: 페이지 너비를 기기 너비에 맞춤.
  • user-scalable=no: 확대/축소 비활성화.
  • initial-scale=1.0: 초기 확대 비율 1배.
  • maximum-scale=1.0, minimum-scale=1.0: 확대/축소 범위 고정.

LINK 태그

<link> 태그를 사용하면 외부 CSS 파일로 스타일을 적용하거나, 파비콘으로 웹사이트의 개성을 더할 수 있다

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">
  • 역할: HTML 문서에 외부 리소스(파일)를 연결
  • 위치: <head> 태그 안에 작성
  • 특징: <link>는 닫는 태그가 없는 단일 태그

 

주요 속성

속성 설명  주요 값
rel HTML 문서와 외부 리소스의 관계 표시 stylesheet (CSS 파일), icon (파비콘) 등
href 외부 리소스 파일의 위치 지정 파일 경로 (상대 경로 또는 절대 경로)

 

 

(1) rel="stylesheet"

  • 역할: CSS 파일을 연결해 웹 페이지의 스타일을 적용
  • 예시: <link rel="stylesheet" href="style.css">
  • tyle.css 파일을 불러와 HTML 문서에 스타일을 적용

(2) rel="icon"

  • 역할: 브라우저 탭에 표시될 파비콘(작은 아이콘)을 설정
  • 예시: <link rel="icon" href="favicon.png">
  • favicon.png 파일을 파비콘으로 사용
  • 팁: 파비콘은 보통. ico,. png,. jpg 형식의 이미지를 사용

실습 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>나의 영화 Top 추천 3</title>
    <style></style>
  </head>
  <body>
    <h1>나의 영화 추천 TOP 3</h1>

    <h2>1위: 인터스텔라</h2>
    <p>우주와 시간을 넘나드는 감동적인 SF 영화입니다</p>

    <h2>2위: 어바웃 타임</h2>
    <p>시간 여행과 사랑에 대한 따듯한 이야기입니다</p>

    <h3>3위: 화성</h3>
    <p>화성에서 버러지는 영화 이야기 입니다</p>

    <hr />
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

시멘틱 태그란 - 6  (1) 2026.04.15
HTML 주요 body 내의 태그 - 5  (0) 2026.04.15
HTML 속성 - 4  (0) 2026.04.15
HTML, CSS, Javascript - 2  (0) 2026.04.15
HTML 이란 - 1  (0) 2026.04.14
'HTML_CSS/사전학습' Related Articles more