HTML에 스타일을 적용하여 좀 더 다양한 링크 효과를 표현합니다.
목차
- Underlines : text-decoration, border-bottom 및 background-image를 사용하여 밑줄을 긋는 방법 (일반적인 링크).
- Anchors(앵커) 및 Targets(타겟) : 페이지의 일부에 링크하고 : target 의사 클래스(pseudo class)를 사용하여 스타일을 지정합니다.( pseudo classes : 의사클래스 또는 가짜 클래스 )
- Rollover 1 : 마우스를 사용하여 커서를 움직일 때 변경되는 그래픽 링크 : 호버.
- Rollover 2 : : active 의사 클래스(pseudo class)를 사용하여 대화 형 효과를 추가합니다.
- Rollover 3 : Fading in 및 Fading out
- Rollover 4 : 변형(Transform)을 사용하여 회전.
- 간단한 CSS 트랜지션(Transitions) : 텍스트 링크를 잡아 당겼을 때의 미묘한 애니메이션.
- 더 많은 CSS트랜지션(Transitions) : border-radius 및 RGBa 색상 사용.
- CSS 전환 타이밍 기능 : 애니메이션 전환의 가속 및 감속 처리.
Underlines : text-decoration, border-bottom 및 background-image를 사용하여 밑줄을 긋는 방법 (일반적인 링크).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom underlines</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
p {
line-height: 2;
}
a {
color: blue;
/* link1을 제외하고 모두 'text-decoration : none'이 기본 밑줄을 제거하기 위해 적용됩니다.
이것들은 각각의 규칙이 어떻게 개별적으로 적용될 것인지를 보여주기 위해 각 선언에 보관되어 있습니다.
모든 텍스트 스타일을 필요로하는 다양한 링크 스타일을 사용하는 경우 :
각 선언문 블록이 아닌 여기에 배치해야합니다.*/
}
a:visited {
color: #09c;
}
a:hover {
color: lime;
}
a:active {
color: red;
}
/* the default styling of a link: */
#link1 {
}
#link1:hover {
text-decoration: none;
}
/* underlines using borders: */
#link2 {
text-decoration: none;
border-bottom: 2px dotted #0c0;
}
/* underlines using images: */
#link3 {
text-decoration: none;
padding-bottom: 4px;
background: url("./img/underline_vaguered.gif") bottom repeat-x;
}
#link4 {
text-decoration: none;
padding-bottom: 5px;
background: url("./img/underline_greenspots.gif") bottom repeat-x;
}
#link5 {
text-decoration: none;
padding-bottom: 2px;
background: url("./img/underline_zigzag.gif") bottom repeat-x;
}
#link6 {
text-decoration: none;
padding-bottom: 3px;
background: url("./img/underline_arrowoff.gif") bottom repeat-x;
}
#link6:hover {
background: url("./img/underline_arrowon.gif") bottom repeat-x;
}
#link7 {
text-decoration: none;
padding-bottom: 20px;
background: url("./img/underline_ruler.gif") bottom repeat-x;
}
#link8 {
text-decoration: none;
padding-bottom: 6px;
background: url("./img/underline_ragged.gif") bottom repeat-x;
}
</style>
</head>
<body>
<p>The <a href="#" id="link1">green seed</a> of the <a href="#" id="link2">white-flowering</a> climbing <a href="#" id="link3">leguminous papilionaceous</a> plant, <a href="#" id="link4">pisum sativum</a>, has become a dining-table favourite <a href="#" id="link5">for good reason</a>.</p>
<p><a href="#" id="link6">The perfect accompaniment</a> to any meal, the <a href="#" id="link7">diminutive spherical vegetable</a> brings joy to billions worldwide, be they <a href="#" id="link8">fresh, frozen, canned or dried</a>.</p>
</body>
</html>Anchors(앵커) 및 Targets(타겟) : 페이지의 일부에 링크하고 : target 의사 클래스(pseudo class)를 사용하여 스타일을 지정합니다.( pseudo classes : 의사클래스 또는 가짜 클래스 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The target pseudo class</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
h2 {
color: #f60;
}
h2:target {
color: white;
background: #f60;
}
</style>
</head>
<body>
<p>You can read a whole load of content, or get straight to the <a href="#nittygritty">nitty-gritty</a>.</p>
<p>Alternatively, you can read the <a href="#grittynitty">gritty-nitty</a>.</p>
<p>Or if you prefer, try the <a href="#wittyditty">witty ditty</a>.</p>
<!--[A whole load of content]-->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
<h2 id="nittygritty">Nitty-Gritty</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
<h2 id="grittynitty">Gritty-Nitty</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
<h2 id="wittyditty">Witty-Ditty</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
</body>
</html>Rollover 1 : 마우스를 사용하여 커서를 움직일 때 변경되는 그래픽 링크 : 호버
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rollovers 1</title>
<style>
body {
font: 12px arial, helvetica, sans-serif;
}
#toucan {
display: block;
width: 200px;
height: 63px;
background-image: url("./img/toucancombo.jpg");
text-indent: -999em;
}
a:hover {
background-position: bottom;
}
</style>
</head>
<body>
<p><a href="#" id="toucan">Toucan</a></p>
</body>
</html>Rollover 2 : : active 의사 클래스(pseudo class)를 사용하여 대화 형 효과를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rollovers 2</title>
<style>
body {
font: 12px arial, helvetica, sans-serif;
}
div a {
display: block;
width: 200px;
height: 63px;
background-image: url("./img/toucancombo2.jpg");
text-indent: -999em;
text-decoration: none;
}
a:hover {
background-position: center;
}
a:active {
background-position: bottom;
}
</style>
</head>
<body>
<div>
<p><a href="#">Toucan</a></p>
<p><a href="#">Toucan</a></p>
<p><a href="#">Toucan</a></p>
</div>
</body>
</html>Rollover 3 : Fading in 및 Fading out
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rollovers 3: Fading</title>
<style>
body {
font: 12px arial, helvetica, sans-serif;
}
#toucan {
display: block;
width: 200px;
height: 63px;
background: url("./img/toucancombo.jpg");
text-indent: -999em;
position: relative;
}
#toucan:after {
content: "";
background: url("./img/toucancombo.jpg") bottom;
display: block;
position: absolute;
top: 0;
height: 63px;
width: 200px;
opacity: 0;
-webkit-transition: .5s;
transition: .5s;
}
#toucan:hover:after {
opacity: 1;
}
</style>
</head>
<body>
<p><a href="#" id="toucan">Toucan</a></p>
</body>
</html>Rollover 4 : 변형(Transform)을 사용하여 회전.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rollovers 4: Transformations</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 50px arial, helvetica, sans-serif;
background: #fed;
}
li a {
display: block;
width: 250px;
padding: 25px;
margin: 25px auto;
background: white;
box-shadow: 0 0 5px 0 rgba(63,31,0,.5);
border-radius: 10px;
text-align: center;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
li a:hover {
-webkit-transform: rotate(-10deg) scale(2);
transform: rotate(-10deg) scale(2);
}
</style>
</head>
<body>
<ul>
<li><a href="#">Toucan!</a></li>
<li><a href="#">Toucan!</a></li>
<li><a href="#">Toucan!</a></li>
<li><a href="#">Toucan!</a></li>
<li><a href="#">Toucan!</a></li>
</ul>
</body>
</html>간단한 CSS 트랜지션(Transitions) : 텍스트 링크를 잡아 당겼을 때의 미묘한 애니메이션.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple CSS transitions: Text links</title>
<style>
* {
margin: 0;
}
body {
font: 20px/1.5 arial, helvetica, sans-serif;
color: #000;
margin: 20px;
}
p {
margin: 20px 0;
}
a {
-webkit-transition: .5s;
transition: .5s;
}
#elephant {
color: #999;
}
#elephant:hover {
color: #f66;
}
#plesiosaur {
color: #06c;
text-decoration: none;
border-bottom: 3px solid #ddd;
}
#plesiosaur:hover {
border-color: #06c;
}
#tourist {
color: #f66;
}
#tourist:hover {
color: #c00;
background: #fcc
}
#htmldog a:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<h1>Simple <a href="#">CSS transitions</a></h1>
<p>Using <a href="#">the <code>transition</code> property</a> for basic animated effects when links are hovered over.</p>
<ul>
<li><a href="" id="elephant">Changing color</a></li>
<li><a href="" id="plesiosaur">Changing border color</a></li>
<li><a href="" id="tourist">Changing color and background color</a></li>
</ul>
</body>
</html>더 많은 CSS트랜지션(Transitions) : border-radius 및 RGBa 색상 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transitions with border-radius and RGBa</title>
<style>
* {
margin: 0;
}
body {
font: 36px arial, helvetica, sans-serif;
color: #000;
background: #06c;
}
h1 {
margin: 40px;
font-size: 24px;
color: white;
text-align: center;
}
p {
height: 360px;
padding: 40px;
}
a, img {
display: block;
margin: 0 auto;
color: rgba(255,255,255,.5);
text-align: center;
text-decoration: none;
-webkit-transition: .5s;
transition: .5s;
}
a:hover {
background: rgba(255,255,255,.5);
color: white;
border-color: white;
}
#daddy {
background: rgba(0,0,0,.3);
}
#daddy a {
width: 120px;
height: 120px;
padding: 60px;
border-radius: 80px;
border: 60px solid rgba(255,255,255,.5);
}
#daddy a:hover {
border-radius: 180px;
}
#spurt {
background: rgba(0,0,0,.2);
}
#spurt a, #baby a {
width: 80px;
height: 80px;
padding: 40px;
border-radius: 60px;
border: 40px solid rgba(255,255,255,.5);
margin: 60px auto;
font-size: 24px;
}
#spurt a:hover {
width: 120px;
height: 120px;
padding: 60px;
border-width: 60px;
border-radius: 180px;
margin: 0 auto;
font-size: 36px;
}
#baby {
background: rgba(0,0,0,.1);
}
#baby a:hover {
width: 40px;
height: 40px;
padding: 20px;
border-width: 20px;
border-radius: 60px;
margin: 120px auto;
font-size: 12px;
}
#pet a {
width: 120px;
margin-top: 125px;
background: white;
border: 10px solid white;
border-radius: 10px;
opacity: .7;
}
#pet a:hover {
background: white;
box-shadow: 0 0 100px 50px rgba(255,255,255,.5);
opacity: 1;
}
</style>
</head>
<body>
<h1>CSS transitions, using <code>border-radius</code> and RGBa colors.</h1>
<p id="daddy"><a href="">Big daddy link!</a></p>
<p id="spurt"><a href="">Growth spurt link!</a></p>
<p id="baby"><a href="">Shy baby link!</a></p>
</body>
</html>CSS 전환 타이밍 기능 : 애니메이션 전환의 가속 및 감속 처리.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS transitions: Timing functions</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font: 15px arial, helvetica, sans-serif;
text-align: center;
}
h1 {
margin-top: 20px;
color: #06c;
}
li {
list-style: none;
margin: 20px 0;
background: #def;
}
li a {
display: block;
width: 300px;
padding: 20px 0;
background: #06c;
color: white;
}
#timing1 {
-webkit-transition: 1s;
transition: 1s;
}
#timing2 {
-webkit-transition: 1s linear;
transition: 1s linear;
}
#timing3 {
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
#timing4 {
-webkit-transition: 1s ease-out;
transition: 1s ease-out;
}
#timing5 {
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#timing6 {
-webkit-transition: 1s cubic-bezier(0.5,0.25,0,1);
transition: 1s cubic-bezier(0.5,0.25,0,1);
}
#timing7 {
-webkit-transition: 1s cubic-bezier(0.5,1.5,0.5,-0.5);
transition: 1s cubic-bezier(0.5,1.5,0.5,-0.5);
}
#timing8 {
-webkit-transition: 1s steps(4);
transition: 1s steps(4);
}
li a:hover {
width: 100%;
}
</style>
</head>
<body>
<h1>CSS transition timing functions</h1>
<ul>
<li><a href="" id="timing1"><code>ease</code> (default)</a></li>
<li><a href="" id="timing2"><code>linear</code></a></li>
<li><a href="" id="timing3"><code>ease-in</code></a></li>
<li><a href="" id="timing4"><code>ease-out</code></a></li>
<li><a href="" id="timing5"><code>ease-in-out</code></a></li>
<li><a href="" id="timing6"><code>cubic-bezier(0.5,0.25,0,1)</code></a></li>
<li><a href="" id="timing7"><code>cubic-bezier(0.5,1.5,0.5,-0.5)</code></a></li>
<li><a href="" id="timing8"><code>steps(4)</code></a></li>
</ul>
</body>
</html>
