반응형
우표 붙이기
Absolute 포지셔닝 개념을 이용해서 우표와 주소를 올바른 곳에 위치해주세요.
<!DOCTYPE html>
<html>
<head>
<title>우표 붙이기</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<div class="env-div">
<img src="envelope.png" width="500">
<img src="stamp.png" width="50" class="stamp">
<div class="address">
siri Kim<br>
1234 ENTP #101
</div>
</div>
</body>
</html>.env-div {
width: 500px;
height: 232px;
position: relative;
}
.address {
font-family: cursive;
position: absolute;
left: 30px;
bottom: 30px;
}
.stamp {
position: absolute;
right: 30px;
top: 30px;
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |