본문 바로가기
대학원 공부/programming language

HTML : HTML head 구조

by 월곡동로봇팔 2019. 12. 15.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

index.html 을 만든 후, ! 치고 enter를 입력하면 다음과 같은 기본적인 html 구조가 나온다.

 

<!DOCTYPE html> 은 문서의 타입이 정의되었다. 어떤 버젼으로 정의됬는지 브라우저에게 알려준다.

 

<html>은 root 요소다. lang 검색엔진이나 브라우저가 참고하도록 알려준다. 한글은 'ko'

 

<head>는 브라우저에게 보여지는 건 아니지만, 문서의 기본 설정, stylesheet 파일에 연결, body를 해석하기전에 보는 필수적인 요소들이다.

 

<meta charset> 은 문자 집합 및 부호화하는 작업인 인코딩에 해당한다. UTF-8 은 전세계적으로 문자를 모두 표현하기 위해 유니코드를 재정, 그 중 하나이다. 이를 지원하지 않으면, 브라우저가  글을 깨져서 읽게 된다.

<meta name> 은 반응형 웹사이트에 해당하며, 이는 좀 더 공부해보자!! 이는 device에서 보았을 때, 1.0 배율로 보여줘 다!

<meta http-equiv> 는 인터넷 익스플로러로 읽을 때, 호환성 보기가 되는 최신버젼으로 읽어라 라는 의미이다.

 

<link rel="stylesheet" href="./style.css" /> 는 stylesheet라는 문서의 type이며, 이 문서의 경로는 다음과 같다는 것을 얘기해준다. 이는 link 라고 쓰고 tab키를 눌러주면 된다.

 

<title> 문서의 제목을 의미한다. 검색엔진이  잘 알아볼 수 있게 title을 잘 지정을 해줘야 한다.

 

 

'대학원 공부 > programming language' 카테고리의 다른 글

CSS : Positioning (float, clear,overflow)  (0) 2019.12.15
Web : Web Page 구조 구상 및, 설계 방법  (0) 2019.12.15
CSS : CSS Selector  (0) 2019.12.15
CSS : box model  (0) 2019.12.14
CSS : font background, inheritance  (0) 2019.12.14

댓글