리스트, 표, 폼 꾸미기

목록(List) 스타일

list-style-type

 

1.  <ul> 비순차적 목록 타입 지정

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: none;	마커 삭제

 

2.  <ol> 순차적 목록 타입 지정

• css로는 ul, ol 관계없이 적용 가능하며, 로마숫자, 그리스, 알파벳, 넘버링 형태를 제공

list-style-type: decimal;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
li.hangul { list-style-type: -moz-hangul; list-style-type: hangul; }	가, 나, 다, 라 ...
li.hangul-consonant {  list-style-type: -moz-hangul-consonant; list-style-type: hangul-consonant; }	ㄱ, ㄴ, ㄷ, ㄹ, ㅁ ...

 

 

list-style-position

• 목록 위치 지정
• 목록이 지정된 블록 영역의 '안쪽(inside)' 혹은 '바깥쪽(outside)'에 블릿(점)을 표현

.inside { list-style-position: inside; }
.outside { list-style-position: outside; }

 

 

 

list-style-image

• 블릿을 이미지로 표현할 수 있다

.list { list-style-image: url(img/star.png); }

 

---

 

<table> 요소와 관련된 속성들

table-layout: 속성

table-layout: auto;	테이블의 셀이 텍스트의 길이에 자동조절
table-layout: fixed;	테이블의 셀의 너비를 고정

 

 

border-collapse: 속성

border-collapse: separate;	셀 사이를 분리
border-collapse: collapse;	공백을 없애고 셀의 경계를 합친다

 

 

border-spacing:속성

border-spacing: 5px;	상, 하, 좌, 우 5px
border-spacing: 5px 10px	가로(좌, 우) 5px, 세로(상, 하) 10px

 

---

 

⚒️ 예제

CSS\webapp\06_cssDecorate
exam01.html	menu bar
exam02.html	[표 꾸미기] 1학기 성적
exam03.html	[<form> 꾸미기] CONTACT US