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
