💙 들어가며
여러가지 슈도클래스를 활용하여
인풋박스의 다양한 디자인을 구현해보자.
✏️ 학습내용 정리
#슈도클래스: :valid, :blank, :checked, :has()
이름 그대로 직관적으로
특정 상태인지를 확인해서
(:valkd, :blank, :checked 등)
해당 상태를 가지고 있는지를 조건처리해
스타일을 먹일 수 있는 슈도클래스 has()이다.
아래처럼 라벨이 체크드된
input박스를 가지고 있는지 확인해서
스타일 먹일 수 있다.
HTML 예시로 다음과 같이 class를 설정하고
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{inc/layout.html}">
<head>
<link href="/css/components/user/signup.css" rel="stylesheet" type="text/css">
</head>
<body>
<main layout:fragment="main">
<section class="signup-form">
<h1 class="heading-7 text-align:center">Rland 회원가입</h1>
<form method="post">
<fieldset>
<legend class="d:none">가입정보</legend>
<label class="">
<input name="name" type="text" placeholder="이름" required>
</label>
<label class="">
<input name="username" type="text" placeholder="아이디" required>
</label>
<label class="">
<input name="password" type="password" placeholder="비밀번호" required>
</label>
<label>
<input class="" type="password" placeholder="비밀번호확인" required>
</label>
<label>
<input class="" name="email" type="text" placeholder="이메일" required>
</label>
</fieldset>
<!-- <div>
<label><input class="d:none" type="checkbox">관리자 계정</label>
<label><input class="d:none" type="checkbox">일반 사용자 계정</label>
</div>-->
<div class="mt:5">
<button class="btn btn-main w:1" type="submit">가입하기</button>
</div>
</form>
</section>
</main>
</body>
</html>
CSS에서 다음과 같이
해당되는 상태값(:valid, :blank)
슈도클래스를 활용하여 색깔을 주거나
input{
background-color: red;
}
input:valid{
background-color: green;
}
input:blank{
background-color: blue;
}
상태값을 가지고 있는지를
슈도클래스 has()를 통해 조건처리하여
icon 등을 추가할 수 있다.
.signup-form{
box-sizing: border-box;
width: 250px;
margin-left: auto;
margin-right: auto;
padding: 80px 0 100px 0;
}
.signup-form
form{
margin-top: 60px;
}
.signup-form
form
input[type="text"],
.signup-form
form
input[type="password"]{
font-size: 16px;
text-align: center;
width: 100%;
height: 45px;
border-bottom: 1px solid var(--color-base-6);
}
.signup-form
label{
display: inline-flex;
width: 100%;
font-size: 0;
position: relative;
justify-content: end;
align-items: center;
}
.signup-form
label::after{
position: absolute;
content: "";
display: inline-flex;
width: 25px;
height: 25px;
background-size: contain;
}
.signup-form
label:has(:focus)::after{
background-color: red;
-webkit-mask-image: url(/image/icon/cancel_circle.svg);
mask-image: url(/image/icon/cancel_circle.svg);
}
.signup-form
label:has(:valid)::after{
background-color: green;
-webkit-mask-image: url(/image/icon/check_circle.svg);
mask-image: url(/image/icon/check_circle.svg);
}
label{
background-color: gray;
font-size: 0;
display: inline-flex;
width: 70px;
height: 20px;
}
label::before{
content: "";
display: inline-flex;
width: 20px;
height: 20px;
background-color: blue;
}
label:has(:checked){
background-color: greenyellow;
justify-content: end;
}
폼에 내용이 들어가서 valid하다면
초록색 check_circle.svg가 뜬다.
focus가 되면 빨간색 x버튼 cancel_circle.svg가 뜸!
💙 마치며
1.
슈도클래스를 활용하면
자바스크립트를 이용하지 않고
CSS만 이용해서
다양한 조건처리를 할 수도 있다!
'HTML & CSS' 카테고리의 다른 글
| [뉴렉처 6기] HTML & CSS│position(relative, absolute)와 flex 정렬 동시 적용 (0) | 2023.10.25 |
|---|---|
| [뉴렉처 6기] HTML & CSS│transition의 초기값 (0) | 2023.10.15 |
| [뉴렉처 6기] HTML & CSS│sticky와 fixed의 차이 (0) | 2023.10.10 |
| [뉴렉처 6기] HTML & CSS│Util과 Component│Form 유효성 검사│width: 100% vs inherit (0) | 2023.10.02 |
