반응형
그랜드 부다페스트 호텔
깔끔한 영화 소개 모듈을 만들어 봅시다.
여러분은 <div class="info">에 네 가지만 해주시면 됩니다. 코드는 css 폴더에 style.css에 작성해주세요.
- 세로 길이를 220px로 설정해주세요.
- 3px 두께에 색은 #B72920인 테두리를 입혀주세요.
- 문구를 스크롤하면서 볼 수 있도록 overflow 속성을 설정해주세요.
- 글이 테두리에 너무 붙어 있지 않도록 15px의 여유 공간을 주세요.
<!DOCTYPE html>
<html>
<head>
<title>Overflow</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<div class="container">
<img src="grand_budapest_hotel.jpg">
<div class="info">
<h1>Grand Budapest Hotel</h1>
<p>Wes Anderson heads to Europe for the first time with this Indian Paintbrush production starring Saoirse Ronan, Ralph Fiennes, Bill Murray, and Jude Law. Gustav H., the famous concierge at a legendary hotel situated in the Alps during the 1930's becomes the center of a farcical whirlwind of suspicion when one of his institution's oldest and richest patrons turns up dead, and she suspiciously leaves him her most priceless work of art -- a Renaissance painting of a boy with an apple. Infuriated that she left anything of value to anyone else, the woman's greedy and nefarious heir uses all manner of underhanded and illegal tactics to pin her death on Gustav and to silence anyone who questions his objective of inheriting every penny of her estate, leaving Gustav's trusted lobby boy Zero to clear Gustav's name and prove that the grand lady's killer is none other than her own son. ~ Jeremy Wheeler, Rovi</p>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
}
.container {
width: 500px;
height: 500px;
}
.info {
height: 220px;
padding: 15px;
overflow: scroll;
border: 3px solid #B72920;
}
img {
width: 100%;
display: block;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.06 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.05 |
| [웹 퍼블리싱] 01.HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |
| [웹 퍼블리싱] 01. HTML/CSS 시작하기 (0) | 2021.02.04 |