HTML&CSS/실습
css 실습 - 순서없는목록만들기
yunajoe
2023. 2. 2. 23:52
// 조건
1. 순서없는 목록의 불릿을 없앤다
2. 각 항목의 줄 간격을 글자 크기의 2배로 지정한다
3. 각 항목에서 진하게 표시된 부분의 글자색을 #ad3000로 수정한다나의풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
border-style: 2px dashed black
}
li{
line-height: 2
}
ul{
list-style-type: none;
}
span{
color: #ad3000
}
</style>
</head>
<body>
<div id="container">
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><span>반응형 웹 디자인 - </span>다양한 화면 크기에 최적화하다</li>
<li><span>플랫 디자인</span> - 입체에서 평면으로 </li>
<li><span>풀스크린 배경</span> - 콘텐츠에 집중</li>
<li><span>원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다</li>
<li><span>페럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을</li>
<li><span>웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</li>
</ul>
</div>
</body>
</html>
해설풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 500px;
padding: 10px;
border:1px solid #ccc;
}
.subject{
color:brown;
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>