인터넷 프로그래밍 #6-1 CSS3 목록, 표, 배경

인터넷 프로그래밍
6-1 CSS3 - 목록, 표, 배경

 

단원 목표

1. 목록(Lists) 스타일을 나열하고 각각에 대해 설명하기
2. 표(Table) 속성을 나열하고 각각에 대해 설명하기
3. 배경(Backgrounds) 스타일을 나열하고 각각에 대해 설명하기

 

목록(Lists)
HTML 목록
<ul> 순서 없는 목록
<ol> 순서 있는 목록
<dl> 설명 목록
CSS 목록
1. 순서 없는 목록에 다양한 불릿(마커) 설정
2. 순서 있는 목록에 다른 숫자 형식 설정
3. 이미지 목록의 불릿(마커)으로 설정
4. 목록 및 목록 항목에 배경색 추가

 

ex)
.a {list-style-type: Value}
disc(default), circle, square, none
decimal, decimal-leading-zero, 
lower-roman, upper-roman, 
lower-alpha, upper-alpha

.a {list-style-image: url('bullet1.gif');} 이미지로 불릿 사용

list-style-position - outside (내어쓰기), inside (들여쓰기)

list-style 약식속성 - 여러가지 축약
.property {list-style: square inside url("bullet3.gif);}


표(Tables)
테두리(border) - 표의 테두리 속성을 지정
테두리 접기 (border-collapse) - 테두리 병합의 유무를 지정
*border-collapse: collapse;
테두리 여백 (border-spacing) - 인접 셀의 테두리 간격을 지정
제목 위치 (captions-side) - 표 제목의 위치 지정


테이블 테두리의 일반 형태
-table, th, td의 테두리 선 때문에 두줄로 나타남.
*border-collapse: collapse; 하면 합쳐져서 하나로 병합 됨.

 

표 스타일 style
padding
border-bottom
hover
background-color

ex) table{width:50%; border-collapse:collapse;}
th, td{border-bottom:1px solid #ddd;}
td{text-align:center;}
.top tr:hover{background-color:pink;}


배경
CSS 배경색 속성 
background-color : 배경색 지정
background-image : 배경을 이미지로 지정
background-repeat : 배경 이미지의 반복 여부
*repeat-x, repeat-y, no-repeat
background-attachment : 배경 이미지의 고정 여부
* fixed, scroll
background-position : 배경 이미지의 위치 지정
*left, right, top, bottom
background : 배경을 축약형으로 표현
opacity : 투명도

 

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *
CSS 목록 - 순서 없는 목록의 불릿 설정, 순서있는 목록의 숫자 형식 설정, 이미지를 목록의 불릿으로 설정
CSS 표 - 테두리, 테두리접기, 테두리 여백, 제목 위치
배경색 - 영역별로 지정할 수 있음
배경그림 - 배경을 이미지로 지정하고, 반복하거나 고정할 수 있음
축약형 배경 - color, image, repeat, attachment, position