HTML CSS JavaScript

HTML 기본 템플릿의 이해

whs5758 2025. 6. 20. 17:53

여기서 템플릿이란 말은 웹 페이지를 만들기 위한 기본적인 구조 또는 뼈대라고 생각하면 좋습니다. 즉, HTML 문서를 작성할 때 공통적으로 사용되는 필수 요소들을 미리 정의해 놓은 형태를 의미합니다

HTML 기본 개념 확인하기

1. HTML 문서의 기본 구조

HTML 문서는 크게 <html>, <head>, <body>라는 세 부분으로 나뉩니다.

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

 

코드 작성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="HTML 문서에 대한 설명, 구글 엔진이 의외로 참고를 많이는 안한다고 알려져 있음" />
    <meta name="keywords" content="HTML, CSS, JAVASCRIPT" />
    <meta name="author" content="tenco" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>텐코딩</title>
  </head>
  <body>
  </body>
</html>

1. DOCTYPE 선언

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

2. html 태그와 언어 설정

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

3. 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>

 

4. 호환성 관련 태그

<meta http-equiv="X-UA-Compatible" content="ie=edge">
  • 역할: 인터넷 익스플로러(IE)에서 최신 렌더링 엔진을 사용하도록 설정.
  • 팁: IE 브라우저 호환성을 위해 추가하는 경우가 많습니다.

5. 반응형 웹을 위한 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: 확대/축소 범위 고정.

6. 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">
    • style.css 파일을 불러와 HTML 문서에 스타일을 적용합니다.

(2) rel="icon"

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

실습 예제

ch03/index03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="HTML 연습 페이지 입니다">
    <meta name="keywords" content="HTML, CSS, Web">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- W3C 정의 인터넷 익스플로러로 웹 페이지를 열게 되면 최신 렌더링 버전으로 화면을 표시해 -->
    <meta http-equiv="x-UA-Compatible" content="ie=edge">

    <!-- 파비콘 연결해 보기 -->
    <link rel="icon" href="img/favicon.png">

    <title>Document</title>
</head>
<body>
    <!-- 웹 브라우져에 표시 영역  -->
    <h1>HTML 학습 페이지</h1>
    <p>이 페이지는 HTML 문서의 기본 구조를 학습하기 위한 예제 입니다</p>
    
</body>
</html>

 

 

'HTML CSS JavaScript' 카테고리의 다른 글

시멘틱 태그란  (3) 2025.07.14
HTML 주요 body 내의 태그  (0) 2025.07.14
HTML 속성이란?  (1) 2025.07.14
HTML, CSS, JavaScript 가 뭐야?  (0) 2025.06.20
HTML 이란 뭘까?  (0) 2025.06.20

'HTML CSS JavaScript'의 다른글

  • 현재글HTML 기본 템플릿의 이해

관련글

티스토리툴바