Bootstrap-Grid, Container

img태그에 사이즈 지정을 안했을 경우

1. 원본 이미지의 px대로 간다.
2. 만약, 이미지가 담겨있는 부모의 태그가 이미지보다 가로길이가 작다면 문제가 발생한다. 세로가 아니라 가로길이를 부모에게 맞추며 자동으로 축소된다. 세로길이는 가로에 대한 비율로 세로가 자동으로 맞춰진다. : 그래야 이미지가 안 깨지니까!
   이미지 밑에 배경이나 공란이 생기면
3. img 태그의 사이즈를 잘 지정하지 않는다. img는 그 컨테이너의 100%를 매번 잡는다.
   img를 담고 있는 container의 크기를 조절하는 것이 좋다.
4. 그럼에도 불구하고 이미지의 사이즈를 주고 싶다면 Width만 준다. Height까지 주면 이미지가 깨진다. Height를 쓰지않아도 알아서 가로길이에 맞춰 비율을 조정한다.

반응형 디자인

• 요청자에게 최적화된 경험을 할 수 있도록
• 사용자들이 실제로 어떻게 사용할 때를 고려
  개념적인 것.
• 웹 페이지에서 반응형 구현하는 것은 기술적인 측면에서 보자면 브라우저의 확대 축소가 아니라, 화면(디바이스/웹 브라우저 창의 크기)사이즈에 따라 특정요소의 배치를 바꾸거나 특정 요소를 없애거나 특정 요소를 추가하거나 같은 기술적인 요인이 반응형이라고 한다.
• UI사용자가 겪게되는 조작환경 UX 사용자 경험

Layout-Grid 격자

• 화면(row)을 12개로 분할
• Bootstrap은 Grid을 이용하여 모든 Layout을 구성하기를 희망한다.
• Grid와 Flex의 차이: Grid는 화면 구성. 즉, Layout을 잡는데 사용하고 Flex는 그 안의 내용물들을 정렬하는데 사용한다.
• 기본 계층 구조 Container > row > col > row 는 가능
  row 행 가로줄 Block 속성
  col 열 세로줄
• row가 1200을 가지고 있으면 하나의 Col는 100을 가진다. row안에 col 12개로 나눠짐. 만약 row안에 col 13개를 쓰면 밑 줄로 내려간다.
• col에 숫자를 지정하지 않으면 균등 분할이 된다.
  ex) col col-6 col 이면 col-6이 50% 차지, 나머지는 균등 분할로 1:2:1로 분할된다.
• breakpoint를 사용해서 col col-lg-2라고 작성 가능
• row는 display flex를 가지고 있으므로 바로 정렬을 먹일 수 있다.
• col-auto는 글자 크기만큼 늘어난다.
• <div class = "col-md-8"> 일 경우 md 밑으로 내려오는 순간 무시돼서 그냥 div로 변하고 한 줄을 다 먹는다. ]
• <div class = "row row-cols-4">일 경우 한 줄에 4로 셋팅 돼서 한 col에 1씩 먹는다.
• Nesting(둥지): Grid안에 Grid를 혼합

Layout-Containers

• Bootstrap은 Body 안에 있는 것들 중에 최상단 부모가 Container 클래스가 있을거라고 가정한다.
• container는 풀 스크린이 아니라 네이버 메인화면처럼 가운데로 몰린다.
• 모니터 그룹을 대략 6개로 나눠서 그 안에서 대응한다.
• 화면을 줄이면 자동으로 container 크기도 바뀐다. (반응형)
• Container-fluid를 주면 반응없이 계속 100% 풀 스크린으로 된다.