CSS links
CSS를 사용하면 링크를 다양한 방식으로 스타일링할 수 있다.
CSS sytling link
link 는 모든 CSS 속성(예: 색상, 글꼴 패밀리, 배경 등)으로 스타일을 지정할 수 있다.
| <!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <h2>색상 스타일을 설정한 링크</h2> <p><b><a href="default.asp" target="_blank">이것은 링크입니다.</a></b></p> </body> </html> |
a 요소에 색상을 hotpink로 설정하였고, 아래 링크에 색상이 hotpink로 설정한 결과 화면은 아래 그림과 같다.
또한 링크는 어떤 상태에 있는지에 따라 다르게 스타일을 지정할 수 있다.
네 가지 링크 상태는 다음과 같다:
- a:link - 방문하지 않은 일반 링크
- a:visited - 사용자가 방문한 링크
- a:hover - 사용자가 마우스를 위로 이동할 때 링크
- a:active - 클릭하는 순간의 링크
| <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } </style> </head> <body> <h2>상태에 따른 스타일링 링크</h2> <p><b><a href="default.asp" target="_blank">이것은 링크이다.</a></b></p> <p><b>참고: </b> a:hover는 CSS 정의에서 a:link 및 a:visit 다음에 와야 합니다.</p> <p><b>참고:</b> a:active MUST는 CSS 정의에서 a:hover 다음에 와야 효과적입니다.</p> </body> </html> |
a요소에 a:link 상태는 색상이 빨강색, a:visited 상태는 색상이 초록색, a:hover 상태에 색상은 hotpink, a:active상태에 색상은 파랑색으로 설정하였고 아래 결과 화면은 다음 그림과 같다.
여러 링크 상태에 대한 스타일을 설정할 때 다음과 같은 몇 가지 순서 규칙이 있다:
a:hover는 반드시 a:link와 a:visit 뒤에 와야 한다
a:active는 a:hover 다음에 와야 한다
CSS text-decoration 속성과 link
text-decoration 속성은 대부분 링크에서 밑줄을 제거하는 데 사용된다:
| <!DOCTYPE html> <html> <head> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <h2>text-decoration 속성의 스타일 링크</h2> <p><b><a href="default.asp" target="_blank">이것은 링크이다.</a></b></p> <p><b>참고: </b> a:hover는 반드시 a:link 다음에 와야 하며, a:visit는 CSS 정의에서 유효합니다.</p> <p><b>참고:</b> a:active MUST는 CSS 정의에서 a:hover 다음에 와야 효과적입니다.</p> </body> </html> |
a:link 상태의 text-decoration은 none, a:visited 상태의 text-decoration은 none, a:hover 상태의 text-decoration은 underline, a:active상태의 text-decoration은 underline으로 설정하였고, 위의 코드를 실행하면 아래 그림과 같다.
CSS background-color 속성과 link
background-color 속성을 사용하여 링크의 배경색을 지정할 수 있다:
| <!DOCTYPE html> <html> <head> <style> a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } </style> </head> <body> <h2>background-color 속성과 스타일 링크</h2> <p><b><a href="default.asp" target="_blank">이것은 링크이다.</a></b></p> <p><b>참고: </b> a:hover는 반드시 a:link 다음에 와야 하며, a:visit는 CSS 정의에서 유효합니다.</p> <p><b>참고:</b> a:active MUST는 CSS 정의에서 a:hover 다음에 와야 효과적입니다.</p> </body> </html> |
a:link 상태의 background-color 은 yellow, a:visited 상태의 background-color 은 cyan, a:hover 상태의 background-color 은 lightgreen, a:active상태의 background-color 은 hotpink으로 설정하였고, 코드를 실행한 결과 화면은 다음 그림과 같다.
CSS link와 버튼
다음 예제에서는 여러 CSS 속성을 결합하여 링크를 상자/버튼으로 표시하는 고급 예제를 보여 준다:
| <!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <h2>링크 버튼</h2> <p>버튼모양의 링크:</p> <a href="default.asp" target="_blank">버튼 링크</a> </body> </html> |
a:link, a:visited 상태에 background-color는 #f44336, color는 흰색, padding 14px, 25px, text-align은 가운데, text-decoration은 none, display는 inline-block으로 박스 모양에 배경색이 붉은 색의 모양이 설정하였고, a:hover, a:active상태에서는 background-color는 red색상으로 설정하였다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS 하이퍼링크와 link
다음 예에서는 하이퍼링크에 다른 스타일을 추가하는 방법을 보여 준다:
| <!DOCTYPE html> <html> <head> <style> a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:monospace;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> </head> <body> <h2>스타일 링크</h2> <p>링크 위에 마우스를 놓고 레이아웃 변경을 봅니다:</p> <p><b><a class="one" href="default.asp" target="_blank">이 링크는 색상이 변한다.</a></b></p> <p><b><a class="two" href="default.asp" target="_blank">이 링크는 font-size가 변한다.</a></b></p> <p><b><a class="three" href="default.asp" target="_blank">이 링크는 background-color가 변한다.</a></b></p> <p><b><a class="four" href="default.asp" target="_blank">이 링크는 font-family가 변한다.</a></b></p> <p><b><a class="five" href="default.asp" target="_blank">이 링크는 text-decoration이 변한다.</a></b></p> </body> </html> |
a.one:link color는 #ff0000, visited 상태의 color는 #0000ff, hover상태의 color는 #ffcc00이며
a.two:link color는 #ff0000, visited 상태의 color는 #0000ff, hover상태의 font-size는 150%이며
a.three:link color는 #ff0000, visited 상태의 color는 #0000ff, hover상태의 background-color는 #66ff66 이며
a.four:link color는 #ff0000, visited 상태의 color는 #0000ff, hover상태의 font-family는 monospace이며
a.five:link color는 #ff0000, text-decoration은 none이며, visited 상태의 color는 #0000ff, , text-decoration은 none, hover상태의 text-decoration는 underline으로 설정하였으며 결과 화면은 아래 그림과 같다.
CSS 박스와 link
링크 상자/단추를 만드는 방법에 대한 다른 예:
| <!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: green; color: white; } </style> </head> <body> <h2>링크 버튼</h2> <a href="default.asp" target="_blank">링크 버튼</a> </body> </html> |
a:link, a:visited 상태에 background-color는 white, color는 black, border는 2px, solid green, padding은 10px, 20px, text-align은 center, text-decoration은 none, display는 inline-block으로 설정하였으며
a:hover, a:active 상태에는 background-color는 green, color는 white로 설정하였고 위의 코드를 실행한 결과 화면은 아래 그림과 같다. '링크 버튼' 박스에 마우스를 올리면 배경색이 초록색, 글자색은 흰색으로 보여진다.
CSS 커서
다음 예에서는 다양한 유형의 커서를 보여 줍니다(링크에 유용할 수 있음):
| <!DOCTYPE html> <html> <body> <h2>cursor 속성</h2> <p>커서를 변경하려면 단어 위에 마우스를 놓습니다.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html> |
마우스를 각 글자위에 올려놓으면 마우스 모양이 변경된다.
style에 cursor를 auto, crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait 모양의 커서 모양을 확인할 수 있다.
지금까지 CSS link와 관련된 내용을 살펴보았다.
단순히 link뿐 아니라 다른 속성과 조합하여 link를 많이 활용한다.
link와 텍스트, link와 박스(버튼개념), 그외에 link가 CSS의 다양한 속성들(색상, font-family, background-color 등)과 조합을 통해 link를 활용할 수 있다.
지금의 예제는 꾀나 활용할만한 내용들이 많으니 꼭 손으로, 눈으로, 머리로 실습하고 익히기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS Table (0) | 2023.08.14 |
|---|---|
| CSS lists (0) | 2023.08.13 |
| CSS font 속성 (0) | 2023.08.11 |
| CSS Icons (0) | 2023.08.10 |
| CSS 어울리는 글꼴 조합 (0) | 2023.08.09 |
댓글