HTML의 기본구조
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시한다.
<html> : HTML 문서의 루트(root) 요소를 정의한다.
<head> : HTML 문서의 메타데이터(metadata)를 정의한다.
-
메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
-
이러한 메타데이터는
<title>,<style>,<meta>,<link>,<script>,<base>태그 등을 이용하여 표현할 수 있다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.
- 웹 브라우저의 툴바(toolbar)에 표시된다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
- 검색 엔진의 결과 페이지에 제목으로 표시된다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분
<h1> : 대표 제목. 검색의 대상!
<h2> ~ <h6> : 마찬가지로 제목(heading)을 나타낸다.
<p> : 단락(paragraph)을 나타낸다.
HTML 틀!
index.html을 작성하고 싶을 때 여기로 와서 확인하자!
<!DOCTYPE html>
<html lang="ko"> //language = "korean"ㅇㅣ라는 뜻!
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>기본적인 틀은 이렇게 볼 수 있고,
앞서 말했 듯<head></head> 부분에는 주로 meta, title, link 등의 태그들이 존재한다.
<body></body> 부분에는 웹 사이트에서 보여지는 내용이 존재한다.
우리는 대부분의 내용을 body 태그 안에 작성할 것이다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>daydreamplace</title>
</head>
<body>
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>body 태그 내에 3개의 div 태그를 넣었다.
크게 Header, Container, Footer로 분류하여 class 값으로 넣어주었다.
이로써 프로젝트를 진행하기 위한 HTML 파일의 기본 틀을 작성을 끝냈다.
지금부터는 HTML 파일에 외부 CSS 파일을 link 하는 방법을 알아보자.
CSS 파일 연결
HTML 파일에 CSS를 입히는 방법은 크게 2가지로 나뉜다.
첫 번째 방법은 HTML 파일에 <style></style>을 이용하여 넣는 방법이고,
두 번째 방법은 외부에 CSS 파일을 따로 만든 후 이를 link 하는 방법이 있다.
첫 번째 방법은 장점은 적용할 스타일이 적으면 내부에 작성하여
한 파일 내에서 HTML과, CSS 코드를 관리할 수 있다는 것이다.
하지만 규모가 커지면 CSS 코드가 엄청나게 길어져 유지보수하기가 힘들어진다는 단점이 존재한다.
간단한 레이아웃을 구성하는데에도 CSS 코드 수가 보통 100줄을 넘어간다.
따라서 우리는 파일을 따로 만든 후 HTML파일에서 연결하는 방법을 배워볼 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>daydreamplace</title>
<link rel="stylesheet" href="style.css">//새로 생겼다!
</head>
<body>
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>새로 생긴 <link rel="stylesheet" href="style.css"> 코드가 외부의 css파일을 링크시켜주는 역할을 하게 된다.
여기서 rel 속성은 링크된 파일과의 관계를 지정해주는 역할을 한다. 사용자에게 효과가 있지는 않지만 브라우저나 검색엔진에게 링크 관계에 대한 정보를 주어 사용자의 요청을 더 정확하게 대응할 수 있게 해준다.
href 속성에는 파일명이 오게 된다. 이 속성값으로는 css파일 상대 경로를 적어주면 된다!
