-
블록 및 인라인 레벨 요소 연습과제 해답프론트엔드/HTML & CSS 연습과제 해답 2023. 6. 16. 16:18728x90
연습과제 1
구글 폰트를 키우면 아이콘 크기가 커지면서 아웃라인이 두꺼워지는데 구글 폰트에서는 폰트 두께도 설정할 수 있으므로 이를 활용하면 폰트 크기가 커져도 얇게 보이도록 할 수 있다.
<!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>Document</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="service-container"> <div class="center"> </div> <div class="center"> <div class="service-item"> <span class="material-icons-outlined"> play_circle_outline </span> <h1>끊김 없는 백그라운드 <br> 재생</h1> <p> 화면을 끄거나 다른 앱을 사용하면서 광고로 끊김 없이 동영상을 시청해 보세요 </p> </div> <div class="service-item"> <span class="material-icons-outlined"> download_for_offline </span> <h1>오프라인 저장</h1> <p> 동영상을 저장하여 기내, 출퇴근길 등에서도 시청하세요. </p> </div> <div class="service-item"> <span class="material-icons-outlined"> play_circle_outline </span> <h1>YouTube Music <br>Premium</h1> <p> YouTube Music에서 맞춤 동영상, 재생목록, 라이브 음원 등을 감상해 보세요. </p> </div> </div> </div> </body> </html>
html, body{ margin: 0; padding: 0; } .service-container .center{ width: 60%; margin: 50px auto; text-align: center; font-size: 0; /* border: 1px solid green; */ } .service-container .service-item{ display: inline-block; width: 33%; min-width: 300px; vertical-align: top; /* border: 1px solid blue; */ } .service-container .service-item .material-icons{ color: red; font-size: 6rem; } .service-container .service-item .material-icons-outlined{ font-size: 7rem; font-weight: 300; color: red; } .service-container .service-item h1{ font-weight: 300; font-size: 32px; margin-bottom: .1rem; min-height: 150px; } .service-container .service-item p{ color: #606060; font-size: 16px; margin: .2rem; }
연습과제 2
<!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>Document</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="service-container"> <div class="center"> <div class="logo"> <span class="material-icons"> smart_display </span> <h1>Youtube Premium</h1> </div> <div class="guide"> <p>YouTube와 YouTube Music에서 광고로 끊김 없는 감상, 오프라인 저장, 그리고 백그라운드 재생</p> </div> <div class="price"> <button>무료 체험하기</button> <h2>3개월 무료 체험 • 이후 ₩10,450/월 • VAT 포함</h2> <span>체험판이 종료되기 7일 전에 알림 전송</span><br> <span>반복 결제 • 언제든지 취소 가능</span> </div> <div class="restriction"> <a href="#">제한사항이 적용됩니다. 여기에서 자세히 알아보세요.</a> </div> </div> <div class="center"> <div class="service-item"> <span class="material-icons-outlined"> play_circle_outline </span> <h1>끊김 없는 백그라운드 <br> 재생</h1> <p> 화면을 끄거나 다른 앱을 사용하면서 광고로 끊김 없이 동영상을 시청해 보세요 </p> </div> <div class="service-item"> <span class="material-icons-outlined"> download_for_offline </span> <h1>오프라인 저장</h1> <p> 동영상을 저장하여 기내, 출퇴근길 등에서도 시청하세요. </p> </div> <div class="service-item"> <span class="material-icons-outlined"> play_circle_outline </span> <h1>YouTube Music <br>Premium</h1> <p> YouTube Music에서 맞춤 동영상, 재생목록, 라이브 음원 등을 감상해 보세요. </p> </div> </div> </div> </body> </html>
html, body{ margin: 0; padding: 0; } .service-container .center{ width: 60%; margin: auto; text-align: center; font-size: 0; /* border: 1px solid green; */ } .service-container .service-item{ display: inline-block; width: 33%; min-width: 300px; vertical-align: top; /* border: 1px solid blue; */ } .service-container .service-item .material-icons{ color: red; font-size: 6rem; } .service-container .service-item .material-icons-outlined{ font-size: 7rem; font-weight: 150; color: red; } .service-container .service-item h1{ font-weight: 300; font-size: 32px; margin-bottom: .1rem; min-height: 150px; } .service-container .service-item p{ color: #606060; font-size: 16px; margin: .2rem; } .service-container .logo h1{ display: inline-block; font-size: 3rem; letter-spacing: -2px; margin: 0; position: relative; top: 5px; } .service-container .logo .material-icons{ font-size: 5rem; color: red; vertical-align: top; } .service-container .guide p{ font-size: 2rem; font-weight: 300; color: #000; width: 50%; margin: auto; } .service-container .price{ margin-top: 3rem; } .service-container .price button{ background-color: #065fd4; color: #fff; padding: .7rem 1.2rem; border: none; border-radius: 1.2rem; font-size: 14px; } .service-container .price h2{ font-size: 1.8rem; font-weight: 300; line-height: 2.8rem; } .service-container .price span{ font-size: 1.2rem; font-weight: 300; } .service-container .restriction{ margin-top: 4rem; margin-bottom: 7rem; } .service-container .restriction a{ text-decoration: none; font-size: .9rem; margin-top: 5rem; } @media (max-width: 450px){ .service-container .center{ width: 77%; } }
728x90'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글
4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과 (0) 2023.06.22 8. 폼 요소의 종류 연습과제 해답 (0) 2023.06.21 5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답 (0) 2023.06.20 8. 표를 만드는 테이블 요소 연습문제 해답 (0) 2023.06.19 6. 제목, 문단, 구분선, 정형화된 텍스트 연습과제 해답 (0) 2023.06.15