웹 페이지의 하이퍼링크를 나타내는 a태그는 기본적으로 밑줄이 표시됩니다. 이번 글에서는 a태그를 깔끔하고 페이지에 어울리는 링크로 만들기 위한 CSS를 사용해서 밑줄을 지우고 클릭이 되기 전과 후의 hover와 active 등 a태그의 속성들에 대해서 알아보겠습니다.
<a> 태그의 CSS 속성
HTML의 a태그를 스타일링하는 것은 웹 페이지의 디자인 UI와 UX를 향상시키는데 중요한 역할을 합니다. CSS를 사용하여 a태그의 다양한 상태에 따른 스타일을 지정할 수 있는 방법에 대해서 알아보겠습니다.
| :link | 방문 전 링크의 상태를 지정합니다. | 예 : a:link { color: red; } |
| :visited | 사용자가 이미 방문한 링크의 상태를 지정합니다. | 예 : a:visited { color: gray; } |
| :hover | 마수으 오버 시 링크의 상태를 지정합니다. | 예 : a:hover { color: black; } |
| :active | 링크를 클릭하는 순간의 상태를 지정합니다. | 예 : a:active { color: green; } |
팁으로 CSS 적용 순서가 있습니다. :link, :visited, :hover, :active 순서로 스타일을 적용해야 합니다. 순서가 바귀면 스타일이 제대로 적용되지 않을 수 있습니다. 또한 만약<a> 태그 자체에서 color를 사용하면( a {color:white;} ) 다른 속성에서 color 속성이 적용되지 않을 수 있습니다.
a:link {
color: red;
}
a:visited{
color: gray;
}
a:hover {
color: black;
}
a:active {
color: green;
}
<a> 태그의 밑줄을 지우는 방법
웹 페이지에서 a태그의 밑줄은 변결하는 속성은 text-decoration으로 a태그의 밑줄의 위치와 형태 등을 변경할 수 있습니다.
| text-decoration | none | 선을 제거 |
| line-through | 글자 중간에 선을 표시 | |
| overline | 글자 위에 선을 표시 | |
| underline | 글자 아래 선을 표시 | |
| initial | 기본 값으로 설정(글자 아래 선) | |
| inherit | 부모 요소의 속성을 상속 |
여러 속성이 있지만 자주 사용되는 밑줄을 없애는 none과 밑줄을 표시하는 underline을 예시입니다.
<style>
a{
text-decoration: none;
}
.under{
text-decoration:L nuderline;
}
</style>
...
<body>
<a href="#">page</a>
<a class="under" href="#">page</a>
</body>인스타그램 화면을 만들어보면서 공부를 하게 되었습니다. 같은 페이지에 다른 a태그가 있어서 id를 다르게 하여 CSS를 적용했습니다.
색상을 선택할 때 포토샵을 사용하면서 색상코드를 복사해서 CSS의 color에 붙여서 사용했는데 색상코드 앞에 '#'을 붙이지 않아서 색상이 왜 안 바뀌는지 한참을 고생했다..
<style>
#joinbtn {
text-decoration: none;
}
#joinbtn:link {
color:#0095f6;
}
#joinbtn:hover {
color:#0095f6;
}
#joinbtn:visited {
color:#0095f6;
}
#joinbtn:active {
color:#87CEFA;
}
</style>
...
<div class="pt-3 pb-3">
계정이 없으신가요?
<a id="joinbtn" href="#" class="fw-bolder">회원가입</a>
</div>
:link와 visited, hover는 아래와 같이 나타납니다.
active는 클릭되는 순간의 상태를 말하는 것으로 클릭되는 순간에는 색이 연하게 변하게 적용했습니다.
