Bootstrap5

“작은 성공을 걷는 개발자”·2023년 4월 17일

클래스 이름 디테일하게 적어주기?

1. 레이아웃

container >> row >> col 순서로 (수평기준으로 레이아웃 작성)
flex (디테일한 텍스트는 flex를 사용하는 게 적합)

( * 🚀 flex는 위아래 조정이나 디테일한 위치 잡기 조아요 !)

sm md lg xl 최대한 (4단계 유지), 화면이 닿을 때 col-12 변경
@media 쓸때 px단위 기존 부트스트랩 범위를 따른다.

xs<576px	sm≥576px	md≥768px	lg≥992px	xl≥1200px	xxl≥1400px

2. truncate, elipsis

말줄임 규격 3줄로 (부트스트랩 truncate 클래스 사용해주세요)

.{
  width: 70%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;//원하는 라인수
-webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 2;
  color: #9a9dc2;
}

3. font 크기

제목 h5태그, 설명글: span태그, 디테일:p태그 (최대한 작품페이지 참고)
카드 템플릿은 제목 h4로 유지, 카테고리는 px16, 설명은 15px로 유지

<div class="col-md-4 col-sm-6 mt-5">
              <div class="card no-outline">
                <img src="./product/explore-list-ex-03.png" class="card-img-top" alt="...">
                <div class="card-body product-back">
                  <h5 class="card-title">Big Blue Whale Shape</h5>
                  <span class="font-color3">Entertainment</span>
                  <span>By Creator Naming</span>
                  <p class="card-text mt-4">미국의 그래픽디자이너인 키 아렌스가 제작한 221 Dryden
                    Street comes. 실제하는 집을 기반으로 만들어진 이 작품은
                    구입을 통해 미술작품 뿐만 아니라 집도 구할 수 있습니다.</p>
                  <i class="bi bi-hand-thumbs-up"></i>
                  <span>25</span>
                  <i class="bi bi-chat-left ms-3"></i>
                  <span>3</span>
                  <i class="bi bi-chevron-double-right ms-3"></i>
                </div>
              </div>
            </div>

4. CSS

css는 최대한 부트스트랩 클래스 활용해주시고, color만 바꾸는 용도로 써주세요.(media처럼)
p태그, div태그, span태그의 css 직접건들지말기 무조건 class로

5. Max 규격

기본 container가 메인 규격 (그냥 container만 쓰면됌)
input은 핸드폰 사이즈(sm)를 container로 자동으로 맞추게 건들지말기 (col-12)⇒ 12채우세요
배너 없는 화면은 top 220px를 유지해주세요

6. Card img

카드이미지 속성은 부트스트랩5 card-img-top 클래스에서 지정 가능합니다
card높이를 고정시키고 그밖의 img태그에서는 영향이 없게 (부트스트랩에 max, min 속성이 카드에 들어있음) object-fit에 의지해서 자연스러운 반응형웹을 지향합니다.
최대한 카드속성을 따르고 높이만 지정하고, 이미지 자체에서는 object-fit:cover기능만을 믿고 간다. (일단은) ⇒ 안그러면 끊김현상이 발생해서 자연스럽지않아요

<참고>

https://m.blog.naver.com/writer0713/222082104945

https://inpa.tistory.com/entry/CSS-📚-이미지-비율-고정하는-방법-aspect-ratio

Object position을 먼저 설정해준후 자연스럽게 md사이즈 넘어갈때 높이를 일정하게 유지 시켜줘서
핸드폰 UI를 유지해주는 형식을 취함

.banner-img-object {
    height: 100%;
    object-position: 70% 50%;
    object-fit: cover;
    width: 100%;
  }

  @media screen and(max-width: 768px) {
    .banner-img-object {
      height:300px;
    }
  }