syleemomo의 IT 블로그

프론트엔드/HTML & CSS 연습과제 해답

블록 및 인라인 레벨 요소 연습과제 해답

syleemomo 2023. 6. 16. 16:18
728x90

연습과제 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

'프론트엔드/HTML & CSS 연습과제 해답'의 다른글

  • 현재글블록 및 인라인 레벨 요소 연습과제 해답

관련글

티스토리툴바