10. 리스트와 테이블 속성

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

불릿 스타일 설정

list-style-type속성을 사용하면 리스트 항목에 사용되는 불릿의 종류를 제어할 수 있다. 

 

- 불릿 스타일 정의 

: display: listitem 정의를 사용해 css 리스트 속성을 추가하면 어떤 엘리먼트도 리스트 항목으로 만들 수 있다. 

:hover, :visited, :active와 같은 의사 클래스를 사용하면 불릿 종류나 이미지를 바꿀 수 있다. 

/*
list-style 불릿의 이름. 모양은 시스템에 따라 다름 

disc, circle, square, decimal, decimal-leading-zero, upper-roman, lower-roman, upper-alpha,
lower-alpha, lower-greek
*/

ul { list-style-type: circle; }

 

커스텀 불릿 생성

브라우저에서 미리 설정된 불릿만 사용할 수 있는것은 아니다. list-style-image속성을 사용하면 GIF, JPEG, PNG 파일 같은 그래픽을 불릿으로 사용할 수 있다. 

불릿을 기본적으로 레이아웃 틀 밖에 위치하기 때문에 불릿이 지나치게 길면 레이아웃 상자 밖으로 벗어날 수 있다. 

ul { list-style-type: circle; 
list-style-image : url(../imgs/bullet.png);
}

 

불릿 위치 선정

불릿을 적용한 리스트 항목의 텍스트가 한 줄보다 긴 경우가 종종 있다. list-style-position 속성을 사용하면 불릿을 기준으로 텍스트 줄 바꿈 위치를 지정할 수 있다. 

텍스트의 첫 줄 첫 글자 아래에 들여쓰기를 적용해 줄 바꿈 한 텍스트는 내어 쓰기(hanging indent)라고 한다.
 

/*
inside : 불릿의 왼쪽 끝을 이어지는 텍스트의 왼쪽 끝에 맞춘다. 
outside : 텍스트의 첫 줄을 이어지는 텍스트와 정렬해 불릿 내어쓰기를 적용한다. 
*/

ul { list-style-type: circle; 
list-style-image : url(../imgs/bullet.png);
list-style-position : inside;
}

 

여러 리스트 스타일 설정

list-style 단축 속성을 사용하면 앞에서 설명한 속성을 코드 한 줄로 정의할 수 있다. 즉, line-style-type, line-style-position, line-style-image 속성을 속성 하나로 설정할 수 있는 것이다. 

ul { list-style : circle url(../imgs/bullet.png) inside;}

 

테이블 레이아웃 설정

특정 테이블을 보여주는 방식은 브라우저마다 서로 다르다. table-laytout 속성의 값으로는 아래 두 방식을 주로 선호한다. 

/*
fixed : 테이블 너비 또는 첫 행의 컬럼 너비를 기준으로 레이아웃을 정한다. 
이 방식은 자동 방식보다 더 빠르다.

auto : 테이블 데이터 셀의 너비를 계산할 때 테이블 컬럼 너비와 더불어 테이블 데이터 셀의 콘텐츠 양을 
고려한다. 이 방식은 고정 방식보다 보통 더 느리지만 테이블 전체의 너비 계산이 더 정확하다. 
*/

table{ 
table-layout : auto;
width : 75%;
margin : 40px auto;}

 

테이블 셀 사이 간격 설정

테이블 데이터 셀과 테이블 헤더 셀에도 여러가지 박스 속성을 사용할 수는 있는데 margin 속성을 사용할 수는 없다. 

대신 CSS에서는 border-spacing속성을 제공해 데이터 셀 상/하단, 좌/우측면에 같은 여백을 설정할 수 있게 해 준다. 

table{ 
table-layout : auto;
border-spacing : 8px;
width : 75%;
margin : 40px auto;}

 

테이블 셀 사이의 보더 병합

<td>태그를 사용해 정의한 테이블 데이터 셀에는 모두 top, right, bottom, left라는 네 개의 보더가 있다. 

border-collapse속성을 사용하면 테이블의 각 데이터 셀이 개별 보더를 갖는 대신 인접한 데이터 셀과 보더를 병합하게 할 수 있다. 

/*
collapse : 인접한 데이터 셀이 공통 보더를 갖게 한다. 
하지만 보더가 합쳐지고 나면 cell-spacing을 설정할 수 없다. 

seperate:각 데이터 셀이 개별 보더를 유지한다. 
*/

table{ 
table-layout : auto;
border-spacing : 8px;
border-collapse : seperate;
width : 75%;
margin : 40px auto;}

 

빈 테이블 셀 처리

테이블 데이터 셀에 데이터가 없으면 (공백이나 줄바꿈 방지 공백도 없다면)이 셀은 칼럼 및 행의 기본 너비와 높이를 가진 빈 박스 형태로 보인다. empty-cells 속성을 사용하면 빈 데이터 셀(및 그보다 더 중요한 보더)이 보이는 방법을 지정할 수 있다. 

/*
show : 빈 데이터 셀의 배경 및 보더를 보여준다. 
hide : 데이터 셀 자리에 시각적인 갭을 대신 보여준다.
*/

table{ 
table-layout : auto;
border-spacing : 8px;
border-collapse : seperate;
empty-cells: hide;
width : 75%;
margin : 40px auto;}

 

테이블 설명 위치 설정

<caption>태그를 사용하면 테이블 안에 텍스트 설명을 넣을 수 있다. 태그에서 align어트리뷰트를 사용하면 설명을 테이블의 어디에 위치시킬지 지정할 수 있지만 이 어트리뷰트는 같은 일을 하는 CSS caption-side속성으로 인해 더는 권장하지 않는다. 

table{ 
table-layout : auto;
border-spacing : 8px;
border-collapse : seperate;
empty-cells: hide;
caption-side: bottom;
width : 75%;
margin : 40px auto;}