HTML, CSS 작업을 완료했다.
반응형 웹을 만드는 작업을 수행했다.

직전 프로젝트 때는, 대부분의 HTML 요소에 width, height에 특정 픽셀 값을 줬다.
멘토님이 방법은 반응협 웹을 만들기엔 부적절함을 지적했고, 다른 방법을 알려주셨다.

반응형 웹을 만들면서 배운 속성들

레이아웃 flexbox, grid

레이아웃을 잡는 HTML 요소에는 width: 특정px 를 주지 않고,
flexbox, grid를 사용해서 해결한다.

부모 요소에서 자주 사용하는 속성

• flex-direction(정렬 축 설정)
• justify-content(축 수평 방향 정렬)
• align-items(축 수직 방향 정렬)
• flex-wrap(줄 바꿈)

자식 요소에서 자주 사용하는 속성

• flex-grow(팽창 지수) 자식 요소 크기 늘리기
• flex-shrink(수축 지수) 자식 요소 크기 줄이기
• flex-basis(기본 크기) 자식 요소 기본 크기

width, height 픽셀을 최소화 사용

아래 속성들로 대부분 크기를 제어할 수 있다.

• max-width(height)
• min-width(height)
• width, height: auto, 100%, fit-content
• object-fit: cover, fill, contain
• overflow: hidden
  object-fit, overflow는 이미지가 있는 요소에 자주 사용했다.

단, 예외사항이 있다.
부모 요소의 크기에서 비율로 해결하는게 아니라,
독립적인 크기를 가져야 하는 요소들(버튼, 햄버거 등등)은 픽셀(px)을 준다.

max-width: 특정 px;
height: fit-content;
width: 100%

디바이스 반응협 웹

데스크탑 -> 모바일
미디어 쿼리를 사용해서, 특정 픽셀 이하로 내려가면,
속성을 부여한다.

@media (max-width: 768px){
max-width: 300px
}