251110~18 DOD 구현

DOD_엄하린.zip

5.48MB

 

[새로운 코드]

•                    /*줄바꿈 되지 않는 공백 */
• white-space: nowrap;       /* 줄바꿈 안 함 */
• overflow: hidden;          /* 넘친 글자 숨김 */
• text-overflow: ellipsis;   /* 말줄임표(...) */
• filter: invert(1); /* 아이콘만 검정으로 뒤집기 (흰 → 검정) */

 

[피드백 & 해결 코드]

1. Z-index : 낮은 수로 작성 → Z-index :1~3으로 작성

 

2. position: fixed; 사용시 width: 100%;를 사용하면 1px이라도 공간이 부족하면 가로 스크롤 발동
→ left: 0; right: 0; 얘는 무조건 100%가 아니라 부족한 공간이 없도록 자동 계산 정렬
 ※ position: fixed; 또는 position: absolute;를 사용할때는 left: 0; right: 0; (가로를 꽉 채워서)를 사용해야한다.
                                                                                        ㄴ  top: 0; botoom: 0; (세로를 꽉 채워서)

3. img : 너비와 높이가 따로 들어갈 땐,

→ object-fit 사용 필수 

 

4. 가격 p태그 안에 span태그 사용

                <div class="price-box">

                  <span class="name">유니) 트리플 컬러 스웻 후드(MELANGE GREY STANDARD)</span>

                  <p class="origin-line"><span class="origin-price">149,000</span><span class="unit">원</span></p>

                  <p class="sale-line"><span class="sale-price">141,550</span><span class="unit">원</span></p>

                  <p class="rate-line"><span class="rate">5%</span></p>

                </div>

 

[피드백]

 

[문제점]

1차 메뉴 - 정렬이 안되어 있읍 

2차 메뉴 - 흰색 배경이 깨지고, 오른쪽 사진들이 안 나옴

 

[해결 코드]

1차메뉴

.top-bar {

  display: flex;

  align-items : center; 추가 함으로써 정렬 됨

}

[해결 코드]

2차메뉴

추가

.menu-2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;              /* 화면 가로 전체 */
  background-color: #fff; /* 흰 배경을 여기로 이동 */
  z-index: 10;           /* 배너보다 위로 */
}

제거

.con-m2 {
  display: flex;
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 100%; left: 0;
  padding: 60px 80px 100px;
}

변경 후

.menu-2 {display: none;}

.con-m2 {
  display: flex;
  padding: 60px 80px 100px;
}

2차 메뉴 아이콘 나타내기

html에 작성하지 않고 

/* ★ hover 시 아이콘만 검정으로 뒤집기 (흰 → 검정) */

.top-box:hover .hr-box img {  filter: invert(1); }