728x90
사용된 개념
1. border-box
2. 블록요소 인라인요소
3. 상태 연산자
4. 부정 연산자
5. 너비제한 max-width
6. 가로중앙 정렬 margin: auto
7. 텍스트 세로중앙 정렬 vertical-align: middle
8. 블러처리 backdrop-filter: blur()
9. 글래스모피즘 : background-color: rgba(255, 255, 255, .3)
10. 세로중앙 정렬 position: absolute left: 50% top: 50% transform: translate(-50%, -50%)
6. 클래스 간결하게 작성하고 레고 블록처럼 추가하기
<!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>회원가입 페이지</title>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<header>
<a href="#">
<img src="http://tfgms.com/sandbox/dailyui/logo-1.png" alt="Authentic Collection">
</a>
</header>
<h1 class="text-center">Register</h1>
<form action="">
<div class="line remove-margin">
<div class="horizontal-align left-padding">
<label for="first-name">FIRST NAME</label>
<input type="text" id="first-name" name="first-name">
</div>
<div class="horizontal-align left-padding ">
<label for="last-name">LAST NAME</label>
<input type="text" id="last-name" name="last-name">
</div>
</div>
<div class="line left-padding">
<label for="email">EMAIL</label>
<input type="email" id="email" name="email">
</div>
<div class="line left-padding">
<label for="password">PASSWORD</label>
<input type="password" id="password" name="password">
</div>
<div class="checkbox-container text-center">
<input type="checkbox" id="signup" name="signup" class="hidden">
<label for="signup">
<span class="material-icons-outlined pointer">
check_box_outline_blank
</span>
<span class="material-icons-outlined hidden pointer">
check_box
</span>
</label>
<label for="signup" class="pointer">Sign me up for the weekly newsletter.</label>
</div>
<div class="text-center">
<button type="submit">Sign Me Up</button>
</div>
</form>
</div>
</body>
</html>@import url(https://fonts.googleapis.com/css?family=Cookie|Raleway:300,700,400);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap');
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
body{
background: url('http://tfgms.com/sandbox/dailyui/bg-1.jpg') center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
font-size: 18px;
font-family: 'Raleway', sans-serif;
position: relative;
}
header img{
max-width: 240px;
margin: 0 auto;
display: block;
}
.form-container{
max-width: 480px;
padding: 2rem;
border-radius: 0.5em;
box-shadow: 0 0 1rem 0 rgba(51,51,51,0.25);
z-index: 1;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, .3);
color: #333;
}
.form-container h1{
margin: 2rem 0;
font-size: 3.5rem;
font-weight:lighter;
font-family: 'Cookie', cursive;
}
.form-container button{
background: rgba(255,255,255,0.25);
border: 1px solid #333;
font-size: 1.3rem;
line-height: 1rem;
padding: 0.5em 0.5em;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.form-container button:hover{
background: #333;
color: #fff;
outline: none;
}
.text-center{
text-align: center;
}
.form-container form .line{
border-bottom: 1px solid #333;
margin-bottom: .5rem;
}
.left-padding{
padding-left: .5rem;
}
.remove-margin{
font-size: 0;
}
.form-container form label{
font-size: .8rem;
}
.horizontal-align{
display: inline-block;
width: 50%;
}
.horizontal-align label, input{
display: block;
width: 100%;
}
.form-container form input{
outline: none; border: none;
background: transparent;
caret-color: #333;
font-size: 1.5rem;
font-family: 'Noto Sans KR', sans-serif;
height: 2rem; line-height: 2rem;
}
.horizontal-align:nth-of-type(2){
border-left: 1px solid #333;
}
.hidden{
display: none;
}
.narrow{
max-width: 24px;
}
.checkbox-container{
margin-top: 1rem;
padding-bottom: .8rem;
}
.pointer{
cursor: pointer;
}
.material-icons-outlined{
vertical-align: middle;
}
input[type="checkbox"]:checked ~ label > span.hidden{
display: inline-block;
}
input[type="checkbox"]:checked ~ label > span:not(.hidden){
display: none;
}728x90
'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글
| 핀터리스트 연습과제 (0) | 2023.06.27 |
|---|---|
| 4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과 (0) | 2023.06.22 |
| 5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답 (0) | 2023.06.20 |
| 8. 표를 만드는 테이블 요소 연습문제 해답 (0) | 2023.06.19 |
| 블록 및 인라인 레벨 요소 연습과제 해답 (3) | 2023.06.16 |