반응형
해변의 몽숭이
Relative 포지셔닝 개념을 이용해서 몽숭이를 해변가에 위치시켜주세요.
몽숭이를 원래 위치에서 위로 100px, 오른쪽으로 200px 이동시키면 됩니다!
코드는 css 폴더에 styles.css에 작성해주세요.
<!DOCTYPE html>
<html>
<head>
<title>해변의 몽숭이</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<img src="beach.png" width="500">
<img src="mongsoong.png" width="100" class="mongsoong">
</body>
</html>img {
display: block;
margin: 0 auto;
}
.mongsoong {
position: relative;
bottom : 100px;
left: 200px;
}
본 내용은 코드잇의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'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 |