웹프로그래밍/CSS

프로그래밍 언어 활용 15일차 (24/11/29)

wkun 2024. 11. 29. 17:58

CONTENTS

 

CSS Practice

홈페이지 레이아웃 : section 부분

(card, product, category)

 

-------------------------------------------

 

CSS Practice

 

홈페이지 레이아웃 : section 부분

(card, product, category)

 

예제1)

Boxing

 

Dom tree

html

<body>
  <section class="category">  
    <!-- card1 start-->
    <div class="card_box">  
      <div class="card_item">
        <img src="note.jpg" alt="notebook">
      </div>
      <div class="card_cotent">
        <h3>CATEGRY</h3>
        <h2>PRODUCT NAME GOES HRER</h2>
        <p>$980.00<span><del>$999.00</del></span></p>
        <div class="icon">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <hr>
        </div>
        <div class="icon2">
          <i class="fa-regular fa-heart"></i>
          <i class="fa-solid fa-arrow-right-arrow-left"></i>
          <i class="fa-regular fa-eye"></i>
        </div>
      </div>
    </div>
    <!-- card1 end -->
    <!-- card2 start-->
    <div class="card_box">  
      <div class="card_item">
        <img src="note.jpg" alt="notebook">
      </div>
      <div class="card_cotent">
        <h3>CATEGRY</h3>
        <h2>PRODUCT NAME GOES HRER</h2>
        <p>$980.00<span><del>$999.00</del></span></p>
        <div class="icon">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <hr>
        </div>
        <div class="icon2">
          <i class="fa-regular fa-heart"></i>
          <i class="fa-solid fa-arrow-right-arrow-left"></i>
          <i class="fa-regular fa-eye"></i>
        </div>
      </div>
    </div>
    <!-- card2 end -->
    <!-- card3 start-->
    <div class="card_box">
      <div class="card_botton">
        <a href="#">-30%</a>
        <a href="#">NEW</a>
      </div>
      <div class="card_item">
        <img src="note.jpg" alt="notebook">
      </div>
      <div class="card_cotent">
        <h3>CATEGRY</h3>
        <h2>PRODUCT NAME GOES HRER</h2>
        <p>$980.00<span><del>$999.00</del></span></p>
        <div class="icon">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <hr>
        </div>
        <div class="icon2">
          <i class="fa-regular fa-heart"></i>
          <i class="fa-solid fa-arrow-right-arrow-left"></i>
          <i class="fa-regular fa-eye"></i>
        </div>
      </div>
    </div>
    <!-- card3 end -->
    <!-- card4 start-->
    <div class="card_box">  
      <div class="card_item">
        <img src="note.jpg" alt="notebook">
      </div>
      <div class="card_cotent">
        <h3>CATEGRY</h3>
        <h2>PRODUCT NAME GOES HRER</h2>
        <p>$980.00<span><del>$999.00</del></span></p>
        <div class="icon">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <hr>
        </div>
        <div class="icon2">
          <i class="fa-regular fa-heart"></i>
          <i class="fa-solid fa-arrow-right-arrow-left"></i>
          <i class="fa-regular fa-eye"></i>
        </div>
      </div>
    </div>
    <!-- card4 end -->
  </section>
</body>

 

css

*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  color: inherit;
}

.category{
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.card_box{
  border: 1px solid grey;
  width: 400px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img{
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.card_item{
  display: flex;
  justify-content: flex-start;
}

span{
  margin-left: 10px;
  color: grey;
}

.card_box{
  position: relative;
}

.card_botton{
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 2px;
  right: 1px;
}

a{
  border: 1px solid red;
  background-color: red;
  color: white;
  margin-right: 10px;
  text-decoration: none;
}

h3{
  color: gray;
  font-size: 8px;
  text-align: center;
}

h2{
  color: red;
  font-size: 15px;
  text-align: center;
}

p{
  text-align: center;
  color: red;
  font-size: 15px;
}

.icon{
  text-align: center;
  margin-right: 5px;
}

.icon2{
  text-align: center;
}

.icon2 i{
  margin: 5px;
}

hr{
  width: 80%;
  margin: 0 auto;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon{
  position: relative;
}

 

 

예제2)

 

Boxing

 

Dom tree

 

html

<body>
  <section>
    <div class="container">
     <div class="title">
      <h1>Featured Product</h1>
      <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>Excepteur sint occaecat cupidatat non proident.</p>
    </div>
    <div class="product">
      <!-- item box1 start -->
      <div class="item">
        <div>
          <div class="eval">
           <div>
            <i class="text-warning fa fa-star"></i>
            <i class="text-warning fa fa-star"></i>
            <i class="text-warning fa fa-star"></i>
            <i class="text-warning fa fa-star"></i>
            <i class="text-warning fa fa-star"></i>
           </div>
            <div class="price"><span>$240.00</span>
           </div>
          </div>
          <div class="text">
          <h1>Gym Weight</h1>
          <p>Lorem ipsum dolor sit amet, consectetur<br>adipisicing elit. Sunt in culpa qui officia deserunt.</p><br>
          <span>Reviews (24)</span></div>
        </div>
      </div>
      <!-- item box1 end -->
      <!-- item box2 start -->
      <div class="item">
        <div>
          <div class="eval">
            <div>
              <i class="text-warning fa fa-star"></i>
              <i class="text-warning fa fa-star"></i>
              <i class="text-warning fa fa-star"></i>
              <i class="text-warning fa fa-star"></i>
              <i class="text-warning fa fa-star"></i>
            </div>            
            <div class="price"><span>$480.00</span></div>
          </div>
          <div class="text">
          <h1>Cloud Nike Shoes
          </h1>
          <p>Aenean gravida dignissim finibus. Nullam ipsum<br>diam, posuere vitae pharetra sed, commodo ullamcorper.</p><br>
          <span>Reviews (48)</span></div>
        </div>
      </div>
      <!-- item box2 end -->
      <!-- item box3 start -->
      <div class="item">
        <div>
          <div class="eval">
           <div>
             <i class="text-warning fa fa-star"></i>
             <i class="text-warning fa fa-star"></i>
             <i class="text-warning fa fa-star"></i>
             <i class="text-warning fa fa-star"></i>
             <i class="text-warning fa fa-star"></i>
           </div>
            <div class="price"><span>$360.00</span></div>
          </div>
          <div class="text">
          <h1>Summer Addides Shoes</h1>
          <p>Curabitur ac mi sit amet diam luctus porta.<br>Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.</p><br>
          <span>Reviews (74)</span></div>
        </div>
      </div>
      <!-- item box3 end -->
    </div>
  </div>
  </section>
</body>

 

css

*{
  margin:0;
  padding:0;
  text-decoration : none;
  list-style:none;
  box-sizing:border-box;
  color: inherit;
}

.container{
  margin-top: 30px;
  font-family: 'Roboto', sans-serif;
  background-color: #e9eef5;
}

.title{
  text-align: center;
}

.product{
  display: flex;
  justify-content: center;
}


/* item box start */

img{
  width: 100%;
}


.item{
  border: gray;
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 500px;
  margin: 10px;
  background-color: white;
  margin-bottom: 50px;
}

.price span{
  display: block;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

span{
  color: #bcbcbc;
}

i{
  margin-top: 10px;
}

.title h1{
  font-size: 50px;
  font-weight: 200;
}

i{
  color: gray;
}

.eval {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 10px;
}

.text{
  margin-left: 10px;
}

i:hover{
  color: yellow;
}

 

 

예제3)

 

Boxing

 

Dom tree

 

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./Zay_Mon.css">
  <script src="https://kit.fontawesome.com/fa848000d2.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
  <section class="container">
    <!-- title start -->
    <div class="title">
      <h1>Categories of The Month</h1>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt<br>mollit anim id est laborum.</p>
    </div>
    <!-- title end -->
    <div>
   <!-- category item1-->
    <div class="category_container">
      <div class="category_item">
        <h2>Watches</h2>
        <a href="#">Go Shop</a>
      </div>
    <!-- category item2-->
      <div class="category_item">
        <h2>Shoes</h2>
        <a href="#">Go Shop</a>
      </div>
    <!-- category item3-->
      <div class="category_item">
        <h2>Accessories</h2>
        <a href="#">Go Shop</a>
      </div>
    </div></div>
  </section>
</body>
</html>

 

css

*{
  margin:0;
  padding:0;
  text-decoration : none;
  list-style:none;
  box-sizing:border-box;
  color: inherit;
}

.container{
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.category_container{
  display: flex;
}

.category_item{
  border: 1px gray;
  margin: 40px;
  text-align: center;
}

img{
  width: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.title{
  text-align: center;
  margin-top: 50px;
}

h1{
  font-size: 38px;
  font-weight: 200;
}

p{
  font-size: 15px;
  font-weight: 300;
}

h2{
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
}

a{
  border: 1px solid #59ab6e;
  background-color: #59ab6e;
  color: white;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 10px;
}

 

 

주의)

*요소를 특정 기준에서 띄우기 : 
 - 기준점 제시 position:relative; 
 - 요소 띄우기 position:absolute; 
 - 띄운 요소 위치 조정하기 top/bottom/left/right: 수치;

*요소를 띄운 후 기준점에서의 중앙 정렬하기 :
 - position:aboulte;
 - top:50%;
 - left:50%;
 - transform:translate(-50%,-50%);

 

*<a>태그 <div>로 감싸거나 display: block; 해서 width, height 주기

  padding으로 조절 

 

 

 

 

참고)

https://themewagon.com/

 

Home

Download the Best Free & Premium Responsive Bootstrap Templates from a hand-picked collection of over 1000 responsive Bootstrap themes & templates

themewagon.com

 

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

프로그래밍 언어 활용 17일차 (24/12/03)  (0) 2024.12.03
프로그래밍 언어 활용 16일차 (24/12/02)  (0) 2024.12.02
프로그래밍 언어 활용 14일차 (24/11/28)  (0) 2024.11.28
프로그램 언어 활용 13일차 (24/11/27)  (2) 2024.11.27
프로그래밍 언어 활용 12일차 (24/11/26)  (0) 2024.11.26

'웹프로그래밍/CSS'의 다른글

  • 현재글프로그래밍 언어 활용 15일차 (24/11/29)

관련글

티스토리툴바