Header 부분 코드 작성
Header 부분의 결과물은 이렇다.
width, height, background-color 값만 지정하면 쉽게 만들 수 있다.
저 Header 부분의 CSS 속성값은 width: 100%, height: 60px, background-color: lightblue 이다.
~/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">
Header
</div>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
일단 class명이 header인 div 태그 내에 'Header'란 텍스트를 입력해보자.
파일을 저장하고 실행시켜보면 브라우저에서는 단순히 Header란 텍스트만 내보낼 것이다.
여기서 CSS 속성을 입혀 위의 결과물대로 만들어보자.
필요한 CSS 속성값은 위에 나와있다.
~/Web-Practice/style.css
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
background-color: lightblue;
}
전체 CSS 코드는 이렇다.
Header 부분을 만들기 위해 class명이 header인 곳에 width, height, background-color값을 설정했다.
이로써 Header 부분이 완성되었다.
Last updated
Was this helpful?