프로그래밍/CSS 3.0
target (타겟)
쇠주는참이슬
2012. 3. 20. 10:37
앵커를 이용해서 웹 페이지 안에 점프를 할 때 타겟이 되는 부분에 스타일을 지정할 수 있다.
간단한 ex
<a href="ddd">
<p id="ddd">ㅇㅇㅇㅇㅇ</p>
이렇게 하면 ddd의 태그에 스타일타겟을 지정 해 줄수 있다.
<!DOCTYPE html>
간단한 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>