쫑가 과정

페이지 클론 본문

프로그래밍 공부/CSS

페이지 클론

쫑가 2021. 8. 13. 01:32 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>You Are Awesome!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <div class="bgc__top"></div>
    <header>
      <div class="status-bar">
        <i class="fas fa-align-right"></i>
        <h2>library</h2>
        <i class="fas fa-shopping-basket"></i>
      </div>
      <form class="searchbar">
        <div class="searchbar-main">
          <input type="text" placeholder="Search books..."/>
          <i class="fas fa-search"></i>
        </div>
      </form>
    </header>
    <main>
      <div class="book-main">
        <h1 class="book-main__title">Book of the day</h1>
        <div class="book-main__body">
          <img class="book-main__img" src="https://m.media-amazon.com/images/I/512eZ2k0z0L.jpg" alt="No Fixed Abode poster">
          <div class="book-main__into" >
            <h1 class="book-main__name">No Fixed abode</h1>
            <div class="book-main__author">Journey Through</div>
            <div class="book-main__star" >
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <div class="book-main__tag" >
              <div class="journey__tag">Journey</div>
              <div class="bio__tag">Bio graphy</div>
            </div>
            <div class="book-main__btns">
              <span class="book-main__favbtn">
                <i class="fas fa-bookmark"></i>
              </span>
              <button "book-main__nowbtn" type="button">Book Now</button>
            </div>
          </div>
          
        </div>
      </div>
      <div class="top-advent">
        <h1 class="top-adventure__title">Top Adventures</h1>
        <div class="top-adventure__books">
          <div>
            <img src="http://image.yes24.com/momo/TopCate2343/MidCate006/234259264.jpg" alt="Hold still book cover" />
            <div class="star">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
          <div>
            <img src="https://embed.cdn.pais.scholastic.com/v1/channels/tso/products/identifiers/isbn/9780439574242/primary/renditions/700?useMissingImage=true" alt="Jungle book book tiger cover" />
            <div class="star">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
          <div>
            <img src="https://bizarrevictoria.files.wordpress.com/2017/01/download-1.jpg" alt="Jungle book book leaves cover" />
            <div class="star">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
          <div>
            <img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1539643660l/40535975._SY475_.jpg" alt="The Arrival of someday book cover" />
            <div class="star">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
          <div>
            <img src="http://image.yes24.com/goods/78595893/XL" alt="Studying better than dead book cover"" />
            <div class="star">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="popular-authors">
        <h1 class="popular-authors__title">Popular authors</h1>
        <div class="popular-authors__body">
          <img class="popular-authors__img" src="https://awoiaf.westeros.org/images/thumb/4/4b/George_R_R_Martin.jpg/1200px-George_R_R_Martin.jpg" alt="George_R_R_Martin img">
          <div class="popular-authors__into" >
            <h1 class="popular-authors__name">George Raymond Richard Martin</h1>
            <div class="popular-authors__author">Modern American science fiction writer, screenwriter, producer and editor, winner of many literary awards.</div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
* {
  box-sizing: border-box;
}
body {
  /* background-color: rgb(245, 205, 26); */
  min-width: 395px;
  background-color: rgb(248, 248, 248);
}
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 10px 20px 10px;
}
.fa-align-right {
  transform: rotate(180deg); 
}
.searchbar {
  display: flex;
  justify-content: center;
}
.searchbar-main {
  display: flex;
  border: 1px black solid;
  background-color: white;
  width: 90%;
  align-items: center;
  height: 50px;
  border-radius: 25px;
  border-color: white;
}
.searchbar-main input {
  width: 95%;
  margin-left: 10px;
  padding-left: 10px;
  border: none; 
}
input::placeholder {
  color: rgb(230, 230, 230);
}
.fa-search {
  color: rgb(230, 230, 230);
  padding-right: 10px;
}

main {
  margin: 25px 0 10px 5%;
}
.book-main,
.top-advent,
.popular-authors {
  margin-bottom: 30px;
}
h1 {
  margin: 0 0 25px 0;
  font-size: 25px;
}
.book-main__body,
.popular-authors__body {
  display: flex;
}
.book-main__img {
  width: 35%;
  height: 10%;
  border-radius: 15px;
}
.popular-authors__img {
  width: 35%;
  height: 140px;
  border-radius: 15px;
}
.book-main__into,
.popular-authors__into {
  width: 65%;
  padding-left: 20px;
  position: relative;
}
.book-main__name,
.popular-authors__name {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.3;
}
.book-main__author,
.popular-authors__author {
  font-size: 15px;
  color: rgb(230, 230, 230);
  letter-spacing: 1px;
  line-height: 1.4;
}
.book-main__star {
  padding: 5% 0 5% 0;
  color: rgb(245, 205, 26);
}
.fa-star:last-child {
  color: rgb(230, 230, 230);
}
.book-main__tag {
  display: flex;
  padding: 5% 0 5% 0;
}
.journey__tag,
.bio__tag {
  border: 1px white solid;
  margin: 0 5% 5% 0px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  font-size: 15px;
  border-radius: 10px;
  background-color: rgb(245, 243, 243);
}
.book-main__btns {
    display: flex;
    position: absolute;
    width: 100%;
    bottom: 0;
}
.book-main__favbtn {
  border: 1px rgb(245, 205, 26) solid;
  border-radius: 50%;
  background-color: rgb(245, 205, 26);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
.book-main__btns button {
  width: 120px;
  height: 40px;
  margin : 10% 0 0 20%;
  background-color: black;
  color: white;
  border-radius: 10px;
}
.top-adventure__books {
  width: 100%;
  display: flex;
  overflow-x: hidden;
  box-sizing: content-box;
  
}
.top-adventure__books:hover{
  overflow-x: scroll;
}
.top-adventure__books div {
  width: 120px;

}
.top-adventure__books img {
  height: 140px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.star {
  display: flex;
  color:rgb(245, 205, 26);
  font-size: 5px;
  align-items: center;
  padding-left: 10px; 
}
.star i {
  padding-right: 5px;
}

.bgc__top {
  width: 100%;
  height: 81px;
  background-color: rgb(245, 205, 26);
  position: absolute;
  top:0;
  z-index: -1;
}

 

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

 

Fundamental text and font styling - Learn web development | MDN

We hoped you enjoyed playing with text in this article! The next article will provide you with all you need to know about styling HTML lists.

developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

 

line-height - CSS: Cascading Style Sheets | MDN

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifi

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/::placeholder

 

::placeholder - CSS: Cascading Style Sheets | MDN

The ::placeholder CSS pseudo-element represents the placeholder text in an

or

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

 

overflow-x - CSS: Cascading Style Sheets | MDN

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

developer.mozilla.org

 

  1. box-shadow
    • box-shadow를 통해 그림자를 구현할 수 있습니다.
    • border-radius와 box-shadow: inset을 통해 휴대폰의 곡면에 입체감을 줄 수 있습니다.
  2. overflow-x
    • overflow-x 속성으로 width를 초과한 부분을 어떻게 처리할 지 설정할 수 있습니다.
    • 많이 사용되는 속성값으로, hidden, scroll 이 있습니다.
    • hidden의 경우, 이미지의 일부를 보이게 하거나 slider를 구현할 때 많이 사용됩니다.
  3. Pseudo-element
    • placeholder와 같은 의사 요소(Pseudo-Element)들의 스타일을 설정할 수 있습니다.
    • placeholder(::placeholder)의 글자색을 바꾸거나, 첫 번째 글자(::first-letter)만 크기를 키우거나, 첫 번째 줄(::first-line)의 줄간격을 바꿀 수 있습니다.
  4. Search 파트
    • 해설의 search 파트에서, input에 text를 가득 채우면 텍스트가 icon을 덮게 되는 것을 볼 수 있습니다.
    • 이를 해결하기 위해 .search에 flex를 적용함으로써, input의 텍스트가 icon을 덮지 않게 할 수 있습니다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>You Are Awesome!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
        <i class="fas fa-bars"></i>
        <h1>library</h1>
        <i class="fas fa-shopping-basket"></i>
    </header>
    <div class="search">
      <input type="text" placeholder="Search books..." />
      <i class="fas fa-search"></i>
    </div>
    <main>
        <h2>Book of the Day</h2>
        <div class="featured-book">
            <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" class="featured-book__cover">
            <div class="featured-book__data">
                <h3 class="featured-book__title">1984</h3>
                <h5 class="featured-book__author">George Orwell</h5>
                <div class="featured-book__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
                <div class="featured-book__tags">
                  <span class="featured-book__tag">Distopia</span>
                  <span class="featured-book__tag">Freedom</span>
                </div>
                <div class="featured-book__actions">
                    <span class="featured-book__bookmark"><i class="fas fa-bookmark"></i></span>
                    <span class="featured-book__book">Book now</span>
                </div>
            </div>
        </div>
        <h2>Top Adventures</h2>
        <div class="top-books">
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="top-books__book">
              <img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
              <div class="top-books__rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
            </div>
        </div>
        <h2>Popular authors</h2>
        <div class="popular">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/George_Orwell%2C_c._1940.jpg/1200px-George_Orwell%2C_c._1940.jpg" />
            <div class="popular__data">
              <h5 class="popular__title">George Orwell</h5>
              <p class="popular__bio">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus at et excepturi quos! Doloribus, itaque enim non ex temporibus sint officia, at ipsa saepe magni maxime! Laboriosam facilis aut corrupti?</p>
            </div>
        </div>
    </main>
  </body>
</html>
* {
  box-sizing: border-box;
}

input:focus {
  outline: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  max-width:360px;
  margin:0 auto;
  padding-bottom: 20px;
}

header{
  background:#FDCC32;
  display: flex;
  justify-content: center;
  padding:40px 15px;
  padding-bottom:50px;
}

header > * {
  width:33%;
}

header h1 {
  text-align: center;
  font-weight: 600;
}

header i:last-child {
  text-align: right;
}

.search  {
  width: 95%;
  position: relative;
  top:-30px;
  margin:0 auto;
}

input {
  width:100%;
  border:none;
  padding:15px 25px;
  font-size: 14px;
  border-radius: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.10);
}

input::placeholder {
  opacity: 0.7;
}

.search i {
  position: absolute;
  top:15px;
  right:20px;
  color:rgba(0, 0, 0, 0.10);
}

main {

  padding:0px 15px;
}

main h2 {
  margin-top:30px;
  font-weight: 600;
  font-size:20px;
  margin-bottom: 20px;
}

.featured-book {
  display: flex;
}

.featured-book__cover {
  width:110px;
  border-radius: 5px;
  margin-right:20px;
}

.featured-book__data {
  width:100%;
}

.featured-book__title {
  font-size:18px;
  margin-bottom: 5px;
  font-weight: 600;
}


.featured-book__author {
  font-size:12px;
  font-weight: 600;
  opacity: 0.3;
  display: block;
  margin-bottom:10px;
}

.featured-book__rating {
  color:#FDCC32;
  font-size:12px;
  margin-bottom:20px;
}

.featured-book__rating i:last-child {
  color:#F7F7F7;
}


.featured-book__tags {
  display: flex;
  justify-content: space-between;
  margin-bottom:30px;
}

.featured-book__tag {
  background: #F7F7F7;
  font-size: 12px;
  font-weight: 500;
  padding:10px 20px;
  display: block;
  border-radius: 5px;
}

.featured-book__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.featured-book__bookmark {
  background-color: #FDCC32;
  width:30px;
  height:30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.featured-book__book {
  background:black;
  color:white;
  font-size: 12px;
  font-weight: 500;
  padding:10px 40px;
  display: block;
  border-radius: 5px;
}

.top-books {
  display: flex;
  overflow-x:scroll;
  padding-bottom: 15px;
}

.top-books__book {
  margin-right: 20px; 
}

.top-books__book img {
  width:68px;
  border-radius: 3px;
}

.top-books__rating {
  color: #FDCC32;
  font-size:8px;
  margin-top:10px;
  display: block;
  text-align: center;
}

.popular {
  display: flex;
}

.popular img {
  width:140px;
  border-radius: 5px;
  margin-right: 20px;
}

.popular__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}

.popular__bio {
  opacity: 0.5;
  font-size: 14px;
}
저작자표시 비영리 변경금지

'프로그래밍 공부 > CSS' 카테고리의 다른 글

실습  (0) 2021.08.12
'프로그래밍 공부/CSS' Related Articles more
Comments