🙋🏻‍♀️ 목표: 면접을 준비하기 이전에 알았던 내용들에 대한 개념을 정리해 보자.

1. Box-sizing

🙌박스 크기를 지정하기 전에 안에있는 내용물은 참고할지 말지에 대한 속성값이다.

키워드💡: padding box-sizing border-box

box-sizing: content-box; ("내용물 크기가 작아질바에 박스를 크게 만들어주세요", 기본값)
box-sizing: border-box; ("내용물 크기가 작아지는걸 감소하더라도 박스 크기는 변하면 안되요.")

• 출처

  mdn: box-sizing

2. Position

🙌박스의 위치를 조정할 때 사용되는 속성값이다.

키워드💡: absolute static

position: relative; ("원래 있던 자리를 기준으로 위치를 변경 하겠습니다.")
position: absolute; ("근접한 부모의 기본값이 스테틱이 아닌 부모의 기준으로 변경하겠습니다.", relative 로 설정된 부모 컨테이너 기준에 맞춰서 이동)

• 출처

  mdn: position

  mdn: Layout and the containing block

🙌다른 포지션 속성중 하나인 Sticky와 Fixed의 차이점에 대해서 알아보자.

키워드💡: sticky fixed

position: sticky; ("top, left같은 포지션을 지정할테니 fixed처럼 뷰포트에서 고정시키지 않고 부모 박스를 기준으로 변경하겠습니다.")
position: fixed; ("부모와 상관없이 Viewport안에서 위치 변경하겠습니다.")

• 출처

  mdn: margin

3. 정렬

🙌텍스트나 박스를 정렬하기 위한 방법이다.

키워드💡: margin: auto text-align: center translate(50%, 50%) line-height

*박스 수평 정렬
margin: auto;
*박스 수직+수평 정렬
transform: translate(50%, 50%);

*텍스트 수평 정렬
text-align: center;
*텍스트 수직+수평 정렬
text-align: center;
line-height: px; (부모 컨테이너 높이만큼)

3. Background

🙌Background와 관련된 속성과 속성값이다.

키워드💡: background background-repeat background-position background-size

*이미지 반복x
background-repeat: no-repeat;
*이미지 중간 정렬
background-position: center;
*이미지 커버
background-size: cover;

*(팁)한 번에 쓰기🚀
background: center/cover no-repeat url('#');

• 출처

  mdn: background

  mdn: background-image

3. Transform

🙌Transform과 관련된 속성과 속성값이다.

키워드💡: translate scale rotate

*이동(x축, y축)
transform: translate(15px, -10px);
*확대
transform: scale(1.05);
*회전
transform: rotate(45deg);

*(팁)한 번에 쓰기🚀
transform: translate(10px, 10px) scale(1.1) rotate(90deg);

• 출처

  mdn: transform

3. Transition

🙌Transition과 관련된 속성과 속성값이다.

키워드💡: transition

(예시)
.card:hover {
background-color: chocolate;
transition-property: color;
transition-duration: 300ms;
transition-timing-function: ease-in;
}

*(팁)한 번에 쓰기🚀
transition: background-color 또는 all 300ms ease-in;

• 출처

  mdn: transition

  mdn: animation-timing-function