티스토리 뷰

프로그래밍/CSS 3.0

target (타겟)

쇠주는참이슬 2012. 3. 20. 10:37
앵커를 이용해서 웹 페이지 안에 점프를 할 때 타겟이 되는 부분에 스타일을 지정할 수 있다.

간단한 ex
<a href="ddd">

<p id="ddd">ㅇㅇㅇㅇㅇ</p>
이렇게 하면 ddd의 태그에 스타일타겟을 지정 해 줄수 있다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
ul {
width:700px;
height:60px;
padding: 10px 0 0 30px;
}
li {
list-style-type:none;
margin-right:30px;
float:left;
}
a {
background: #fff;
color: #aa0000;
padding:5px;
font-size: 16px;
font-weight: bold;
text-decoration:none;
}
a:hover { 
background: #220077;
color: #fff; 
}
p:target {
border: 2px solid #900;
background:#ffc;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding: 5px 8px;
}
    </style>
</head>
<body>
<section>
<h1>커피의 종류</h1>
    <a href="#c1">menu1</a>
    <a href="#c2">menu2</a>
    <p id="c1"><strong>에스프레소: </strong>커피의 가장 기본 베이스가 된다. 추출 시간 25초 내외의 카페인이 적은 커피. </p>   
    <p id="c2"><strong>아메리카노:</strong>에스프레소의 향은 그대로 느끼면서 뜨거운 물을 부어 1:2 정도의 비율로 희석시켜 연하게 먹는 커피다.</p>
    <p><strong>카푸치노 : </strong>여성들이 좋아하는 커피로 우유의 부드러움과 커피의 진한 맛이 조화롭게 맛을 낸다. 카페라떼에서 우유의 양을 줄이고 거품을 많이 넣어 만든 커피.</p> 

</section>
</body>
</html>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

가상요소 - selection  (0) 2012.03.20
border-radius 테두리를 둥글게 하는 스타일  (0) 2012.03.20
nth-child 속성 가상클래스  (0) 2012.03.19
링크 밑줄 표시 없애기 (a:link, a:visited, a:hover, a:active)  (0) 2012.03.19
CSS 속성 셀렉터 [속성=값][속성 ~= 값][속성 ^= 값][속성 $= 값][속성 *= 값]  (0) 2012.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함