[2023.03.02] 2. HTML 자세히 들여다보기

[2023.03.02] 2. HTML 자세히 들여다보기

2023. 3. 2. 17:23ㆍDev./HTML

🔍HTML은 어떻게 구성되어있는지 들여다보기

HTML 구성

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
  </body>
</html>

HTML의 뼈대가 되는 구조이다. 크게 4가지 파트로 나눌 수 있겠다.

<!DOCTYPE html>

<!DOCTYPE html>

HTML 버전이 무엇인지 브라우저에 알려주는 역할을 하는 선언
HTML5 이전 버전에서는 DTD를 참조해야 했지만, HTML5 버전 이후로는 참조할 필요가 없다.

<html>

<html lang="ko-KR">
	...
</html>

HTML 문서의 루트, 최상단 요소
lang 속성으로 해당 페이지의 주 언어가 무엇인지 설정 가능.
주 언어 설정은 검색엔진, 스크린리더, 번역 기능 등에 영향을 미치게 된다.

언어코드	언어	국가코드(국가)
ko	한국어	KR(대한민국), KP(북한)
en	영어	US(미국), GB(영국), PH(필리핀)
zh	중국어	CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체)
ja	일본어
de	독일

<head>

<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title></title>
</head>

기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
검색엔진을 위한 다양한 정보들이 담기는 곳.
사용자에게는 title, 파비콘, viewport 정보등이 보여진다.

charset

<meta charset="utf-8">

문자 깨짐 오류를 방지하기 위해 문자 코드의 종류를 설정.
UTF-8은 전세계적인 언어들을 지원하는 국제적인 코드 규약.

http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

브라우저 호환성을 위해 작성.
인터넷 익스플로러의 다양한 버전에 의해 같은 페이지도 다르게 보여지는 경우를 방지

name="" content=""

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

name 과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공.
name은 문서 레벨의 메타데이터를 제공(viewport, description, author, ...)
content는 실제 메타데이터의 요소

viewport

width: 뷰포트의 너비를 제어.
height: 뷰포트의 높이를 제어.
initial-scale: 페이지가 처음 로드 될 때 확대/축소 수준 제어. min 0.1 - default 1 - max 10
minimum-scale: 축소 정도 제어
maximun-scale: 확대 정도 제어
user-scalable=no 속성을 추가해 사용자가 화면크기를 제어 못하게 하는 경우도 있다.
접근성을 위해 해당 속성을 무시하는 브라우저도 있음.

title

<title>제목</title>

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의
약 60자 정도의 길이제한이 있다. 이 이상을 넘어가면 제목이 축소되어 보일 수 있음.

link

  <!-- 스타일 시트 링크 -->
  <link rel="stylesheet" href="style.css">
  
	<!-- 폰트 링크 -->
  <link rel="stylesheet" href="font.ttf">
  
	<!-- 파비콘 링크 -->
  <link rel="shortcut icon" href="favicon.ico">

현재 문서와 외부 리소스의 관계를 명시함.
외부 스타일 시트, 폰트, 파비콘 등을 연결할 때 사용.
빈 태그, 속성만을 포함함.
head 요소 내부에만 위치할 수 있다.
rel : relations. 대상 파일의 속성을 나타낸다.
href: hyper-references. 연결 시 참조할 파일의 위치를 나타낸다.

<body

사용자에게 보이는 영역
웹페이지를 개발하기 위해 태그를 삽입하는 영역

'Dev. > HTML' 카테고리의 다른 글

[2023.03.02] 4. 목록 관련 태그 정리 (1)	2023.03.02
[2023.03.02] 3. 텍스트와 관련된 태그 정리 (0)	2023.03.02
[2023.03.02] 1. HTML 기본 (0)	2023.03.02

Astin's Storage

Astin's Storage

태그

최근글

댓글

공지사항

아카이브

HTML 구성

<!DOCTYPE html>

<html>

<head>

<body

'Dev. > HTML' 카테고리의 다른 글

관련글

티스토리툴바