728x90
07. 레이아웃 속성을 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(마우스 포인터를 올렸을 때 글자색과 배경색이 바뀌는 CSS소스는 미리 작성되어 있습니다.)
1. ul 요소의 불릿을 없앤다.
2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다.
3. 링크 요소인 a는 display 속성을 block으로 지정하고, 패딩을 10px, 20px로 지정한다. 배경색은 회색(#CCC)으로 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 7</title>
<style>
// 코드를 작성하세요
a:link, a:visited {
color:black;
text-decoration: none;
}
a:hover {
background-color:#000;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</body>
</html>결과 화면
A. 해설
1. ul 요소의 불릿을 없앤다.
--> ul 태그에 list-style 속성으로 지정한다.
2. 목록의 각 항목인 li 요소는 왼쪽으로 플로팅한다.
--> li 태그에 float 속성으로 지정한다.
3. 링크 요소인 a는 display속성을 block으로 지정하고, 패딩을 10px, 20px로 지정한다. 배경색은 회색(#CCC)으로 지정한다.
--> a 태그에 display, padding, background-color 속성으로 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 7</title>
<style>
ul { list-style: none; }
ul li { float:left; }
a {
display:block;
padding:10px 20px;
background-color:#ccc;
}
a:link, a:visited {
color:black;
text-decoration: none;
}
a:hover {
background-color:#000;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 09. 배경 이미지 속성을 사용한 문제 II (0) | 2022.05.27 |
|---|---|
| 08. 배경 이미지 속성을 사용한 문제 I (0) | 2022.05.27 |
| 06. 레이아웃 속성과 여백 속성을 사용한 문제 (0) | 2022.05.13 |
| 05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0) | 2022.05.13 |
| 04. 글자 속성과 텍스트 스타일 속성을 사용한 문제 (0) | 2022.04.11 |