Whiteship's Note

Chapter 7. Anchors

View/HTML/CSS : 2008.03.23 15:18


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

비어있는 <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

'View > HTML/CSS' 카테고리의 다른 글

Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
top

TAG , , ,



: 1 : ··· : 7 : 8 : 9 : 10 : 11 : 12 : 13 : 14 : 15 : ··· : 18 :