📖 HTML(0) 문서 정보

Lee Jooam·2022년 4월 15일

0

HTML은 문서의 구조를 브라우저에게 알려주는 마크업 언어다. 열고 닫는 태그, 부모와 자식 관계 등의 요소들이 결합하여 최종적으로 DOM 객체를 생성하게 되고(추후 상세한 내용을 알아봐야겠다.) 브라우저에 렌더링 된다.

Emmet?

vscode는 편하다. 너무 편해서 사람을 약하게 만든다. 😐

Vscode에 내장된 Emmet은 정말 편리한 기능이다. Emmet이 없었다면 단순한 마크업 작업에 쏟는 시간이 어마어마하지 않았을까?

문득 느끼는 거지만 이런 Emmet은 코드 생산성을 높여주는 좋은 친구이지만 초보자에게는 양날의 검이기도 한 것 같다.

여느 때와 다름없이 ! + tab을 입력해 DTD 형식을 맞춘 포맷을 생성하려는데 문득 이런 생각이 든다.

내가 뭘 입력하고 있는 거지?

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  
</body>
</html>

익숙한 글자들이다. 근데 누군가가 나에게 이 항목들을 하나하나 설명해보라고 하면 자신이 없다.

꿀먹은 벙어리가 될 상황을 미리 벗어나자.

DOCTYPE

문서의 HTML 버전

현재는 HTML5로 대부분 사용 중이지만 여전히 과거의 HTML 버전을 사용하는 문서가 있을 수도 있다.

이전 버저닝 포스트에도 있는 내용이지만 숫자가 바뀐다는 건 소프트웨어 상으로 엄청난 의미라고 한다.

어떤 기능이 추가, 변경되었고 삭제 되었는지 버전의 형식으로 브라우저에게 알려주는 것이 DOCTYPE이다.

<!DOCTYPE html>은 HTML5로 쓰인 문서라는 걸 나타낸다.

head와 body

최상위인 html 태그, html의 두 자식 head와 body

head는 사용자에게 직접적으로 나타나는 부분이 아니다. 대신 제목, 설명, 사용할 파일들의 위치, 스타일 등 문서 자체에 대한 정보(메타 데이터)를 담고 있다.

body는 사용자에게 직접적으로 보이는 부분이며 문서의 구조를 나타낸다.

🔑 meta, link

문서에 대한 정보, 문서와 연결된 파일의 정보

meta는 태그의 이름 그대로 문서의 메타 데이터를 보여주는 태그다.

위의 예시에서 charset은 문자 인코딩 방식

<meta http-equiv="X-UA-Compatible" content="IE=edge">은 IE 브라우저에서 가장 최신의 '표준' 문서 버전(IE는 버전마다 문서 표준이 달랐나 보다.)을 선택하라는 의미이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">는 뷰포트(사용자가 볼 수 있는 영역)을 설정하는 태그이다. 기기의 크기에 따라 너비를 맞추고 스케일링 값을 조절할 수 있다.

다음과 같이 viewport 설정 여부에 따라 화면이 다르게 나타난다.

link는 연결될 파일과 현재 문서의 관계를 말한다.

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

다음과 같이 CSS파일을 연결하거나 혹은 파비콘을 설정할 수 있다.

프론트엔드 개발자로 걸어가는 중입니다.

이전 포스트

MVC가 뭘까

다음 포스트

TIL 04.15(HTML)

0개의 댓글