250930 picogram (li-box)

HTML)

<div class="li">

          <h2 class="li-ps mb-36">

            <span class="material-symbols-outlined">

            favorite</span>

            <span>선물특가</span>            

          </h2>

          <p class="li-ps mb-36">

            <span class="material-symbols-outlined rowse_gallery">

            browse_gallery</span>          

            <span class="">333</span>

          </p>        

        </div>

li-ps mb-36은 여백 주는 것이고,

<div class="li">

          <div class="li-img-box mb-8">

            <img src="./image/1612413785827l0.jpg" alt="상품 이미지">

          </div>

          <div class="li-btn mb-10">담기</div>

          <div class="li-text-box">텍스트 박스</div>

        </div>

        <div class="li">li</div>

img의 alt는 무조건 작성해줘야 하고, 이미지 설정 할 때 ./를 적어서 사용해야하는데,  파일 안에 image 폴더를 만들어 이미지를 폴더에 저장하면 ./를 html에 작성했을 때 이미지가 보여지게 된다.  

 

CSS)

.li-img-box {

  background-color: rgba(0, 0, 0, 0.2);

  height: 434px; overflow: hidden;

}

.li-img-box > img {

  width: 100%;

  /* height: 100%; object-fit: cover; */

}

.li-btn {

  background-color: rgba(0, 0, 0, 0.3);

}

.li-text-box {

  background-color: rgba(0, 0, 0, 0.4);

}

 

/* height: 100%; object-fit: cover; */ 가 주석이 된 이유는 사진이 깨지기 때문에 overflow: hidden;을 적어준다.   

 

/* .li-btn-box {

 border: 1px solid #565656;

} */

.li-btn {

  /* flex-item은 text-align코드 적용x */

  border: 1px solid #565656;

  display: flex; width: 100%;

  padding-top: 8px;

  padding-bottom: 8px;

  justify-content: center;

  border-radius: 4px;

 /* 기본 상태에서 이벤트 상태까지 변화 시간 조절 */

  transition: 0.5s;

}

/* li-btn에 마우스르 올리면 {}안 실행문 실행 */

.li-btn:hover {

  background-color: blueviolet;

  border: 1px solid #fff;

  color: #fff;

}

/* li-btn에 마우스로 꾸욱 누른 상태에만 {}안 실행문 실행 */

.li-btn:active {

  background-color: rgb(50, 0, 63);

  border: 1px solid #fff;

  color: #fff;

}

.li-text-box {

  background-color: rgba(0, 0, 0, 0.4);

}