웹페이지 본문 폭 조절하기

  아임웹 연구소 소장 해준  |  2017 . 11 . 24

시작에 앞서
아임웹은 기본값으로 본문 폭이 1280픽셀(px)로 설정되어 있습니다. 그러나 홈페이지를 디자인하다 보면, 이 기본 본문 폭이 너무 넓어 줄이고 싶은 경우가 있습니다. 오늘은 이 본문 폭을 줄이는 방법에 대해 알아보겠습니다.





1단계, 공통 디자인 설정 열기
디자인 모드 우측 상단에 위치한 톱니바퀴 아이콘을 클릭해, [공통 디자인 설정] 메뉴를 열어주세요.





2단계, 본문 폭 입력하기
본문 항목에서 본문 폭 값을 보면, 1280픽셀로 설정된 것을 확인하실 수 있습니다. 이번 강좌에서 저는 980픽셀로 입력했습니다. 980 이하 혹은 1280 이상으로 설정하셔도 괜찮지만, 현재 많이 쓰이는 모니터 크기를 생각하면 960-1280픽셀 사이, 그중에서도 짝수로 설정하시는 것이 좋습니다.

예) 960px, 980px, 1024px, 1136px, 1280px





3단계, 설정 저장하기
본문 폭 값을 입력했다면, 설정을 저장해주세요. 공통 디자인 설정 메뉴 밖으로 아무 곳이나 마우스 클릭하시면, 아래 그림처럼 저장 확인 창이 나타납니다.





4단계, 줄어든 본문 폭 확인하기
이전 단계에서 말씀드렸다시피 본문 폭 기본값은 1280픽셀입니다. 우리는 이전 단계에서 980픽셀로 줄였으니, 1280픽셀에서 980픽셀을 뺀 나머지 300픽셀만큼 본문 폭이 줄어든 것을 확인하실 수 있습니다.





5단계, 본문 폭이 줄어든 페이지들
본문 폭을 줄인 페이지들을 아래 그림들을 통해 미리 확인해보세요. 전반적으로 사이트가 샤프하게 변했습니다. 일반적으로 본문 폭이 작은 사이트는 블로그처럼 1단 레이아웃으로 콘텐츠를 부각 시키고자 할 때 종종 쓰입니다.

홈페이지 디자인에는 무엇이 정답이다,라는 법은 없습니다. 다만, 한 개 페이지에 다양한 콘텐츠를 여러 개 나열해 보여줄 때는 본문 폭을 다소 넓게 주는 것이 디자인적으로도 보기 좋고, 가독성도 좋다는 걸 기억해주세요. :)




해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.