개발자 99% 커뮤니티에서 수다 떨어요!
안녕하세요, 챌린지 과제 중 질문이 있습니다.
CSS 코드에서 배경의 색을 지정하는 부분에서,
첫번째 section의 첫번째 두번째 div의 색깔 지정,
두번째 section의 첫번째 두번째 div의 색깔 지정,
을 각각 수행하였는데, 어떤 이유에서인지
Burlywood, thistle이 위 div에 출력되고
아래 div엔 아무것도 출력되지 않습니다.
제가 해본 것: section 쪽의 nth-child 를 이리저리 변경해봤는데, 이상하게도 두 section의 위치를 바꾸면 잘 출력이 됩니다. 즉 두번째 section을 1st child로, 첫번째 section을 2nd child로 인식하는 것 같습니다.
나머지 서식들은 다 해결하였고 이 색 지정 부분만 남은 상태입니다.
어디가, 왜 잘못된 것일까요? 두시간째 고민하다가 답이 나오지 않아 질문 올립니다.
(html 코드)
<!DOCTYPE html>
<html>
<head>
<link href="assignment3.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
</head>
<body>
<h1>The Best Colors</h1>
<section class="section">
<div class="section__color">
<div class="section__color__bg"></div>
<div class="section__color__info">
<h3>Tomato</h3>
<h4>#FF6347</h4>
</div>
</div>
<div class="section__color">
<div class="section__color__bg"></div>
<div class="section__color__info">
<h3>Teal</h3>
<h4>#008080</h4>
</div>
</div>
</section>
<section class="section">
<div class="section__color">
<div class="section__color__bg"></div>
<div class="section__color__info">
<h3>Burlywood</h3>
<h4>#DEB887</h4>
</div>
</div>
<div class="section__color">
<div class="section__color__bg"></div>
<div class="section__color__info">
<h3>Thistle</h3>
<h4>#D7BFD7</h4>
</div>
</div>
</section>
</body>
</html>
(CSS 코드)
body {
background-color: whitesmoke;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
h1 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-weight: bold;
}
.section {
width: 30%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.section__color {
background-color: white;
width: 50%;
padding: 10px;
position: relative;
}
.section__color__bg {
height: 400px;
border: 5px white solid;
}
.section__color__info {
width: 95%;
position: absolute;
background-color: white;
margin: 10px 0px;
padding-left: 4px;
top: 20px;
}
.section:nth-child(1) div:nth-child(1) .section__color__bg {
background-color: tomato;
}
.section:nth-child(1) div:nth-child(2) .section__color__bg {
background-color: teal;
}
.section:nth-child(2) div:nth-child(1) .section__color__bg {
background-color: burlywood;
}
.section:nth-child(2) div:nth-child(2) .section__color__bg {
background-color: thistle;
}