[CSS] target 선택자를 알아보자

현재 사용자가 웹페이지에서 보고 있는 곳을 나타내는 [[target]] 선택자를 알아봅시다.

상황

문서를 만들면서 문서 내부에 링크(# 선택자를 이용해)를 걸어 같은 페이지 안에서 사용자가 왔다 갔다 할 수 있도록 만드는데, 왔다 갔다 하면서 사용자가 어디를 보고 있었는지 모르는 상황입니다. 이럴 때 [[target]] 선택자를 이용해 해당 위치를 사용자가 더 쉽게 식별 할 수 있도록 하는 것입니다.

조금더 자세히 상황을 정리해보면 아래와 같습니다.

<a href="#note-1">go to note 1</a>
...
<p id="note-1">This is note 1</p>

위 코드에서 사용자가 go to note 1 이라는 링크를 누르면 브라우저는 문서에서 id 가 note-1 인 p 태그로 화면을 옮겨 보여줍니다.

그런데 문서가 꽤나 길고 내용이 많아 사용자가 p 태그를 식별하기 어려울 때 [[CSS]] 에서 target 선택자를 이용해 p 태그가 잘 보일 수 있도록 할 수 있습니다.

:target

스타일시트에 아래와 같은 코드를 추가해 문서 내부 링크의 대상에게 속성을 지정 할 수 있습니다.

:target { background-color: #eeff00; }

[[CSS]] 에서 이렇게 지정할 경우 대상이 되는 태그의(태그 종류에 상관없이) 배경색상은 노란색으로 표시 됩니다.

만약 특정 태그에만 [[target]] 속성을 지정하고 싶다면 아래와 같이 코드를 추가하면 됩니다.

p:target { background-color: #eeff00; }

위 예제는 p 태그에만 [[target]] 선택자를 이용해 속성을 지정한 것입니다.

끝.