1) html로 body의 구조 잡기
2) head에 style이라는 태그 만들어 그 안에서 디자인 설정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
<title>고양이의 일상</title>
<style>
h1 {
color: #f00;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>고양이의 하루</h1>
<p>계속 잠을 잡니다.</p>
</body>
</html>
body 안에 작성해도 적용은 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
<title>고양이의 일상</title>
</head>
<body>
<h1 style="color: #f00;">고양이의 하루</h1>
<p style="font-size: 18px;">계속 잠을 잡니다.</p>
</body>
</html>
3) 따로 .css 파일을 만들어서 스타일 작성하고 html 파일에 상대경로로 적용시키기
@charset "utf-8" body { background-color: #fffeee; } h1 { color: #0bd; } p { font-size: 20px; }
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">
<title>고양이의 일상</title>
<link rel="stylesheet" href="ex04.css">
</head>
<body>
<h1>고양이의 하루</h1>
<p>계속 잠을 잡니다.</p>
</body>
</html>
Share article