728x90
01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 순서 없는 목록의 불릿을 없앤다.
2. 각 항목의 줄 간격을 글자 크기의 2배로 지정한다.
3. 각 항목에서 진하게 표시된 부분의 글자색을 #ad3000으로 수정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
font-weight:700;
font-size:larger;
}
// 코드를 작성하세요
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>결과 화면
A. 해설
1. 순서 없는 목록의 불릿을 없앤다.
--> <ul> 스타일에 list-style-type 속성을 none으로 지정한다.
2. 각 항목의 줄 간격을 글자 크기의 2배로 지정한다.
--> <li> 스타일에 line-height 속성을 2.0으로 지정한다.
3. 각 항목에서 진하게 표시된 부분의 글자색을 #ad3000으로 수정한다.
--> subject 클래스 스타일에 color 속성으로 색을 추가한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
color:#ad3000;
font-weight:700;
font-size:larger;
}
ul {
list-style-type:none;
}
li {
line-height:2.0;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 06. 레이아웃 속성과 여백 속성을 사용한 문제 (0) | 2022.05.13 |
|---|---|
| 05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0) | 2022.05.13 |
| 04. 글자 속성과 텍스트 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 03. 표 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 02. 텍스트 스타일 속성을 사용한 문제 (0) | 2022.04.11 |