251017 SPC 모작

 

SPC_엄하린.zip

3.16MB

https://www.spc.co.kr/

1~2일차 상단바 작업

상단바 (완성)

하위메뉴 (미완성)

3일차 구현

미완성 

ㄴ 이미지 안에 글씨 넣는 방법 미숙지

4일차 구현

미완성 

ㄴ 이미지 안에 글씨 넣는 방법 미숙지

5일차 구현

미완성 

ㄴ 이미지 안에 글씨 넣는 방법 미숙지

6일차 하단바 구현

24일 완성본

absolute: relative를 기준으로 움직임
relative: 기준 -> .box01 ~

.text-box(텍스트01, 텍스트02)
- relative기준으로 위치를 잡아주어야함

 

.box01{

  width:100%;

  padding:14px;

  position:relative;

}

/* 가운데 정렬을 더 확실하게: 배너 전체를 덮고 플렉스 중앙 */

.text-box {

  position: absolute;

  inset: 0;                       /* top/left/transform 대신 사용 */

  display: flex;

  flex-direction: column;

  justify-content: center;        /* 수직 중앙 */

  align-items: center;            /* 수평 중앙 */

  text-align: center;

  color: #fff;

  gap: 6px;                       /* 한글/영문 사이 간격만 */

}

.text-box h3,

.text-box h4 {

  margin:0;

  line-height:1.05;

  font-family:'Rubik','Pretendard',sans-serif;

}

.text-box h3 {

  font-size: 50px;               /* 필요시 조정 */

  font-weight:800;

}

.text-box h4 {

  font-size: 100px;               /* 필요시 조정 */

  font-weight:800;

  white-space: nowrap;           /* ← 줄바꿈 금지(한 줄 유지) */

}