Chapter 7. Anchors
View/HTML/CSS : 2008. 3. 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 |
