[web] 그리드 시스템의 이해

[web] 그리드 시스템의 이해

 

기본적으로 나는 전문적인 웹 디자이너는 아니지만 it업계에서 오래 일을 하다보니 잡스러워져

가끔 웹 디자인 부탁을 받곤 한다.

그럴때마다 

'각 컨테츠의 간격을 얼마나 두어야 보기 좋고 안정적인 디자인인가? '

'최대 가로 사이즈를 변환할 수 있게 할 것인가?'

'고정으로 간다면 어느정도의 크기로 정해야 하는가?'

하는 문제로 고민하곤 했는데

이럴때 아주 기초적인 그리드 시스템을 사용하면 편리하다.

실제로 네이버 다음 등 대형 포탈 사이트에서는 이 그리드 시스템을 기본으로 디자인 되어 있다.

 

 

960 Grid system

 

• 960 12 컬럼 그리드 시스템
• 컨텐츠 영역은 940px로 좌우 10px씩의 여백, 각 컬럼은 60px, 컬럼의 간격은 20px로 설정하여     컨텐츠를 배치하는 레이아웃
  

 

 

• 960 16 컬럼 그리드 시스템

• 컨텐츠 영역은 940px로 좌우 10px씩의 여백, 각 컬럼은 40px, 컬럼의 간격은 20px로 설정하여     컨텐츠를 배치하는 레이아웃