<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_다양한 선택자와 스타일</title>
<style>
body{
font-family: /*batang*/ gothic;
}
header h1{
color: #3D69E5;
}
div div{
border: 3px dotted skyblue;
border-style: dashed;
border-color: olivedrab;
}
h1{
border: 1px solid red;
width: 200px;
margin: 0 auto;
/* 컨텐츠 요소를 센터로 배치하고 싶을때*/
text-align: center;
/* 텍스트를 센터로 정렬*/
}
h2, h3{
text-align: center;
cursor: pointer;
background-color: #60DB45;
}
h1 strong{
color: red;
}
#supervisor {
text-decoration: underline;
text-decoration-color: purple;
font-size: 20px;
/* font-weight: lighter;*/
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>주말에 보고싶은 영화</h1>
</header>
<div>
<h2>소울메이트
<h1 id="supervisor">감독 : 민용근</h1>
</h2>
<h3>출연진 : 김다미, 전소니, 변우석, 장혜진 등</h3>
<h1>관람객 평점 <strong>☆☆☆</strong></h1>
<div>
<h3>리뷰한줄</h3>
<ul>
<li>"너는 내가 되고 나도 네가 될 수 있었던 그 시간들"</li>
<li>"큰 사건은 없지만 두 배우의 연기만므로도 몰입감이 높다"</li>
<li>"이야기를 그냥 자연스럽게 흘러가게 하는 게 더 나았을 듯그래도 두 주연의 연기는 <strong>참</strong> 좋다"</li>
</ul>
</div>
</div>
</body>
</html>
'CSS, Javascript, jQuery > code' 카테고리의 다른 글
| stabucks sub page Ex (0) | 2023.03.30 |
|---|---|
| 다양한 커서의 활용 (0) | 2023.03.30 |
| favicon의 활용 (0) | 2023.03.30 |
| 외부스타일 시트의 적용 (0) | 2023.03.30 |
| css의 다양한 선언방식 (0) | 2023.03.30 |