-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
재질문 드립니다 ㅠㅠ
21.10.16 12:16 작성 조회수 96
1
감사합니다 !! 2번질문은 해결되었습니다 (--)(__) 꾸벅
1번 답변해주신것 적용해보았는데
캡처에서 보시는것처럼.. 컬러값을 다 다르게 적용했는데 결과물은 다 첫번째 색상으로 나오네요. ㅠㅠ
소스코드 첨부해드립니다.
/* reset CSS */
h1,h2,h3,h4,h5,h6 {
font-weight: 500;
margin-top: 0;
}
/* css */
body {
margin: 0;
font-family: 'Noto sans KR', sans-serif;
font-weight: 300;
background-color: rgb(255, 255, 255);
line-height: 1.6em;
font-size: 18px;
}
a {
text-decoration: none;
color: #333;
}
/* Dropdown Navigation */
.program {
/* display: flex;
justify-content: center; */
}
.program .inner {
width: 1150px;
margin: auto;
}
.inner h1 {
border-bottom: 1px solid #ddd;
padding-bottom: 30px;
margin-bottom: 30px;
}
.inner h2 {}
.items {
/* border: 1px solid red; */
display: flex;
gap: 40px;
}
.item {
flex: 1;
position: relative;
}
.item-list {
/* background-color: rgb(24, 97, 206); */
color: white;
text-align: center;
}
.item-list h4 {
/* top: 10px; //궁금 */
font-weight: 300;
padding-top: 20px;
}
.item-list:nth-of-type(1) {
background-color: rgb(24, 97, 206);
}
.item-list:nth-of-type(2) {
background-color: rgb(125, 96, 231);
}
.item-list:nth-of-type(3) {
background-color: rgb(50, 70, 161);
}
.btns {}
.btn {
display: inline-block;
width: 80px;
padding: 5px 8px;
margin-bottom: 30px;
background-color: rgb(31, 31, 31);
color: white;
border-radius: 3px;
}
.download {
width: 200px;
}
.item-desc {
position: absolute;
background-color: white;
display: none;
border: 1px solid #000;
padding: 5px 15px;
}
.item:nth-child(1) .item-desc {
border: 4px solid rgb(24, 97, 206);
}
.item:nth-child(2) .item-desc {
border: 4px solid rgb(125, 96, 231);
}
.item:nth-child(3) .item-desc {
border: 4px solid rgb(50, 70, 161);
}
.item-desc ul {
list-style: none;
margin: 0;
margin-bottom: 30px;
padding: 0;
background-color: #eee;
}
.item-desc ul li::before {
content: '-';
margin-right: 5px;
}
.item {
/* border: 1px solid #000; */
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>한글사이트 드롭다운 네비게이션</title>
<link rel="stylesheet" href="../css/style30.css">
<!-- jQuery CDN -->
<script src="https://code.jQuery.com/jquery-3.5.1.min.js"></script>
<script src="../js/jquery.scrollTo.min.js"></script>
</head>
<body>
<section class="program">
<div class="inner">
<h1>다운로드 전체보기</h1>
<h2>인기 다운로드</h2>
<div class="items">
<div class="item">
<div class="item-list">
<h4>한컴오피스 뷰어(Windows용)<br>(통합뷰어)</h4>
<div class="btns">
<a class="btn" href="#none">일반용</a>
<a class="btn" href="#none">기업용</a>
</div>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet cons
</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>adipisicing elit. Asperiores voluptas ipsa</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>avoluptas ipsa</li>
</ul>
</div>
</div>
<div class="item">
<div class="item-list">
<h4>한컴오피스 체험판<br>(30일간 사용가능)</h4>
<div class="btns">
<a class="btn download" href="#none">다운로드</a>
</div>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptas ipsa consectetur numquam.
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>adipisicing elit. Asperiores voluptas ipsa</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>adipisicing elit. Asperiores voluptas ipsa</li>
</ul>
</div>
</div>
<div class="item">
<div class="item-list">
<h4>한컴오피스 2020 가정 및 학생용<br>(제품키배송형)</h4>
<div class="btns">
<a class="btn download" href="#none">다운로드</a>
</div>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptas ipsa consectetur numquam.
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>adipisicing elit. Asperiores voluptas ipsa</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>adipisicing elit. Asperiores voluptas ipsa</li>
</ul>
</div>
</div>
</div>
<div class="temp">
<img src="../images/temp.png">
</div>
</div>
</section>
</body>
</html>
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.10.17
선택자 부분이 잘못되었어요.
아래처럼 .item이 여러개 있고 그리고 각가 .item 밑에 .item-list 가 있게 선택자를 만드셔야 합니다.
.item:nth-of-type(1) .item-list {
background-color: rgb(24, 97, 206);
}
.item:nth-of-type(2) .item-list {
background-color: rgb(125, 96, 231);
}
.item:nth-of-type(3) .item-list {
background-color: rgb(50, 70, 161);
}
답변 1