-
8. 폼 요소의 종류 연습과제 해답프론트엔드/HTML & CSS 연습과제 해답 2023. 6. 21. 18:31728x90
사용된 개념
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