728x90
11. 구조 가상 클래스와 가상 클래스를 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.
2. 메뉴6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 메뉴 전체 너비를 610px에서 605px로 줄인다.
3. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색을 #555로, 글자색은 #fff로 바뀐다.
4. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색은 #b30000로, 글자색은 #fff로 바꾼다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 11</title>
<style>
* {
box-sizing: border-box;
}
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:610px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:#dadada;
}
.top-menu li {
float:left;
border-right:1px solid #929292;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
// 코드를 작성하세요
</style>
</head>
<body>
<nav>
<ul class="top-menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
</nav>
</body>
</html>결과 화면
A. 해설
1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.
--> 구조 가상 클래스 li:last-child 로 border-right 속성을 사용하여 지정한다.
2. 메뉴6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 메뉴 전체 너비를 610px에서 605px로 줄인다.
--> .top-menu 클래스에서 605px로 수정한다.
3. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색을 #555로, 글자색은 #fff로 바뀐다.
--> 가상 클래스 :not 으로 구조 가상 클래스 li:last-child 를 사용하여 메뉴6을 제외하고, 가상 클래스 a:hover 로 지정해준다.
4. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색은 #b30000로, 글자색은 #fff로 바꾼다.
--> 구조 가상 클래스 li:last-child 와 가상 클래스 a:hover 로 지정해준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 11</title>
<style>
* {
box-sizing: border-box;
}
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:605px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:#dadada;
}
.top-menu li {
float:left;
border-right:1px solid #929292;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
.top-menu li:last-child {
border-right:none;
}
.top-menu li:not(:last-child) a:hover {
background-color:#555;
color:#fff;
}
.top-menu li:last-child a:hover {
background-color:#b30000;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul class="top-menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
</nav>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 13. 변형함수와 애니메이션의 속성을 사용한 문제 (0) | 2022.07.14 |
|---|---|
| 12. 트랜지션의 속성을 사용한 문제 (0) | 2022.07.14 |
| 10. 구조 가상 클래스를 사용한 문제 (0) | 2022.07.04 |
| 09. 배경 이미지 속성을 사용한 문제 II (0) | 2022.05.27 |
| 08. 배경 이미지 속성을 사용한 문제 I (0) | 2022.05.27 |