NAVER
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box 속성</title>
<style>
/* .box를 클릭하면 naver로 이동하는 버튼 (마우스 올리면 변경) */
.box{
width: 100px;
height: 30px;
font-family: 'PT Sans Narrow', sans-serif;
background-color: #19ce60;
border: 1px solid #15c654;
border-radius: 10px;
font-size: 20px;
text-align: center;
color: white;
padding-top: 5px;
}
a{
text-decoration-line: none;
}
.box:hover{
background-color: rgb(48, 165, 93);
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
<a href="http://www.naver.com" target="_blank">
<div class="box"> NAVER </div></a>
</body>
</html>'HTML.CSS.JS > css' 카테고리의 다른 글
| [CSS] 버튼 만들기 position : absloute (0) | 2023.04.24 |
|---|---|
| [CSS] display : flex 속성 (0) | 2023.04.12 |
| [CSS] cursor : pointer, 아이콘 사이트 (0) | 2023.04.06 |
| [CSS] shadow 그림자 설정 (0) | 2023.04.06 |
| [CSS] background 배경 속성 (0) | 2023.04.06 |