재질문 드립니다 ㅠㅠ
158
작성한 질문수 11
감사합니다 !! 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>답변 1
0
선택자 부분이 잘못되었어요.
아래처럼 .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);
}
pointer-event:none;
1
73
1
실전 반응형 웹사이트 이미지 다운
1
77
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
64
2
목소리 좀 키워주세요.
1
131
2
PDF파일은 어디있나요?
1
181
2
실전 반응형 웹사이트
1
155
2
강의 내용 pdf가 제공되나요?
1
171
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
217
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
191
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
386
2
scss에 active 적용하는 방법
1
319
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1182
2
실전 넷플릭스 6 footer부분
1
267
2
.dark 적용 하는 법
1
210
1
JavaScript & jQuery - 검색창 확장하기(3)에서
1
303
2
포트폴리오 CSS Grid 반응형 레이아웃에서
1
292
1
폰트어썸 4.7 아이콘
2
475
1
넷플릭스 공식사이트 수업 header
1
233
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
553
2
loginForm input type=email, password 위치 css 오류
2
415
1
이미지 전환 후 잔상 효과
1
1308
4
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
295
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
487
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
417
1