HTML 태그는 인라인 태그와 블록 태그로 나뉨
- 인라인 태그는 인라인 박스, 블록 태그는 블록 박스로 출력된다.
- 블록박스는 새 라인에서 시작된다. 왼쪽에서 오른쪽 끝까지 통째로 점유한다.
- 인라인 박스는 블록 안에 배치한다. 옆에 다른 태그도 배치 가능하다.
박스의 유형 제어 : display
리스트 꾸미기
리스트의 모양을 꾸미는 CSS3 프로퍼티들
마커의 위치, list-style-position
마커 종류, list-style-type
이미지 마커, list-style-image
- 사용자가 이미지 마커 작성이 가능하다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mbar {background: lightsalmon;}
#mbar ul{
margin: 0;
padding: 0;
width: 567px;
}
#mbar ul li{
display: inline-block;/*새줄로 넘어가지 않게 효과를 준다.*/
list-style-type: none;
padding: 0px 15px;
}
#mbar ul li a{
color: ghostwhite;
text-decoration: none;
}
#mbar ul li a : :hover{
color : lightyellow
</style>
</head>
<body>
<nav id="mbar">
<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>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| 자바스크립트 언어 (0) | 2020.03.09 |
|---|---|
| CSS3로 표 꾸미기, 폼꾸미기 (0) | 2020.03.08 |
| CSS3의 박스 모델 (0) | 2020.03.08 |
| CSS3에서 색 표현하기, 텍스트 꾸미기, 폰트 (0) | 2020.03.05 |
| 셀렉터 (0) | 2020.03.05 |
rss