페이지 내부로 이동하는 방법

비어있는 <a> 태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>

• 이동할 위치 위에 name속성을 사용하고 <a> 태그는 비어둔다.

헤더 내부에 <a>태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a name="oranges">Oranges Are Tasty</a></h2>

• <a> 태그에 스타일을 적용하면 <h2> 태그에 적용한 스타일을 오버라이딩해버린다.

• :link라는 pseudo-class를 사용하여 링크에 해당하는 스타일을 별도로 정의할 수 있다.

id 속성 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2 id="oranges">Oranges Are Tasty</h2>

• 추가적인 <a> 태그를 사용하지 않아도 된다.

• id 속성은 모든 엘리먼트에 붙일 수 있기 때문에, 어디든지 원하는 곳으로 이동하게 할 수 있다.

• 다 좋은데, 몇몇 옛날 브라우저들이 id 속성을 인식하지 못한다.

전부 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>

• 두 번째 방법과 마찬가지로, <a> 태그에 스타일 적용할 때 주의해야 함.

Extra Credit

<a> 태그의 title 속성

• tooltip에 보여줄 내용을 적을 수 있다.

• 사용자들에게 링크의 목적지에 대한 정보를 줄 수 있다.

a:link 스타일을 정의하여 링크에 해당하는 anchor에만 스타일을 적용할 수 있다.

a:link {

  color: green;

  text-decoration: none;

  font-weight: bold;

  }

• <h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2> 이렇게 href 속성이 없는 anchor 태그에는 적용되지 않는다.

배경주기

a:link {

  padding-right: 15px;

  background: url(link_icon.gif) no-repeat center right;

  }

• 링크의 오른쪽에 이미지를 삽입한다.

점선

a:link {

  color: green;

  text-decoration: green;

  border-bottom: 1px dotted green;

  }

• 링크 아래에 표시하는 줄을 점선으로 표시한다.

다녀온 링크 표시

a:visited {

  color: purple;

  }

• 이미 클릭했던 링크의 색을 다르게 표시해준다.

마우스를 링크 위에 올릴 때

a:hover {

  color: blue;

  border-bottom: 1px solid blue;

  }

클릭하는 순간

a:active {

  color: red;

  }

순서

• LoVe/HAte 순서대로 정의해야 스타일이 섞이지 않는다.

• a:link, a:visited, a:hober, a:active