CSS 링크
link
링크의 기본 상태
사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
visited
사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태.
hover
사용자의 마우스 커서가 링크 위에 올라가 있는 상태
active
사용자가 마우스로 링크를 클릭하고 있는 상태
focus
키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태
CSS 리스트
list-style
모든 list-style 속성을 이용한 스타일을 한 줄에 설정
<style>
ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>
list-style-type
리스트 요소의 마커(marker)를 설정
list-style-image
리스트 요소의 마커로 사용할 이미지를 설정
list-style-position
리스트 요소의 위치를 설정
기본 속성값은 outside
CSS 테이블
border
테이블의 테두리(border)를 설정
기본 설정 : 빈 테두리
border-collapse
해당 테이블의 테두리는 한 줄로 표현
명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현
border-spacing
테이블 요소(th, td)간의 여백을 설정
text-align
테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정
기본 설정 : <th>태그 내부는 가운데 정렬, <td>태그 내부는 왼쪽 정렬
vertical-align
테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정
기본 설정 : <th>태그와 <td>태그 모두 가운데 정렬
caption-side
테이블의 캡션(caption)을 설정
empty-cells
테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정
table-layout
테이블에 사용되는 레이아웃 알고리즘을 설정
CSS 이미지 스프라이트
여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있음
모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과
많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편
하나의 이미지를 가지고 네 개의 아이콘
<style>
.up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
.up { width: 21px; height: 20px; background-position: 0 0; }
.down { width: 21px; height: 20px; background-position: -21px 0; }
.right { width: 22px; height: 20px; background-position: -42px 0; }
.left { width: 22px; height: 20px; background-position: -65px 0; }
</style>
