03/25 HTML/CSS grid 중첩 레이아웃

 

격자형 아이템 배치

 

이렇게 배치하면 초록색박스 아래 선들때문에 박스 두 개 더 만들어줘야함..

 

 

그리드만 고집하지 않아야...

 

 

 

 

 

 

aside와 main을 합치는 body 만들기

 

 

 

html

css

body  안에서 aside 와 main을 그리드로 또다시 나누기

 

-> subgrid 는 안 쓰나? (지원안되는 브라우저 많음)

 

=> 그리드 한번 더 쓰자!

 

 

 

 

grid 속 body에 다시 grid해서 aside와 main을 분리 -> 중첩적으로 나누었다

 

 

 

 

 

이제 반응형해보자

 

960아래로 줄어들 때 aside없어지고 main만 가득차도록

 

 

 

css

 

 

 

반응형 코드 -> 겹치지 않고 변할 부분만 써주기

 

 

 

 

 

css 를 

 

1. 방을 위한 스타일 (layout.css) 

2. 가구를 위한 스타일 (content.css)

3. 인라인 아이템을 위한 스타일 (component.css)

 

로 나눠서 만들어야 한다.

 

 

 

 

 

 

 

 

2. 가구를 위한 스타일

 

 

 

하나하나 만들어서(스타일해서) 배치해야한다