이퍼링크 스타일링을 위한 6가지 다양한 예제를 제공하겠습니다. 각 예제는 다른 하이퍼링크 스타일을 적용하며, 주석과 함께 상세히 설명하겠습니다. 또한, HTML과 CSS를 통합하여 제공하겠습니다.
예제 1: 기본 링크 스타일
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 링크 스타일 */
a.default-link {
text-decoration: underline; /* 밑줄 스타일 */
color: #3498db; /* 링크 색상 */
}
</style>
</head>
<body>
<a href="#" class="default-link">기본 링크</a>
</body>
</html>
예제 2: 버튼 스타일 링크
<!DOCTYPE html>
<html>
<head>
<style>
/* 버튼 스타일 링크 */
a.button-link {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<a href="#" class="button-link">버튼 스타일 링크</a>
</body>
</html>
예제 3: 그라데이션 링크
<!DOCTYPE html>
<html>
<head>
<style>
/* 그라데이션 링크 */
a.gradient-link {
background: linear-gradient(to right, #3498db, #2980b9); /* 그라데이션 배경 */
color: #ffffff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<a href="#" class="gradient-link">그라데이션 링크</a>
</body>
</html>
예제 4: 아이콘 링크
html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
/* 아이콘 링크 */
a.icon-link {
text-decoration: none;
color: #3498db;
font-size: 24px;
}
</style>
</head>
<body>
<a href="#" class="icon-link">📦</a> <!-- 📦는 편지 아이콘 -->
</body>
</html>
예제 5: 이미지 링크
<!DOCTYPE html>
<html>
<head>
<style>
/* 이미지 링크 */
a.image-link {
text-decoration: none;
color: #3498db;
background-image: url('link-icon.png'); /* 이미지 링크 아이콘 */
background-size: 20px 20px;
background-repeat: no-repeat;
padding-left: 30px;
}
</style>
</head>
<body>
<a href="#" class="image-link">이미지 링크</a>
</body>
</html>
예제 6: 마우스 오버 링크
<!DOCTYPE html>
<html>
<head>
<style>
/* 마우스 오버 링크 */
a.hover-link {
text-decoration: none;
color: #3498db;
transition: color 0.3s; /* 색상 변경 트랜지션 */
}
a.hover-link:hover {
color: #e74c3c; /* 마우스 오버 시 색상 변경 */
}
</style>
</head>
<body>
<a href="#" class="hover-link">마우스 오버 링크</a>
</body>
'CSS' 카테고리의 다른 글
| 박스 그림자 효과: 박스에 그림자 효과 추가. (0) | 2023.12.23 |
|---|---|
| 투명도 조절: 요소의 투명도 설정. (0) | 2023.12.23 |
| 버튼 스타일링: 버튼 디자인 커스터마이징. (0) | 2023.12.23 |
| 리스트 스타일 변경: 목록 요소의 스타일 변경. (0) | 2023.12.23 |
| 그림자 효과: 요소에 그림자 효과 추가. (0) | 2023.12.23 |