[기본 개념] 1 | (1.2) 목록, 표

[기본 개념] 1 | (1.2) 목록, 표

1 글꼴 관련 스타일

2 텍스트 관련 스타일 

3> 목록 스타일

4> 표 스타일

3 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

 

 순서 없는 목록에는 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 list-style-type 속성을 사용하여 지정할 수 있다.

 

종류	설명	예시
disc	채운 원 모양	●
circle	빈 원 모양	○
square	채운 사각형 모양	■
decimal	1부터 시작하는 10진수	1, 2, 3, ...
decimal-leading-zero	앞에 0이 붙는 10진수	01, 02, ...
lower-roman	로마 숫자 소문자	i, ii, iii, ...
upper-roman	로마 숫자 대문자	I, II, III, ...
lower-alpha 또는 lower-latin	알파벳 소문자	a, b, c, ...
upper-alpha 또는 upper-latin	알파벳 대문자	A, B, C, ...
none	불릿이나 숫자를 없앰

 

(ex. 알파벳 대문자 목록 지정하기)

 

...
.book {
  list-style-type: upper-alpha;
}
...
<ol class="book">
  <li>소설 시리즈</li>
  <li>전문서적</li>
  <li>동화</li>
</ol>
...

 

불릿 대신 이미지를 사용하는 list-style-image 속성

 

기본형

list-style-image : <url(이미지 파일 경로)> | none

 

 불릿을 원하는 이미지로 바꾸려면 list-style-image 속성을 사용하면 된다. 이때 이미지는 불릿 크기만큼 작아야 좋다.

 

목록을 들여 쓰는 list-style-position 속성

 

기본형

list-style-position : inside | outside

 

 불릿이나 번호의 위치를 들여 쓰려면 list-style-position 속성을 사용하면 된다.

 

종류	설명
inside	불릿이나 번호를 기본 위치보다 안으로 들여쓴다.
outside	기본값

 

목록 속성을 한꺼번에 표시하는 list-style 속성

 

 list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있는 list-style 속성이 있다.

 

(ex. 소문자 목록으로 만들고 들여 쓰기를 줄여서 표시하기)

ol {
  lsit-style: lower-alpha inside;
}

4 표 스타일

 

표 제목의 위치를 정해주는 caption-side 속성

 

기본형

caption-side : top | bottom

 

 표 제목으로 표현하는 캡션의 위치를 옮기려면 caption-side 속성을 사용하면 된다.

 

종류	설명
top	캡션을 표 윗부분에 표시 (기본값)
bottom	캡션을 표 아랫부분에 표시

 

표에 테두리를 그려 주는 border 속성

 

 표 바깥 테두리와 셀 테두리를 지정하려면 border 속성을 사용하면 된다.

 

(ex. 표 테두리 스타일 지정하기)

 

...
  table {
    caption-side: bottom;
    border: 1px solid black;
  }
  td, th {
    border: 1px dotted black;
    padding: 10px;
    text-align: center;
  }
...

 

셀 사이의 여백을 지정하는 border-spacing 속성

 

기본형

border-spacing : 수평거리 수직거리

 

 셀과 셀 사이의 여백을 조절하려면 border-spacing 속성을 사용하면 된다. 수평거리와 수직거리 값이 같다면 1개만 지정해도 된다.

 

표와 셀 테두리를 합쳐 주는 border-collapse 속성

 

 border 속성을 사용하여 셀과 셀 사이의 여백을 두 줄이 생겼을 때, 두 줄로 둘 것인지 한 줄로 합칠 것인지를 결정하는 것이 border-callapse 속성이다. 이 속성은 <table>태그에 적용되는 스타일에만 적용하면 된다.

 

종류	설명
collapse	표와 셀의 테두리를 합쳐 하나로 표시
separate	표와 셀의 테두리를 따로 표시 (기본값)

 

(ex. 표 스타일 다양하게 적용하기)

 

...
  table {
    caption-side: bottom;
    border: 1px solid black;
    border-collapse: collapse;
  }
  td, th {
    border: 1px dotted black;
    padding: 10px;
    text-align: center;
  }
...

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)