목록과 문단 스타일 시트
목록(list) STYLE
HTML 관련 태그 - 순서 없는 목록 <ul>, 순서지정 목록<ol> 태그에 대한 다양한 서식 지정 가능
주요속성
속성 |
기능 |
예 |
List-style :값 |
목록과 관련한 모든 설정을 할 수 있음 |
List-style :inside circle |
List-style-image : url(주소) |
목록의 값을 이미지로 표시 |
List-style-image : url(allow.gif) |
List-style-position : 값 |
목록에서 다음 줄로 이동시 시작 위치 설정 |
List-style-position : inside |
List-style-type : 목록유형 |
목록에서 사용할 머리표 유형 설정 |
List-style-type : circle |
<style type="text/css"> UL {list-style : inside square} OL {list-style : outside upper-roman} </style> </head> <body>당분에 의한 와인의 분류<br> <ul> <li>dry wine</li> <li>mediumdry wine</li> <li>sweet wine</li>
|
|
문단 서식 지정 STYLE
MARGIN 속성 문단의 여백을 설정하기 위해서 사용하는 속성
속성 |
기능 |
예 |
MARGIN - TOP : 값 |
문단 경계로부터 위쪽 여백 값 설정 |
MARGIN : 30px;(상하 좌우 여백 30px 지정) MARGIN:20px20px30px20px; 위쪽 오른쪽 20픽셀, 아래쪽 30픽셀, 왼쪽20픽셀 여백 지정 MARGIN-TOP:20px; 위쪽여백 20픽셀 지정 |
MARGIN - LEFT : 값 |
문단 경계로부터 왼쪽 여백 값 설정 | |
MARGIN - RIGHT : 값 |
문단 경계로부터 오른쪽 여백 값 설정 | |
MARGIN - BOTTOM : 값 |
문단 경계로부터 아래쪽 여백 값 설정 |
BODER 속성 -MARGIN 여백 안에 외곽선의 종류나 두께를 설정, 일반적인 테두리 선의 환경 설정에 사용
속성 |
기능 |
BORDER-WIDTH |
테두리 너비 지정 |
BORDER-COLOR |
테두리 색상 지정 |
BORDER-STYLE |
테두리 스타일 지정 |
1. BORDER-WIDTH 속성
BORDER-WIDTH : 상하 좌우 모든 방향에 대해 너비 지정
각 방향에 대해 너비를 지정할 경우 BORDER-TOP-WIDTH, BORDER-TOP-COLOR, BORDER-LEFT-COLOR. 등등으로 기술
형식
BORDER-WIDTH : 너비수치 혹은
BORDER-WIDTH : THIN / THICK / MIDIUM
|
THIN : 기본 너비보다 더 얇은 너비
THICK : 기본 너비보다 더 두꺼운 너비
MIDIUM : 기본 너비 |
2. BORDER-COLOR 속성
BORDER-COLOR : 상하좌우 모든 방향에 대해 테두리 선 색 지정
각 방향에 대해 서로 다른 색 지정할 경우 BORDER-TOP-COLOR,BORDER-LEFT-COLOR. 등등으로 기술
형식BORDER-COLOR : 색상명 혹은 # 색상값
예) #PW{BORDER-COLOR:#404040}
|
3. BORDER-STYLE 속성
BORDER-STYLE : 테두리 선 스타일을 지정
각 방향에 대해 다른 선 모양을 지정할 때 BORDER-TOP-WIDTH,BORDER-LEFT-WIDTH 등등으로 기술
형식: BORDER-STYLE : 스타일 종류 기술
|
스타일 상수 |
기능 |
스타일 상수 |
기능 |
Dashed |
긴 점선 표시 |
None |
외곽선 표시 안함 |
Dotted |
짧은 점선 표시 |
Outset |
안쪽 전체가 튀어나와 보임 |
Double |
이중선으로 표시 |
Ridge |
입체적으로 튀어나와보이는 효과 |
Groove |
입체적으로 들어간 모양 표시 |
Soild |
실선표시 |
Insert |
안쪽 전체가 들어가 보이게 하는 표시 |
예)
#style1 {border-style:solid} 현재 테두리 상하좌우 전체를 실선으로 표시
#style2 {border-top:2px blue solid;
border-botoom:2px red solid;
border-left:3px green dotted;
border-right:3px green dashed} 테두리 상하좌우 모두 굵기, 색상, 스타일이 다를 경우 한칸씩 공백을 지정하여 기술하면 됨
4. PADDING 속성 - BORDER의 여백을 설정하여 BORDER와 내용 사이의 공간을 제어
속성 |
기능 |
PADDING |
전체 BORDER의 여백 지정 |
PADDING-TOP |
위쪽 BORDER의 여백 지정 |
PADDING-BOTTOM |
아래쪽 BORDER의 여백 지정 |
PADDING-LEFT |
왼쪽 BORDER의 여백 지정 |
PADDING-RIGHT |
오른쪽 BORDER의 여백 지정 |
예)
#style1{border:2px blue solid;
padding : 10px} 테두리 지정 후 테두리 상자 내 상하좌우 여백 10px 지정
'자기 계발 > CSS와 JAVA, HTML' 카테고리의 다른 글
웹표준 퍼블리싱 이론 수업 첫째날 (2) | 2015.12.08 |
---|---|
Flash 플래쉬 소개 (0) | 2015.10.10 |
링크 지정 스타일 시트 (0) | 2013.01.03 |
FONT 스타일 시트 (0) | 2013.01.02 |
CSS (Cascading Style Sheet) 개요 (1) | 2013.01.02 |