반응형
링크(Link)
- text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거한다.
a:link, a:visited {
background-color: #FFA500;
color: maroon;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active { background-color: #FF4500; }
링크(Link)의 상태
- link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태
- visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태
- hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
- active : 사용자가 마우스로 링크를 클릭하고 있는 상태
- focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태
a:link { color: olive; }
a:visited { color: brown; }
a:hover { color: coral; }
a:active { color: khaki; }
리스트(List)
list-style-type 속성
- 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라 하는데, list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있다.
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }
list-style-image 속성
- list-style-image 속성을 이용하면 마커로 자신만의 이미지를 사용할 수 있다.
.imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
list-style-position 속성
- list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있는데, 기본값은 outside로 설정되어 있다.
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
list-style 속성 한 번에 적용하기
- 위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
리스트에 배경색 적용
- CSS를 사용하면 리스트 전체뿐만 아니라 리스트 요소별로도 각각의 배경색을 설정할 수 있다.
ul { background: #D2691E; padding: 15px; }
ol { background: #6495ED; padding: 15px; }
ul li { background: #DEB887; margin: 5px; }
ol li { background: #00FFFF; margin-left: 15px; }
테이블 속성
- 테이블의 테두리속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 된다.
table, th, td { border: 2px solid orange; }
border-collapse 속성
- 위의 예제에서 테이블의 테두리가 두 줄씩 나타나는 이유는 <th>태그와 <td>태그가 각각 자신만의 테두리를 가지고 있기 때문이다.
- border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현된다.
table, th, td { border: 2px solid orange; }
table { border-collapse: collapse; }
border-spacing 속성
- border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해준다.
table, th, td { border: 1px solid black; }
table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }
text-align 속성
- text-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정한다.
- <th>태그 내부는 가운데 정렬이 <td>태그 내부는 왼쪽 정렬이 기본 설정이다.
table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
td { text-align: center; }
vertical-align 속성
- vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정한다.
- <th>와 <td>태그 모두 가운데 정렬이 기본 설정이다.
table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { vertical-align: top; height: 50px; }
td { vertical-align: bottom; height: 50px; }
caption-side 속성
- caption-side 속성은 테이블의 캡션(caption)을 설정한다.
.top caption { caption-side: top; }
.bottom caption { caption-side: bottom; }
table { border: 1px solid red; }
td { border: 1px solid blue; }
empty-cells 속성
- empty-cells 속성은 테이블 내의 빈 셀들의 테두리 및 배경색을 표현할지 안 할지를 설정한다.
.table_1 { empty-cells: show; }
.table_2 { empty-cells: hide; }
td, th { border: 1px solid gray; padding: 0.5rem; }
Reference
반응형
'Language > Css' 카테고리의 다른 글
[Css] 웹 폰트 속성 - 사용 방식, 종류 (0) | 2023.06.19 |
---|---|
[Css] 이미지, 그래디언트 속성 (0) | 2023.06.19 |
[Css] 배경 속성 - 이미지, 반복, 고정, 위치 (0) | 2023.06.19 |
[Css] 기본 속성 - 크기 단위, 색상 (0) | 2023.06.19 |
[Css] 위치 정렬 - position, float (0) | 2023.06.19 |