css를 적용해서 다양한 효과를 줄수 있는 속성들

링크

(link)
링크에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용해서 다양한 효과를 설정할 수 있다.

또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다.

상태

링크는 총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있다.

1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태

2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태

3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태

4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태

5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태

<style>
    a:link { color: olive; }
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:active { color: khaki; }
</style>

버튼 활용

css를 사용해서 링크를 버튼처럼 만들 수도 있다.

<style>

    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; }
</style>

리스트

(list)

속성	설명
list-style	모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
list-style-type	리스트 요소의 *마커(marker)를 설정함.
list-style-image	리스트 요소의 마커로 사용할 이미지를 설정함.
list-style-position	리스트 요소의 위치를 설정함.

*마커(marker)
: 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 한다.

테이블

(table)

속성	설명
border	모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-collapse	테이블의 테두리를 한 줄로 나타낼지를 설정함.
border-spacing	테이블 요소(th, td)간의 여백을 설정함.
caption-side	테이블의 캡션(caption)을 설정함.
empty-cells	테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
table-layout	테이블에 사용되는 레이아웃 알고리즘을 설정함.

---

리스트와 테이블에 대한 추가 설명