블로그목적
CSS관련 링크스타일에 대해서 공부하고 정리 후 공유한다.
링크(Link)란?
사용자가 클릭하면 정해진 웹 페이지로 이동하는 속성을 가짐.
CSS에서는 이런 링크에 대한 스타일도 지정할 수 있음.
링크 스타일에 대해서 알아보자.
링크는 보통 4가지 스타일을 가진다.
a:link
방문되지 않은 링크의 스타일
a:visited
방문된 링크의 스타일
a:hover
마우스가 위에 있을 때 스타일
a:active
마우스로 클릭할 때의 스타일
링크 스타일을 설정 시 규칙
주의!
반드시 a:link / a:visited 다음에 a:hover 가 위치해야함.
그리고 a:hover 다음에 a:active 가 위치해야함.
링크의 스타일 설정하기
색상설정
예시
웹브라우저 실행화면
위의 소스코드를 웹브라우저에서 실행해보면 색상의 변화를 확인해볼 수 있음.
텍스트 크기 / 배경색 변경 설정
예시
웹브라우저 실행 화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Link test 2</title>
<style>
/* 폰트크기를 변경하는 예시 */
body { background-color: black;}
a.style1:link { color: blue; }
a.style1:visited { color: red; }
a.style1:hover { font-size: 120%; } /* 마우스가 위에 있으면, 1.2배로 커짐 */
/* 배경색을 변경하는 예시 */
a.style2:link { color:yellowgreen; }
a.style2:visited { color: yellow; }
a.style2:hover { background: blueviolet;} /*마우스가 위에 있으면, 배경색이 변화함 */
</style>
</head>
<body>
<p> 스타일을 변경하시려면 마우스를 올려놓으세요 ^^</p>
<p><a class="style1" href="http://thub.sk.com">T.hub 홈페이쥐^^, 폰트크기를 변경하는 예시예요</a></p>
<p><a class="style2" href="http://thub.sk.com">T.hub 홈페이쥐2^^, 배경색을 변경하는 예시예요</a></p>
</body>
</html>
위의 소스코드를 웹브라우저에서 실행하고 마우스를 올려놓으면, 폰트크기 및 배경색이 변경되는 것을 확인할 수 있음.
결론
링크(Link)란, 사용자가 클릭하면 정해진 웹 페이지로 이동하는 속성을 가짐
링크의 스타일은 보통 아래 4가지 스타일을 가짐.
a:link
방문되지 않은 링크의 스타일
a:visited
방문된 링크의 스타일
a:hover
마우스가 위에 있을 때 스타일
a:active
마우스로 클릭할 때의 스타일
오늘도 링크관련 CSS 스타일 처리에 대한 마술(?) 한가지 획득완료!, 감사합니다^^
오늘의 명언 한마디
시간을 미루는 습관이 있다면, 이를 버리는 것또한 역으로 시간을 늘리는 방법입니다.
단 5분이라 할지라도 늑장을 부리는 그 순간부터 시간은 버려집니다.
시간은 주어지는 것이 아닙니다. "스스로 만들어내는것" 입니다. 이렇게 생각하는 순간, 시간은 모두에게 평등하다는 사고의 틀이 깨지고 시간의 속박에서 해방될 수 있습니다.
제가 다른 사람보다 많은 양의 공부와 일을 해내면서도 시간에 쫓기지 않는 것은 시간에 얽매이지 않겠다고 결심했기 때문입니다.
"자네, 50세까지는 공부를 하게, 그나이 까지 지속적으로 공부를 하는 사람이 없으니 50세까지 공부하면 그다음에는 뒤를 쫓아올 사람이 아예 없어지지, 결국에는 일등주자가 될 수 있을거야."
이노우에 히로유키지음, "배움을 돈으로 바꾸는 기술" 중에서..
오늘의 영어 한마디
She get pleasure from spending money on clothes.
그녀는 얻고 있다. / 즐거움을 / 돈을 쓰는데 / 옷에
해설
돈을 씀으로써 즐거움을 얻고 있기 때문에 소비는 즐거움의 원인입니다.
즉, 여기서 "from" 은 원인을 나타냄.
오늘의 민법 한마디(for real estate)
제1편 총칙 / 제2장 인
제12조(한정후견개시의 심판)
1. 가정법원은 질병, 장애, 노령, 그 밖의 사유로 인한 정신적 제약으로 사무를 처리할 능력이 부족한 사람에 대하여 본인, 배우자, 4촌 이내의 친족, 미성년후견인, 미성년후견감독인, 성년후견인, 성년후견감독인, 특정후견인, 특정후견감독인, 검사 또는 지방자치단체의 장의 청구에 의하여 한정후견개시의 심판을 한다.
2. 한정후견개시의 경우에 제9조 제2항을 준용한다.
'좋아하는 것_매직IT > 14.css' 카테고리의 다른 글
| 13.웹프로그래밍, CSS, 테이블(table) 스타일을 꾸며보는 방법에 대해서 알아볼께요..^^ (0) | 2021.02.04 |
|---|---|
| 12.웹프로그래밍, CSS, 리스트(list) 스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ (0) | 2021.02.04 |
| 10.웹프로그래밍, CSS, 배경설정은 어떻게 할까요? 궁금하시면 클릭!^^ (0) | 2021.02.03 |
| 9.웹프로그래밍, CSS, 마진(margin)과 패딩(padding) 대해서 알아볼께요. ^^ (0) | 2021.02.03 |
| 8.웹프로그래밍, CSS, 경계선(border)에 대해서 알아볼께요. ^^ (0) | 2021.02.03 |
