index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/c491e52303.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="color">
<div class="colorBox"></div>
<span class="colorInfo">#709fb0</span>
</div>
<div class="heartAndDate">
<button class="heart">
<i class="fas fa-heart"></i>
<span>451</span>
</button>
<div class="date">3 days</div>
</div>
</div>
</body>
</html>style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
/* position: relative; */
width: 800px;
height: 900px;
margin: 50px auto;
background-color: #ebeff3;
border-radius: 30px;
}
.color {
position: relative;
width: 100%;
height: 60%;
}
.wrapper .color .colorBox {
background-color: #709fb0;
border-radius: 30px;
position: absolute;
top: 25px;
left: 40px;
right: 40px;
width: 720px;
height: 540px;
}
.wrapper .color .colorInfo {
background-color: #568291;
color: white;
font-size: 40px;
position: absolute;
bottom: 10px;
left: 40px;
padding: 10px 15px;
opacity: 0;
}
.colorBox:hover + .colorInfo {
opacity: 1;
}
.heartAndDate {
margin: 0 40px;
display: flex;
justify-content: space-between;
align-items: baseline;
height: 400px;
padding-top: 150px;
}
.heartAndDate .heart {
height: 100px;
border: 1px solid #b9bcbf;
border-radius: 15px;
font-size: 40px;
padding: 0 10px;
}
.heartAndDate .date {
height: 100px;
font-size: 40px;
padding: 0 10px;
}
.colorBox:hover + .colorInfo{ opacity: 1; }새롭게 배운 내용.
지금까지는 css로 특정 tag를 selector로 가져와서 그 tag에 대한 style이나 효과를 주었다면 특정 tag를 selector로 가져와서 그 tag가 아닌 다른 tag에 대한 style이나 효과를 주는 코드를 배움.
다중 조건 선택자
선택자1 선택자2 사이에 특정 기호를 넣어서 선택자1에 특정 효과가 주어졌을 떄(:hover와 같은) 선택자2를 선택할 수 있음.
1) 선택자1:hover > 선택자2{}
=== 선택자2는 선택자1의 바로 안에 있음.
2) 선택자1:hover + 선택자2{}
=== 선택자2가 선택자1 바로 옆에 붙어 있음.
3) 선택자1:hover 선택자2{}
=== 선택자2가 선택자1 안 어딘가에 있음.
4) 선택자1:hover ~ 선택자2{}
=== 선택자2가 선택자1의 형제 요소.
Junior FE Developer