[CSS 기본 속성] - 링크

Donggu(oo)·2023년 1월 17일
0

CSS

목록 보기
7/24
post-thumbnail

1. 링크(link)의 상태


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

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

    a:link {
     /* href 속성이 명시된 상태 */
    }

링크 클릭 범위 넓히기

  • <div> 전체에 링크 클릭 시 이동되도록 클릭 범위를 넓히려면 a 태그에 display: block 속성을 준다.

    a { display: black; }

2) visited

  • 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태이다.
    a:visited {
     /* 링크를 클릭해본 상태 */
    }

    3) hover

  • 사용자의 마우스 커서가 링크 위에 올라가 있는 상태이다.
    a:hover {
     /* 링크 위에 마우스 포인터가 위치한 상태 */
    }

    4) active

  • 사용자가 마우스로 링크를 클릭하고 있는 상태이다.
    a:active {
     /* 링크 위에 마우스 포인터를 두고 좌측 버튼을 계속 클릭하고 있는 상태 */
    }

    5) focus

  • 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태이다.
    a:focus {
     /* 링크 위에 키보드 포커스가 위치한 상태 */
    }
profile
FE Developer

0개의 댓글