개발자의 길/Web Programming

<CSS> Link

모쿠 2017. 3. 30. 16:02

<CSS 링크>


- inline 요소들은 width/height 값을 설정할 수 없음!

- 예외)display 프로퍼티를 inline-block하면 화면 배치는 inline처럼 가로로 배치 block 요소처럼 width/height를 설정할 수 있음


<08_link.html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link</title>
<style>
a{
    text-decoration: none;
    border: 1px solid hotpink;
    display: inline-block;
    width: 80px;
    height: 20px;
    text-align: center;
}
/* pseudo class는 ":예약어" 형식으로 사용 */
a:hover { /* 마우스가 a 태그 위에 있을 때 */
    background: lightpink;
    color: white;
}
a:link { /* 방문하지 않았던 링크 */
    color: red;
    
}
a:visited { /* 방문했던 링크 */
    color: yellow;
}
a:active { /* 마우스를 클릭하고 있을 때 */
    background: green;
    color: red;
}
 
</style>
</head>
<body>
<h1>CSS Link, pseudo class</h1>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.naver.com">네이버</a>
 
</body>
</html>
cs




저작자표시 비영리