HRD_훈련/실습
[CSS] 선택자 실습 (29일차)
리드미.
2023. 6. 26. 22:52
728x90
반응형
문제 1
- 가상 클래스를 사용하여 첫 번째 이미지를 선택한다.
- 첫 번째 이미지 스타일은 테두리 색상을 빨간색, 두께를 2px로 지정한다.
▶ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
img {
margin-right:50px;
border:1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
}
img:nth-child(1) {
border:2px solid red;
}
</style>
</head>
<body>
<img src="../img/1.jpg" alt="">
<img src="../img/2.jpg" alt="">
<img src="../img/3.jpg" alt="">
</body>
</html>
문제 2
- 메뉴6의 오른쪽에 있는 테두리를 없앤다.
- 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색은 검은색, 글자색은 흰색으로 변경한다.
- 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경은 빨간색으로, 글자색을 흰색으로 변경한다.
▶ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:606px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:#dadada;
}
.top-menu li {
float:left;
border:1px solid #929292;
border-right: none;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:inline-block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
li:last-child {
list-style-type: none;
}
.top-menu li a:hover {
background-color: black;
color: white;
}
.top-menu li:last-child a:hover {
background-color: red;
color: white;
}
</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>
728x90
반응형