고정 헤더 영역
상세 컨텐츠
본문
#container { /* 내용 전체를 감싸는 영역 */
border:1px solid blue;
padding-left: 60px;
width: 600px; /* */
margin: 20px auto;
}
h1 {
display: inline-block /* 글자 부분에만 배경 색이 채워지도록 지정 */;
background-color: #0404aa /* */;
color: #fff;
}
.accent {
font-weight: bold;
color: red;
}
body {font-family: "굴림", 돋움, 맑은 고딕}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탐라국 입춘굿</title>
<link rel="stylesheet" href="css/abc.css">
</head>
<body>
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>제주도의 문화축제 중에서 유일하게 <span class="accent">탐라 시대부터 내려온 축제</span>이다.
</p>
<p>제주에서 입춘은 새철<sup>(제주어, 샛절)</sup>드는 날이라 한다<br>하늘의 1만 8,000 신이 지상으로 내려와 새해 일들을 시작하는 때이다.
</p>
</div>
</body>
</html>
실행결과
'풀스텍과정' 카테고리의 다른 글
| 41일차학습일지_CSS (0) | 2024.07.08 |
|---|---|
| 40일차 학습일지_CSS (0) | 2024.07.05 |
| 38일차 학습일지_HTML (0) | 2024.07.03 |
| 37일차 학습일지_HTML (0) | 2024.07.03 |
| 36일차학습_HTML (0) | 2024.07.01 |
