vscode에서 html 파일을 만들고 "!"입력 후 tab을 누르면 html의 템플릿이 자동으로 완성됩니다.
Emmet이라는 녀석의 도움을 받지요.
오늘은 자동으로 완성되는 HTML 템플릿을 살펴보려 합니다.
HTML 템플릿 살펴보기
다음은 자동으로 완성된 HTML 템플릿입니다.
설명을 위해 몇가지 태그를 덧붙였습니다.
<!DOCTYPE html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trans … ”>
<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>
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</head>
<body>
</body>
</html>위 태그들을 하나하나 살펴보겠습니다.
!DOCTYPE html
문서의 HTML 버전을 지정하는 태그입니다.
현재 웹 표준으로 지정되어 있는 버전은 HTML5이기 때문에 별다른 값을 지정해주지 않아도 HTML5로 지정됩니다.
하지만 다른 HTML 버전으로 사이트를 만들고 싶다면 어떻게 해야 할까요.
XHTML 버전으로 만들 때를 예로 들어보겠습니다.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Trans … ”>혹시 다른 사이트에서 개발자 도구를 열었을 때 위와 같은 도큐먼트 타입을 발견하신다면, 해당 사이트는 XHTML 버전으로 만들어졌고 운영되는 사이트라고 생각하시면 될 것 같습니다.
html
문서 전체를 의미하는 태그입니다.
화면에 보이지 않는 문서에 대한 정보, 화면에 보이는 문서의 구성들을 모두 포함합니다.
head
문서의 정보를 나타냅니다.
실제 viewport에서 보이지 않는 문서의 정보들을 담습니다.
문서의 제목, 문서에 대한 설명, 참조할 파일의 종류와 위치, 스타일 등을 head 태그에 담습니다.
meta
문서의 개별 정보를 나타냅니다.
meta 태그는 문서에 대한 여러 정보를 검색엔진이나 브라우저에게 제공합니다. 다음과 같은 태그들이 있습니다.
<!-- 문자 인코딩 방식을 의미합니다. -->
<meta charset="UTF-8">
<!-- 문서의 호환성을 의미합니다. 오래된 버전의 브라우저까지 지원하기 위한 태그입니다. -->
<!-- "IE=edge"는 IE 브라우저에서 각 버전 중 가장 최신 버전을 사용한다는 문서 모드입니다. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- name: 정보의 종류, content: 정보의 값 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- width=device-width : 기기가 가지고 있는 가로 사이즈에 맞춰서 출력한다는 의미입니다. -->
<!-- initial-scale=1.0 : 처음 출력 시 1.0배로 출력한다는 의미입니다. -->
<!-- 주로 모바일을 대응할 때 필요로 하는 정보들입니다. -->title
HTML 문서의 제목을 정의합니다. 웹 브라우저의 탭에 표시되는 내용이죠.
<title>Hello Banny@</title>title을 위와 같이 지정한다면? 브라우저의 탭에 아래와 같이 나오겠죠?
link
외부 문서를 가져와 연결할 때 사용됩니다. 대부분은 css 파일을 불러올 때 사용됩니다.
필수 속성으로는 rel, href의 두 가지 속성이 있습니다.
<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">rel은 relationship의 약어로, html 파일과 어떤 관계를 갖고 있는지 명시해주어야 합니다.
href는 파일의 경로를 의미하며, 해당 경로에 파일이 존재하면 그 파일을 불러옵니다.
또한 관계를 icon으로 설정함으로써, 브라우저 탭에서 html 문서의 제목과 함께 보여지는 대표 아이콘을 설정할 수도 있습니다.
페이지의 대표 아이콘을 Favicon(Favorite + icon)이라고 부릅니다.
HTML Favicon을 적용할 때는 파일의 이름을 favicon이라고 지정하는 것을 권장합니다.
css 초기화
html 파일을 새로 생성했을시, 브라우저에서 기본적으로 지정한 css 속성들이 있습니다.
다음과 같은데요,
보통 프로젝트 진행 시 외부 css의 영향을 받지 않기 위해 css를 초기화시키고 진행한다고 합니다.
여러 방법이 있겠지만, 외부 초기화용 css를 받아와서 작업해보겠습니다.
먼저 여기에 접속해서 reset.css 파일의 HTML 코드를 복사합니다.
아래의 사진을 참고하면 되겠습니다.
그리고 복사한 코드를 해당 html 파일에 다음과 같이 붙여넣기를 해주면 끝!!! 입니다.
그러면 브라우저에서 지원되는 모든 css들이 초기화됩니다.
이제 원하시는 대로 꾸미시면 됩니다!!
script
자바스크립트 파일을 읽어올 때 사용됩니다.
src 속성에 파일의 경로를 지정합니다. 경로에 해당 파일이 있으면 파일을 읽어옵니다.
<script src="./main.js"></script>body
눈에 보이는 페이지의 구조를 나타냅니다.
로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등 화면에 보여지는 모든 태그들이 body 태그에 들어갑니다.
