[CSS in depth] part2 Grid system

Grid 시스템으로 변경 => code 재사용을 촉진하는 방법중의 하나

• 앞에서 살펴본 float를 그대로 사용해서 그리드 시스템을 구축하는 활동
• 구축전에 간단히 그리드 시스템에 대해서 살펴봄
  • 보통 12행
  • 예시 코드

Grid 시스템 구축

[row]
   [column-6]
      [media]
   [column-6]
      [media]

• 4.13

• column이 floated이기 때문에 row에 clearfix 추가해준다.

• 4.14

• column의 스타일 지정

• https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

• 이렇게 작성할때는 "column-"가 포함된 클래스 이름을 사용할때는 이 스타일을 고려해야 한다.

• 4.15

• 이전에 작성한 스타일에서 쓸모없는 부분을 지움

• 이제 미디어의 너비를 지정할 필요가 없음. float와. 마진도 삭제.

• 마진을 삭제했기 때문에 main에 bottom padding 추가

gutters 추가

• 4.17

• 개별 미디어가 아니라 시스템에 패딩을 추가한다.

• 4.19

• Row의 양옆에 생기는 패딩 => 네거티브 마진 적용