html & css/개념
링크와 커서 스타일링
Doo Hee
2023. 7. 4. 22:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a:hover {
color: green;
}
a:visited {
color: red;
}
a:link {
color: red;
}
</style>
</head>
<body>
<!-- 링크: 페이지가 이동 -->
<!-- 버튼(연결된다는 점에서 링크와 같은 맥락을 가진다.) -->
<a href="">링크</a>
<!-- 커서(마우스 화살표), cusor -->
<!-- 모든 태그(element)에 넣을 수 있다. -->
<!-- 주어진 화면에 알맞은 커서를 사용하는 것이 중요하다.(적재적소) -->
<a href="" style="cursor: auto">cursor:auto</a>
<button style="cursor: auto">cursor:auto</button>
<!-- 브라우저에 따라 알아서 판단하여 모양이 변하기도, 안변하기도 한다. -->
<p>
<a href="" style="cursor: default">cursor:default</a>
</p>
<p>
<a href="" style="cursor: context-menu">cursor: context-menu</a>
<!-- 커서 옆에 작은 네모 박스가 보인다. -->
</p>
<p>
<a href="" style="cursor: help">cursor:help(?)</a>
</p>
<p>
<a href="" style="cursor: pointer">cursor:pointer(손)</a>
</p>
<p>
<a href="" style="cursor: progress">cursor:progress(진행중)</a>
</p>
<p>
<a href="" style="cursor: wait">cursor:wait</a>
<!-- progress와 비슷하다. 브라우저마다 progress와 모양이 다를수도, 같을수도 있다. -->
</p>
<p>
<a href="" style="cursor: cell">cursor:cell(굵은 십자가, 엑셀)</a>
</p>
<p>
<a href="" style="cursor: crosshair">cursor:crosshair(얇은 십자가)</a>
</p>
<p>
<a href="" style="cursor: text">cursor:text(I모양)</a>
</p>
<p>
<a href="" style="cursor: copy">cursor:copy</a>
<!-- 드래그 앤 드랍, 위치를 바꿀 때 주로 사용한다. -->
</p>
<p>
<a href="" style="cursor: move">cursor:move</a>
</p>
<p>
<a href="" style="cursor: not-allowed">cursor:not-allowed(금지)</a>
</p>
<p>
<a href="" style="cursor: col-resize">cursor:col-resize(열너비 조절)</a>
</p>
<p>
<a href="" style="cursor: row-resize">cursor:row-resize(행너비 조절)</a>
</p>
<p>
<a href="" style="cursor: zoom-in">cursor:zoom-in(확대)</a>
</p>
<p>
<a href="" style="cursor: zoom-out">cursor:zoom-out(축소)</a>
</p>
</body>
</html>