예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기

WEB/CSS3-CONCEPT 2017. 11. 6. 09:51 |

2. 리스트 꾸미기


* 리스트를 꾸미는 CSS3 프로퍼티들


1. list-style-position // 아이템 마커의 출력 위치 지정(아이템 영역 내 혹은 영역 바깥)

2. list-style-type // 아이템 마커 타입 지정

3. list-style-image // 아이템 마커 이미지 지정

4. list-style // 앞의 3개 프로퍼티 값을 한 번에 지정하는 단축 프로퍼티


그림 5-8. 리스트 꾸미기에 사용할 기본 HTML 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 꾸미기</title></head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
    <li>Espresso</li>
    <li>Cappuccino</li>
    <li>Cafe Latte</li>
</ul>
</body>
</html>
 
cs


* 리스트와 아이템의 배경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 배경</title>
<style>
ul {
    background: goldenrod;
    padding: 10px 10px 10px 50px
}
ul li { /* <ul>태그에 포함된 <li> */
    background: greenyellow;
    margin-bottom: 5px
}
</style>
</head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
    <li>Espresso</li>
    <li>Cappuccino</li>
    <li>Cafe Latte</li>
</ul>
</body>
</html>
 
cs


1. 마커의 위치, list-style-postion // 마커의 위치를 지정할 때 사용한다.

list-style-position : inside | outside(디폴트)


그림 5-10. list-style-position : inside로 마커를 아이템 영역 안쪽에 배치

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마커를 아이템 안으로 배치 </title>
<style>
ul {
    background: goldenrod;
    padding: 10px 10px 10px 50px;
    list-style-position: inside; /* 마커를 아이템 안으로 배치 */
}
ul li { /* <ul>태그에 포함된 <li> */
    background: greenyellow;
    margin-bottom: 5px;
}
</style>
</head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
    <li>Espresso</li>
    <li>Cappuccino</li>
    <li>Cafe Latte</li>
</ul>
</body>
</html>
 
cs


2. 마커 종류, list-style-type

list-style-type : circle(원) | sqare(사각형) | none(없음) | upper-roman(로마숫자) | lower-alpha(소문자 영어) | decimal(숫자)


3. 이미지 마커 : list-style-image // 독자들만의 이미지 마커 생성. 

(공통 이미지를 모든 아이템마커 | 아이템 마다 다른이미지)


그림 5-12. <ul> 태그의 모든 아이템에 marker.png 이미지 마커 저장

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 마커</title>
<style>
ul {
    background : goldenrod;
    padding : 10px 10px 10px 50px;
    list-style-image : url("media/marker.png");
}
ul li {
    background : greenyellow;
    margin-bottom : 5px;
}
</style>
</head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
    <li>Espresso</li>
    <li>Cappuccino</li>
    <li>Cafe Latte</li>
</ul>
</body>
</html>
 
cs


4. 리스트 단축 프로퍼티. list-style // 마커의 타입, 위치, 이미지 등을 한 번에 지정하는 단축 프로퍼티

list-style : list-style-type list-style-position list-style-image


* 응용 : 리스트로 메뉴 만들기


- <ul> 태그로 메튜 만들기

1
2
3
4
5
6
7
8
9
<nav id="menubar"> // 하이퍼링크들을 모아놓은 특별한 섹션
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Espresso</a></li>
        <li><a href="#">Cappuccino</a></li>
        <li><a href="#">Cafe Latte</a></li>
        <li><a href="#">F.A.Q</a></li>
    </ul>
</nav>
cs

- menubar 셀렉터 만들기
메뉴바(<nav id = "menubar"> 영역)를 olive 색으로 칠하도록 menubar 셀렉터를 다음과 같이 만든다

1
2
3
4
#menubar
{
background : olive;
}
cs

- 메뉴를 한 줄에 출력
1
2
3
4
5
6
#menubar ul // // <ul>은 디폴트가 display:block이므로 여백 패딩 모두 0으로 세팅 
{
    margin : 0;
    padding : 0;
    width : 567px; // 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 // 100%로 해도 됨
}
cs

- 메뉴 아이템을 인라인으로 지정
1
2
3
4
5
6
#menubar ul li 
{
    display : inline; // 아이템들이 옆으로 붙어 한 줄에 출력되도록 inline으로 함
    list-style-type : none; // 마커 삭제
    padding : 0px 15px; // top=bottom=0, left=right=15px. 아래위 패딩 0
}
cs

- 링크 밑줄 삭제
1
2
3
4
5
#menubar ul li a
{
    text-decoration : none; // 링크 밑줄이 보이지 않게 함
    color : white;
}
cs


- 링크에 마우스가 올라갈 때 텍스트를 violet 색으로 변경
1
2
3
4
#menubar ul li a:hover
{
    color : violet; // 마우스가 올라 갈 때 링크 글자를 violet 색으로 출력
}
cs


예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트로 메뉴 만들기</title>
<style>
#menubar {
    background : olive;
}
#menubar ul { /* 여백과 패딩 모두 0 */
    margin : 0;
    padding : 0;
    width : 567px; /* 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 */ // 100%로 해도 됨
}
#menubar ul li {
    display : inline; /* 새 줄로 넘어가지 않게 */
    list-style-type : none; /* 마커 삭제 */
    padding : 0px 15px; /* top=bottom=0, left=right=15px */
}
#menubar ul li a {
    color : white;
      text-decoration : none; /* 링크 보이지 않게 */
}
#menubar ul li a:hover {
     color : violet;  /* 마우스 올라 갈 때 색 */
}
</style>
</head>
<body>
<nav id="menubar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Espresso</a></li>
        <li><a href="#">Cappuccino</a></li>
        <li><a href="#">Cafe Latte</a></li>
        <li><a href="#">F.A.Q</a></li>
    </ul>
</nav>
</body>
</html>
 
cs














저작자표시 비영리 동일조건

'WEB > CSS3-CONCEPT' 카테고리의 다른 글

예제 5-11. CSS3 스타일로 폼 꾸미기. 4. 폼 꾸미기  (0) 2017.11.06
예제 5-10. 마우스가 올라오면 행의 배경색이 변하는 표 만들기. 3. 표 꾸미기  (0) 2017.11.06
예제 4-21. 마우스 커서 제어, cursor  (0) 2017.11.04
예제 4-20. box-shadow 프로퍼티로 박스 그림자 만들기  (0) 2017.11.04
예제 4-19. text-shadow 프로퍼티로 텍스트 그림자 만들기  (0) 2017.11.04
Posted by 너래쟁이
:

티스토리툴바