💫 position 속성
.box {
position : static; /* 기준 X (좌표적용 X) */
position : relative; /* 내 원래 위치 기준 */
position : absolute; /* 부모 중 position : relative를 가지고 있는 부모 기준 */
position : fixed; /* 브라우저 창 기준 (viewport) */
}
좌표 속성을 적용할 기준점이 여기에요~! 라고 지정해주는 역할
💫 좌표 속성
.box {
top : 20px;
left : 30%;
}
top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경 가능
💫 position : absolute 를 적용한 요소 가운데 정렬
.button {
position : absolute;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
width : 적절히
}
💫 오늘의 숙제 : 배경 위에 회색 박스가 겹치게 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
<link href="css/font.css" rel="stylesheet">
</head>
<body>
<div class="main-background">
<h4 class="main-title">Buy Our Shoes</h4>
<p>예쁜 신발 사러 오세요💕</p>
<button>보러가기</button>
<div class="background"></div>
</div>
</body>
</html>
.main-background{
width: 100%;
height: 500px;
background-image: url(../img/shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 1px;
position: relative;
}
.main-title{
color: white;
font-size: 40px;
text-align: center;
font-family: 'MeongiW';
}
.main-background p{
color: white;
font-size: 20px;
text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black;
text-align: center;
font-family: 'Oneprettynight';
}
.main-background button{
width: 100px;
font-size: 500;
font-weight: 600;
text-align: center;
line-height: 50px;
color: #FFF;
border-radius: 5px;
transition: all 0.2s;
background: #b3aaee;
box-shadow: 0px 5px 0px 0px #68628a;
border: none;
font-family: 'Oneprettynight';
margin-left : 47%;
}
.main-background button:hover {
margin-top: 5px;
margin-bottom: 5px;
box-shadow: 0px 0px 0px 0px #68628a;
}
.background{
width: 50%;
height: 300px;
background-color: gray;
position: absolute;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
bottom: -100px;
}
⭐ 어려웠던 것들
버튼을 hover 를 줘서 마우스를 버튼에 올릴 때마다 회색 div가 같이 내려갔었다
메인 div에 position : relative 를 해주고, 회색 div에 position : absolute 를 해서 회색 div를 띄워서 같이 내려가지 않도록 만들었다.