TIL

Dream Coding shopping mall clone coding
CSS 복습 및 새로 알게 된 개념 정리!

1. 색상 코드들을 변수로 정의하기

공통적으로 사용하는 color 또는 size 같은 경우 변수로 정의해 놓고 사용하는 것을 추천!
나중에 변경될 사항이 있으면 변수로 정의한 곳에서만 수정하면 되기 때문. 간편한 유지보수 가능!
반응형으로 유닛을 작성할 때도 변수 정의한 곳에서만 업데이트하면 됨!

:root {
  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  
  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --font-size: 18px;
}

2. 화면 상 정중앙(수평, 수직 가운데 정렬)에 요소 배치하기

• flex box 이용 -> 한 줄로 나란히 요소 배치됨(flex-direction: row 이기 때문)
• column을 수정하여 한 줄에 요소가 하나씩 배치하도록 함
• 수평과 수직 각각 가운데 정렬
• 화면 상단에 위치한 아이템을 정중앙에 오도록 body 높이를 늘림 (이 때는 당황하지 않고 개발 툴을 확인하여 body의 height 상태를 확인!😅)
  -> 100vh(높이가 viewport 즉, window의 100%)가 되도록 함

body {
  height: 100vh;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

3. 애니메이션 효과

버튼 위에 마우스가 올라왔을 때 버튼 크기가 커지는 효과

.btn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform 300ms ease;
}

.btn:hover {
  transform: scale(1.1);
}

4. 버튼 크기를 함수를 이용해 설정하기

계산할 수 있는 함수 calc() 사용
(인자로는 수치 px값을 넣어주고 계산하고 싶은 수식을 써줌/
아래의 예시는 px값을 변수로 정의한 경우임)

.colorBtn {
  padding: calc(var(--base-space) * 2);
}

5. 요소의 너비, 높이를 반응형으로 만들기

아이템이 일정한 크기를 가지는 것이 중요하기 때문에 (고정된 px로 정의하기 보다) window의 비율, 퍼센트를 이용해 반응형으로 만들어 width, height을 고정시킴

.items {
  width: 60%;
  height: 60%;
}

• 추가정보
  1) ul은 unorder list이기 때문에 li 항목 앞에 .(점)이 있어
  'list-style: none;' 을 이용해 없애줌
  2) li 태그는 기본적으로 양 옆에 padding이 들어가 있어 요소에 꽉 차게 하려면 'padding-left: 0;' 을 이용해 여백 제거함

6. 아이템이 화면 밖으로 초과하는 경우 아이템 컨테이너 상에서 스크롤하기(화면 전체 스크롤링x)

.items {
  overflow-y: scroll;
}

• 추가정보
  : 아이템들은 자바스크립트를 이용해 동적으로 추가할 수 있음
  (html에 예제로 아이템 하나만 작성)