1. 레이아웃의 정의 : 효과적으로 배열하기
( 네이버 지식사전)
* 그리드 : 판면을 구성할 때에 쓰이는 가상의 격자 형태의 안내선을 말한다
2. 레이아웃의 변천사 ( 모니터 크기에 따라 변함)
초기 컴퓨터 : 640px
1024*768 : 960 grid ( 황금비율이라고 많이 불렸다. 지금도 많이 쓰인다)
1920 * 1080 (FHD) : 1200 grid (할리스커피 홈페이지)
full 화면 : 스타벅스커피
* 레이아웃의 유행흐름을 알기 위해서는 가장 잘 팔리는 모니터 크기를 항상 확인해야 한다
3. 레이아웃 만들어보기
↓ 완성본
1) HTML 구성하기 ( 총 7개의 태그를 위 그림에서 왼쪽-위쪽이 먼저 오도록 만든다.)
2) 초기화(margin-padding 0), h1, container 가운데정렬
3) grid의 기본 설정
container의 width 를 960으로 했다. 가로로 다섯개의 그리드로 나눈다.(960/5=192) 그리고 margin 은 5px씩(192-10= 182).
border도 5px씩 준다 (182-10=172)
grid 의 width : 172; height : 172;
3) grid 를 float:left 하면 옆으로 정렬.
4) 크기가 큰 블록들에게 별도로 width 와 height를 준다.
- 가로 & 세로가 두배 ( grid 1, 3, 4, 5 ) : 원래 너비인 172px*2 + 가운데 있던 margin 10px + 가운데 있던 border 10px = 364px
- 가로 & 세로가 세배 (grid 6): 원래너비 172px*3 + 가운데 2개의 margin 10px*2 + 가운데 2개의 border 10px*2 = 556px
* h1과 레이아웃이 너무 가까운거 같아서 margin을 더 주었다.
5) 나눠져 있어 보이는 두 덩어리 붙이기 **
가장 큰 grid3에 float : right; 를 주면 float : left와 따로 생각 되서두 덩어리가 붙는다.
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| <HTML & CSS> 아이콘 사용하기 (font awesome) (0) | 2017.06.16 |
|---|---|
| <HTML & CSS> 레이아웃 실습 (clearfix 사용) (0) | 2017.06.16 |
| <HTML & CSS> float 문제점 해결하기 (clearfix) (0) | 2017.06.16 |
| <CSS> z-index (태그들이 보이는 순위 정하기) (0) | 2017.06.15 |
| <CSS> web font (feat. 구글폰트) (0) | 2017.06.15 |