2024.11.27 클론코딩 공부(내용)

참고 사이트 : https://themewagon.github.io/ogani/index.html

 

오늘 공부한 내용

 

 

어제 만들다 만 메인 배너 이미지 넣고 그 위에 텍스트 포지션 앱솔루트로 삽입하기, 메인배너 하단 카드형식 상품정렬 파트(미완성)

 

<div class="banner_fam">

        <!-- 배너 이미지 -->

        <img src="./img/hero/banner.jpg" alt="">

        <!-- 배너 텍스트 -->

        <div class="banner_text">

          <div id="sub_title">FRUIT FRESH</div>

          <div id="title">Vegetable 100% <br> Organic</div>

          <div id="sub_text">Free Pickup and Delivery Available</div>

          <div id="shop_now"><a href="#"> SHOP NOW</a></div>

        </div>

      </div>

    </div>

  </div>

  </div>

  <!-- 메인배너, 검색창, 전화번호 파트 끝-->

메인배너 이미지, 텍스트 html

hero {

  display: flex;

  justify-content: space-between;

  padding: 0px 0px 50px;

}

.banner_fam {

  position: relative; /* 텍스트를 배치할 기준이 되는 상대 위치 */

  width: 100%; /* 부모 컨테이너 너비 */

  max-width: 1200px; /* 최대 너비 설정 */

  margin: 0 auto; /* 중앙 정렬 */

  overflow: hidden; /* 내부 요소 초과 부분 숨김 */

}

.banner_fam img {

 

  width: 100%;

  height: auto;

}

.banner_text {

  position: absolute; /* 이미지 위에 배치 */

    top: 50%;

    left: 20%;

    transform: translate(-50%, -50%); /* 정확히 중앙에 배치 */

    color: black; /* 텍스트 색상 */

    text-align: center; /* 텍스트 중앙 정렬 */

    font-family: Cairo, sans-serif; /* 폰트 스타일 */

    font-weight: bold; /* 텍스트 굵기 */

    z-index: 10; /* 텍스트가 이미지보다 위에 표시되도록 설정 */

    text-align: left;

}

메인배너이미지, 텍스트 css

 

<!-- 슬라이드 -->

  <div class="slide_con">

    <!-- <div>

      <img src="#" alt="left">

    </div> -->

    <div class="card_con">

      <div class="card">

        <img src="./img/categories/cat-1.jpg" alt="DRINK FRUIT">

        <div class="card_content">

          <h5><a href="#">DRINK FRUIT</a></h5>

        </div>

      </div>

      <div class="card">

        <img src="./img/categories/cat-2.jpg" alt="DRINK FRUIT">

        <div class="card_content">

          <h5><a href="#">DRINK FRUIT</a></h5>

        </div>

      </div>

      <div class="card">

        <img src="./img/categories/cat-3.jpg" alt="FRESH FRUIT">

        <div class="card_content">

          <h5><a href="#">FRESH FRUIT</a></h5>

        </div>

      </div>

      <div class="card">

        <img src="./img/categories/cat-4.jpg" alt="DRIED FRUIT">

        <div class="card_content">

          <h5><a href="#">DRIED FRUIT</a></h5>

        </div>

      </div>

      </div>

      <!-- <img src="#" alt="right">

    </div>

  </div> -->

하단 슬라이드 파트 html(미완)

 

#sub_title {

  font-size: 14px;

  color: #7FAD39;

}

#title {

  font-size: 46px;

  color: black;

  line-height: 95%;

  font-weight: 900;

  margin: 10px 0px;

}

#sub_text {

  color: #6f6f6f;

  font-size: 16px;

  margin: 0px 0px 35px;

}

#shop_now {

  width: 142px;

  height: 41px;

  background-color: #7FAD39;

  text-align: center;

  line-height: 41px;

}

#shop_now a {

  color: white;

}

.card_con {

  width: 70%;

  align-items: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  gap: 20px;

  position: relative;

}

.card {

  width: 270px;

  height: 270px;

  text-align: center;

  display: flex;

  flex-direction: column;

 

}

.card img {

  width: 270px;

  height: 270px;

  overflow: hidden;

}

.card content {

  width: 170px;

  height: 43.59px;

  display: flex;

  background-color: white;

  position: absolute;

}

하단 슬라이드 css

 

공부중 겪은 문제점 : 검색창, 전화번호 이후로 배너 이미지 배치할때 flex-direction: column을 몰라서 헤맸던 점, 카드형식 슬라이드 파트 이미지에 텍스트 붙여서 정렬하기(깨지고 왼쪽에 달라붙음) 해결하기