반응형
- Draft date: 2022.09.12.
- Recentyle Update: 2022.10.10.
- 강의명: 노마드코더 코코아 클론코딩
- 챌린지명: 노마드코더 코코아 클론 챌린지
- 최종 버전 보기
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Colors that brands use</title>
<link rel="stylesheet" href="css/styles.css" class="css" />
<link rel="stylesheet" href="css/screen/the-best-color.css" class="css" />
</head>
<body>
<h1>Colors that brands use</h1>
<main>
<div class="color">
<div class="color__background"></div>
<div>
<span class="color__title">네이버 초록</span>
<span class="color__code">#16CE5F</span>
</div>
</div>
<div class="color">
<div class="color__background"></div>
<div>
<span class="color__title">카카오톡 노랑</span>
<span class="color__code">#FAE100</span>
</div>
</div>
<div class="color">
<div class="color__background"></div>
<div>
<span class="color__title">배달의민족 민트</span>
<span class="color__code">#2AC1BC</span>
</div>
</div>
<div class="color">
<div class="color__background"></div>
<div>
<span class="color__title">당근마켓 주황</span>
<span class="color__code">#FF7E36</span>
</div>
</div>
</main>
</body>
</html>
[CSS]
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 2.4em;
font-weight: 700;
margin-top: 15px;
margin-bottom: 30px;
}
main {
display: flex;
justify-content: space-between;
align-items: space-between;
flex-flow: wrap;
}
@media screen and (max-width: 700px) {
main {
width: 90%;
height: 80%;
}
.color {
width: 45%;
height: 45%;
}
}
@media screen and (700px <width) {
main {
width: 500px;
height: 900px;
}
.color {
width: 220px;
height: 380px;
}
}
.color {
position: relative;
}
.color__background {
width: 100%;
height: 100%;
border: 5px solid white;
}
.color:first-child > div {
background-color: #16ce5f;
}
.color:nth-child(2) > div {
background-color: #fae100;
}
.color:nth-child(3) > div {
background-color: #2ac1bc;
}
.color:last-child > div {
background-color: #ff7e36;
}
.color div:last-child {
width: 100%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: absolute;
top: 10%;
right: 0px;
left: 0px;
background-color: white;
border: 5px solid white;
}
.color__title {
padding-left: 5px;
box-sizing: border-box;
font-size: 1.5em;
font-weight: 600;
}
.color__code {
padding-left: 5px;
box-sizing: border-box;
font-size: 1em;
font-weight: 600;
}
728x90
반응형