퀴즈1~2
1. 12/quiz-1.html에는 이미지가 삽입되어 있습니다. 다음 조건에 맞게 이미지 위로 마우스 포인터를 올려놓았을 때의 스타일을 정의하세요.
조건
1. 웹 문서에는 여러 이미지가 있을 수 있으므로 이미지에 적용된 class 속성 값을 확인하고
그 이름에 맞는 클래스 선택자 스타일을 작성합니다
2. 이미지 위로 마우스 포인터를 올려놓았을 때 검정색 5px짜리 실선이 표시되도록 합니다.<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
</head>
<body>
<p>이미지 위로 마우스 포인터를 올려보세요</p>
<img src="images/tangerines.jpg" class="top-img">
</body>
</html>
<!DOCTYPE HTML>
<html lang="ko">
<style>
[class="top-img"]:hover {
border: 5px solid black;
}
</style>
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
</head>
<body>
<p>이미지 위로 마우스 포인터를 올려보세요</p>
<img src="images/tangerines.jpg" class="top-img">
</body>
</html>
2. 12/quiz-2.html문서에 있는 내비게이션 링크에는 아무 스타일도 적용되어 있지 않기 때문에 파란색 밑줄이 있는 텍스트로 표시됩니다. 가상 클래스 선택자르 ㄹ사용해 다음 조건에 맞게 링크 스타일을 수정하세요
조건
1. 웹 문서에는 내비게이션 링크 외에도 다른 링크가 있을 수 있으므로 내비게이션 요소에 있는 링크에만 적용합니다
(내비게이션의 하위 선택자로 적용해야 합니다.)
2. 링크의 글자 색을 '검정(black)'으로 지정하고 밑줄을 없앱니다.
3. 방문했던 링크의 글자 색을 원래 링크 색상인 '검정(black)'으로 지정합니다.
4. 링크를 클릭하는 순간의 글자 색을 '파랑(blue)'으로 지정합니다.<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
<style>
.main-menu {
margin:50px auto;
height:60px;
border:1px solid black;
}
.main-menu ul {
margin:0;
list-style:none;
}
.main-menu ul li{
display:inline-block;
padding:10px 30px;
line-height:40px;
}
</style>
</head>
<body>
<nav class="main-menu">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
<style>
.main-menu {
margin:50px auto;
height:60px;
border:1px solid black;
}
.main-menu ul {
margin:0;
list-style:none;
}
.main-menu ul li{
display:inline-block;
padding:10px 30px;
line-height:40px;
}
.main-menu ul li :link, :visited, :hover {
color: black;
text-decoration: none;
}
.main-menu ul li :active {
color: blue;
}
</style>
</head>
<body>
<nav class="main-menu">
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</body>
</html>
'HTML > 다재다능한 CSS3 선택자' 카테고리의 다른 글
| 다재다능한CSS3선택자 (0) | 2021.08.15 |
|---|
