반응형
1. list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기
① <ul>일 경우 불릿 모양을 변경할 때, <ol>일 경우 번호 스타일 지정할 때 사용
② 기본형 :
list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>③ <ul>의 불릿 모양 바꾸기
④ <ul>에서 불릿 없애기
ul { list-style-type:none; }
⑤ <ol>에서 숫자 바꾸기
<예제 – ordered-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>불릿 바꾸기</title>
<style>
.book1 {
list-style-type: lower-alpha; /* 소문자 알파벳 */
}
.book2 {
list-style-type: upper-roman; /* 대문자 로마 숫자*/
}
</style>
</head>
<body>
<!--h1+(ol.book1>li*4)*2-->
<h1>도서 시리즈</h1>
<ol class="book1">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ol>
</body>
</html>
2. list-style-image 속성 – 불릿 대신 이미지 넣기
① <ul>에서 불릿을 이미지로 변경 가능
② 기본형 :
list-style-image : url(이미지 파일 경로) | none③ 사용 가능한 속성 값
<예제 – image-bullet-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>이미지 불릿</title>
<style>
/* 불릿으로 사용할 이미지 경로 지정*/
ul {
list-style-image: url('images/dot.png');
}
</style>
</head>
<body>
<!--h1+ul>li*4-->
<h1>도서 시리즈</h1>
<ul>
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ul>
</body>
</html>
3. list-style-position 속성 – 목록에 들여 쓰는 효과 내기
① 불릿이나 번호를 들여쓸 때 사용
② 기본형 :
list-style-position : inside | outside;③ 사용 가능한 속성 값
<예제 – list-position-001.html>
<!DOCTYPE html>
<html lang="ko">
<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>이미지 불릿</title>
<style>
.inside {
list-style-position: inside;
}
</style>
</head>
<body>
<!--h1+ul>li*4-->
<h1>도서 시리즈</h1>
<ul>
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ul>
<ul class="inside">
<li>Do it! 시리즈</li>
<li>된다 시리즈</li>
<li>DCM 프로 사진가</li>
<li>데이터과학 시리즈</li>
</ul>
</body>
</html>
4. list-style 속성 – 목록 속성 한꺼번에 표시하기
① 앞서 배운 list 관련 속성들을 한 번에 지정 가능
② 아래 두 코드는 같은 결과를 낸다.
ul {
list-style-type : lower-alpha;
list-style-position : inside;
}ul {
list-style : lower-alpha, inside;
}
퀴즈
<퀴즈 1번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 스타일</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>
<p><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</p>
<p><span class="subject">플랫 디자인</span> - 입체에서 평면으로 </p>
<p><span class="subject">풀스크린 배경</span> - 콘텐츠에 집중</p>
<p><span class="subject">원 페이지 사이트</span> - 한 페이지에 모든 내용을 담다</p>
<p><span class="subject">패럴랙스 스크롤링</span> - 동적인 효과로 강한 인상을!</p>
<p><span class="subject">웹 폰트</span> - 웹 타이포그래피를 받쳐주는 기술</p>
</div>
</body>
</html>
<퀴즈 2번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 스타일</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
font-weight:700;
font-size:larger;
color: #ad3000;
}
ul {
list-style-type: none;
}
li {
line-height: 2;
}
</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>
<퀴즈 3번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 스타일</title>
<style>
.container {
width:500px;
height:50px;
margin:0 auto;
background-color:#444;
text-align: center;
}
h1 {
color: #fff;
text-shadow: 3px 2px 5px #000;
}
</style>
</head>
<body>
<div class="container">
<h1>최신 웹 디자인 트렌드</h1>
</div>
</body>
</html>
<퀴즈 4번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
width: 750px;
padding: 10px;
border: 1px solid #ccc;
}
.book-img {
float: left;
padding: 10px;
margin-right: 20px;
}
.book-desc {
padding: 10px;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
.accent {
font-weight: bold;
color: red;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="book-img">
<img src="images/book.png">
</div>
<div class="book-desc">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. </p>
<p><span class="accent">이 책은 HTML과 CSS에 대한 기초적인 내용만 알고 있다면 누구든 쉽게 코딩으로 여러 기기에 대응할 수 있는 웹 디자인을 만들 수 있도록 기획되었다.</span> jQuery를 몰라도 된다. jQuery 플러그인을 가져다 사용할 수 있는 방법을 소스 한 줄 한 줄 자세하고 친절하게 설명해 놓았으니까!</p>
<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/A001/65" target="_blank">[책 자세히 보기]</a></p>
</div>
</div>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글
| [CSS] 03-2 배경 색과 배경 이미지 (0) | 2021.09.05 |
|---|---|
| [CSS] 03-1 웹에서 색상 표현하기 (0) | 2021.09.05 |
| [CSS] 02-3 문단 스타일 (0) | 2021.09.05 |
| [CSS]02-2 텍스트 스타일 (0) | 2021.09.05 |
| [CSS] 02-1 글꼴 관련 스타일 (0) | 2021.09.05 |
댓글