간단한 Flex 활용 예제
개인적으로 Flex 관련 공부하다 예제가 있어서 올립니다.
[code]
<!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>test03.html</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 140px;
gap: 20px;
}
.buttons label {
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.buttons label input {
appearance: none;
}
.buttons label span {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#555353, #363535, #303030);
border: 2px solid #222;
border-radius: 6px;
box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35), 0 5px 5px rgba(0, 0, 0, 0.5), 0 15px 25px rgba(0, 0, 0, 0.35);
}
.buttons label input:checked ~ span {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), inset 0 5px 5px rgba(0, 0, 0, 0.5),
inset 0 15px 25px rgba(0, 0, 0, 0.35);
}
.buttons label span::before {
content: "";
position: absolute;
inset: 5px 3px;
border-top: 1px solid #ccc;
filter: blur(2px);
}
.buttons label i {
position: relative;
z-index: 10;
font-size: 1.5em;
color: #111;
}
.buttons label input:checked ~ i {
color: #fff;
text-shadow: 0 0 5px #219cf3, 0 0 8px #219cf3;
}
</style>
</head>
<body>
<div class="buttons">
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-solid fa-phone"></i>
<!-- <i class="fa-solid fa-phone"></i> -->
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-solid fa-plane"></i>
<!-- <i class="fa-solid fa-phone"></i> -->
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-solid fa-moon"></i>
<!-- <i class="fa-solid fa-phone"></i> -->
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-solid fa-wifi"></i>
<!-- <i class="fa-solid fa-phone"></i> -->
</label>
</div>
</body>
</html>
[/code]
댓글 1개
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1277 | 기타 |
선택과집중
|
2개월 전 | 150 | |
| 1276 | CSS |
선택과집중
|
2개월 전 | 272 | |
| 1275 | CSS |
선택과집중
|
3개월 전 | 272 | |
| 1274 | CSS |
선택과집중
|
3개월 전 | 465 | |
| 1273 | 기타 |
선택과집중
|
4개월 전 | 402 | |
| 1272 | CSS |
선택과집중
|
4개월 전 | 532 | |
| 1271 | CSS |
선택과집중
|
5개월 전 | 579 | |
| 1270 | CSS |
선택과집중
|
5개월 전 | 459 | |
| 1269 | CSS |
선택과집중
|
5개월 전 | 541 | |
| 1268 | CSS | 6개월 전 | 430 | ||
| 1267 | 10개월 전 | 711 | |||
| 1266 | HTML | 10개월 전 | 839 | ||
| 1265 | CSS |
 7reemoon |
1년 전 | 770 | |
| 1264 | 1년 전 | 1262 | |||
| 1263 | HTML |
 piadream |
1년 전 | 794 | |
| 1262 | CSS |
piadream |
1년 전 | 999 | |
| 1261 | CSS |
piadream |
1년 전 | 1014 | |
| 1260 | HTML | 2년 전 | 1491 | ||
| 1259 | 기타 | 2년 전 | 830 | ||
| 1258 | CSS |
 김성래yo |
2년 전 | 1587 | |
| 1257 | HTML |
piadream |
2년 전 | 1373 | |
| 1256 | CSS |
돈도없어개발하기도시러
|
2년 전 | 1279 | |
| 1255 | 2년 전 | 3614 | |||
| 1254 | 2년 전 | 4797 | |||
| 1253 | 2년 전 | 1554 | |||
| 1252 | 레이아웃 |
swallow
|
2년 전 | 1786 | |
| 1251 | 웹접근성 |
두리삼촌v
|
2년 전 | 2060 | |
| 1250 | 레이아웃 |
두리삼촌v
|
2년 전 | 1694 | |
| 1249 | 레이아웃 |
두리삼촌v
|
2년 전 | 3220 | |
| 1248 | 기타 |
돈도없어개발하기도시러
|
2년 전 | 1151 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기