CSS 5 - Grid System & Bootstrap

💻1. Grid System

• 깔끔하고 일관성 있는 디자인을 위한 가이드라인
• container | column | gutter

1. container
   Grid System이 적용되는 전체 범위
2. column
   세로줄 1칸을 뜻함 보통 데스크탑은 12칸, 테블릿은 6칸, 모바일은 4칸. column을 통해 width size 결정
3. gutter
   간격을 위한 여백

💻2. Bootstrap

• (반응형) Grid System을 편리하게 사용하기 위한 CSS Framework

• bootstrap break point
  

• container -> row -> col 순으로 작성해야 함
• 모바일부터 대응하면 좋다👍

---

💻3. 실습 Tip

• 부트스트랩 이용 시, 부트스트랩에서 제공하는 container, row, col과 같은 녀석들의 스타일은 건드리지 않는 것이 좋음 but, padding/margin-bottom/top 정도는 👌👌
• 자주 사용하거나 재사용 가능한 것들은 reset CSS 다음에 작성해두는 것이 좋음
• 패턴 찾는 연습!! 공통 모듈은 따로 빼기
• 컨텐츠 가운데 정렬 뭐 이미지 같은 거 margin: 0 auto; 👌👌 or flex 사용하기

• flex-grow: 1; -> 남는 공간이 생기면 flex-grow에 양의 정수를 갖는 요소가 그 공간을 차지함
• flex-shrink: 0;
  요소의 크기를 100%로 잡게 되면 자식 전체 크기가 부모 요소보다 커지는 경우가 발생하는데, 이런 경우 flex를 nowrap으로 설정했기 때문에 자동으로 크기가 줄어들면서 요소들을 한 줄에 배치하게 됨. flex-shrink:0을 주게 되면 해당 요소의 크기를 줄이지 않게 됨 (false와 같은 역할)

---

✨4. 강의 수강을 마치며

• CSS Grid에 대해서는 혼자 알아봐야겠다. grid 관련한 파트 없는 게 쬐끔 아쉽다. 요즘 자주 사용하는 거라 알고 있어서..
• 아직 혼자 CSS를 만지는 건 많이 부족하다. 강의가 끝났다고 아예 손을 놓는 것이 아니라 조금씩이라도 꾸준하게 내 걸로 만들어가는 작업을 해야겠다고 느꼈다. CSS Practice 파트는 혼자 수행했는데 모르는 부분이나 제대로 안 먹힌 것들이 많았다😥
• 제대로 이해하지 못하고 사용하던 속성들을 왜 이렇게 사용하는지, 어떤 때에 사용하는지 자세히 알 수 있어서 좋았다. 김버그님 부트캠프 강의도 듣고 싶은데 아직 강의가 다 업로드 되지 않아서 고민 중이다. 자바스크립트 공부를 먼저 하고 그 강의를 결제할까 싶다.
• 강의 제목대로 정말 재미있게 HTML과 CSS를 배운 것 같다. 프론트엔드 개발자에게 퍼블리싱 역시 정말 잘 해야 하는 파트라고 생각하는데, 현업에서 주로 사용하는 속성과 꿀팁들을 얻어갈 수 있어서 정말 좋았다.💖