HTML 기본 틀 작성 및 CSS 연결

HTML 기본 틀 작성

HTML 파일을 만들게 되면 대부분 기본적인 틀이 완성되어 나오지만

몇몇 프로그램은 빈 상태로 파일이 만들어지기도 한다.

따라서 우리는 HTML 파일에 기본적인 틀을 작성해 볼 것이다.

~/Web-Practice/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

기본적인 틀은 이렇다.

<head></head> 부분에는 주로 meta, title, link 등의 태그들이 존재한다.

<body></body> 부분에는 웹 사이트에서 보여지는 내용이 존재한다.

우리는 대부분의 내용을 body 태그 안에 작성할 것이다.

~/Web-Practice/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Web-Practice</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파일에서 연결하는 방법을 배워볼 것이다.

~/Web-Practice/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Web-Practice</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 파일을 link 시켜주는 역할을 하게 된다.

rel 속성이란 링크된 파일과의 관계를 지정해주는 역할을 한다. 사용자에게 효과가 있지는 않지만

브라우저나 검색엔진에게 링크 관계에 대한 정보를 주어 사용자의 요청을 더 정확하게 대응할 수 있게 해준다.

href 속성에는 파일명이 오게 된다. 이 속성값으로는 CSS 파일의 상대 경로를 적어주면 된다.

상대 경로란?
현재 폴더를 기준으로 파일의 위치를 나타낸 경로이다.
./ -> 현재 디렉토리 ../ -> 상위 디렉토리
ex) Web-Practice
       ㄴ html
           ㄴ index.html
       ㄴ style.css
index.html 에서 css 파일을 연결하기 위해 href 속성에
"../style.css" 라고 적어줘야 한다.

우리의 경우에는 CSS 파일이 같은 폴더에 존재하고 있기 때문에 "style.css" 라고 적어준 것이다.

~/Web-Practice/style.css

* {
    margin: 0;
    padding: 0;
}

CSS 파일에 이 코드를 작성해보자.

이 코드를 작성하는 이유는 기본적으로 margin값과 padding 값이 정해져 있는데,

이 때문에 div의 width값을 100%로 설정해줘도 브라우저 좌우 끝부분에 여백이 존재하게 된다.

이로써 기본적인 설정이 끝났다. 다음 페이지부터는 본격적으로 레이아웃 구성을 시작할 것이다.

PreviousHTML, CSS 파일 만들기 Next3. Header 구성

Last updated 5 years ago