* position
position: static; - 기본형, 원래 있어야할 위치
position: relative;
top: 30px;
원래 있어야할 자리 위에 30px 간격이 있게끔 함
*margin과 position의 차이점
margin - 문장 다같이 이동하는 느낌
position - 레이아웃 효과를 주는 것처럼 position한 문장만 따로 수정되게끔 함
* 해변의 몽숭이
↓html
<!DOCTYPE html>
<html>
<head>
<title>해변의 몽숭이</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img src="images/beach.png" width="500">
<img src="images/mongsoong.png" width="100" class="mongsoong">
</body>
</html>↓css
img {
display: block;
margin: 0 auto;
}
.mongsoong {
position: relative;
bottom: 100px;
left: 200px;
}↓실행결과
https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/585/index.html
해변의 몽숭이
bakey-api.codeit.kr
* 명언
↓html
<!DOCTYPE html>
<html>
<head>
<title>명언</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/nanumpenscript.css" rel="stylesheet">
</head>
<body>
<div class="quote">
<span class="qmark open-qmark">"</span>유능한 예술가는 모방하고, 위대한 예술가는 훔친다.<span class="qmark close-qmark">"</span>
<div class="figure">- 파블로 피카소</div>
</div>
</body>
</html>↓css
.quote {
font-size: 32px;
line-height: 32px;
text-align: center;
font-family: 'Nanum Pen Script', cursive;
margin-top: 75px;
}
.figure {
margin-top: 50px;
}
.qmark {
font-size: 300%;
position: relative;
}
.open-qmark {
margin-right: 15px;
top: 20px;
}
.close-qmark {
margin-left: 15px;
top: 80px;
}↓실행결과
https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/570/index.html
명언
bakey-api.codeit.kr
* fixed 포지션
position: fix; - 브라우저 기준, 그래서 스크롤해도 같은 자리에 있음
relative는 원래 있던 자리가 뻥 뚫려있는데,
fix는 원래 있던 곳이 사라지고 주황문장은 아예 다른 문장이었던 것 마냥 빠져버림!
fix 포지션은 내비게이션 바 쓰임
* absolute 포지션
* red div 안 green div 안 blue div
그래서 absolute 포지션이 있는 blue div는 조상 요소인 green div를 기준으로 위치를 잡는다!
ex) green div에는 포지션이 없다고 가정하면, blue div 의 포지션이 absolute 일 때, red div에는 포지션이 있기 때문에 red div 기준으로 포지션을 잡게된다!
* 우표 붙이기
↓html
<!DOCTYPE html>
<html>
<head>
<title>우표 붙이기</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="env-div">
<img src="images/envelope.png" width="500">
<img src="images/stamp.png" width="50" class="stamp">
<div class="address">
Sineui Kim<br>
1234 Codeit #101
</div>
</div>
</body>
</html>↓css
.env-div {
width: 500px;
height: 232px;
position: relative;
}
.address {
font-family: cursive;
position: absolute;
bottom: 30px;
left: 30px;
}
.stamp {
position: absolute;
right: 30px;
top: 30px
}↓실행결과
https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf76e1b1/lessons/567/index.html
우표 붙이기
bakey-api.codeit.kr
'coding study' 카테고리의 다른 글
| 코드잇 - 코딩의 민족 그리드 (0) | 2021.08.09 |
|---|---|
| 코드잇 코딩캠프 7기 (6/23 ~ ) - 28일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 신문광고, 그리드 연습) (0) | 2021.07.20 |
| 코드잇 코딩캠프 7기 (6/23 ~ ) - 24일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 이미지버튼, 내비게이션 바 로고) (0) | 2021.07.16 |
| 코드잇 코딩캠프 7기 ( 6/23 ~ ) - 23일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - CSS 최적화) (0) | 2021.07.15 |
| 코드잇 코딩캠프 7기 ( 6/23 ~ ) - 22일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 마우스오버) (0) | 2021.07.14 |
