메카보일의 홈페이지 작업을 마쳤습니다.

지난 주 토요일, 모처럼 시간을 내어 시작하였는데 일주일이 훌쩍 지나갔습니다.

원래 하루 정도 손을 보려고 했는데, 여러 바쁜 일들로 인해 작업에 집중치 못하고 시간이 나질 않았거든요.

어쩌면 대수롭지 않아 차일피일 미루어 왔던 일이었는데 이제야 마무리 지었습니다.

이번의 메카보일 작업 내용은 다음과 같습니다.

• MS Internet Explorer 버전별 접속환경 설정
• ie6 - 메카보일에 접속할 수는 있지만 업그레이드 후 이용할 수 있도록 차단함
• ie7 - 일부 다르게 나타나는 css 요소들을 수정함.
• ie7, ie8 로 접속하는 경우 메인페이지 하단에 '최신 브라우저 업그레이드 권유 안내'가 보이도록 수정함.
• ie8, ie9 의 호환성 모드 보기가 작동하지 안도록 메타 설정.

• 게시판 정리
• 갤러리 게시판 삭제.
• 블로그 게시판 삭제.
• 각 게시판 기본 글꼴을 '맑은 고딕'에서 '굴림'으로 변경.
• 기본 글꼴 크기를 13px 에서 12px 로 변경.

• 접속환경을 고려한 미디어 쿼리(Media Query) 적용
• 접속자의 디스플레이 환경에 따른 최적화된 페이지 구성.
• ie9, chrome, firefox 등에서 적용 가능함.
• 모니터 크기가 다양한 일반 컴퓨터와 노트북 등 다양한 환경에 대응함.
• 아이패드, 갤럭시, 아이폰 등 모바일 환경에 대응함.

위 작업 중 접속환경에 대응하는 미디어 쿼리의 적용에 시간이 제법 소모되었습니다.

우선 대응하는 디스플레이 환경을 설정해야 합니다.

메카보일은 다음과 같이 대응 환경을 설정하였습니다.

• 일반 PC 모니터
• 1650px - 2560px 해상도, 23~30인치 모니터
• 1280px - 1650px 해상도, 19~22인치 모니터
• 노트북 환경
• 1180px - 1280px 해상도, 노트북 환경
• 965px - 1180px 해상도, 노트북 환경
• 태블릿PC 와 스마트폰 환경
• 920px - 965px Tablet PC
• 820px - 920px Mobil
• 650px - 820px Mobil
• 450px - 650px Mobil

위와 같은 접속 환경을 설정한 후 각 각의 모드별로 작업한 다음 일일히 체크해가며 마음에 들도록 수정을 반복합니다.

미디어 쿼리 설정값을 너무 세분하였기에 수정과 확인작업에 시간이 소모될 수 밖에 없었지요.

그러나 미디어 쿼리 설정은 IE9, Chrome, Firefox 등에서만 작동합니다.

IE7, IE8 등의 구형 브라우저에서는 작동하지 않습니다.

만일 IE9, Chrome, Firefox 등으로 접속하셨다면 메카보일의 홈페이지 창 크기를 좌 우로 조정하여 보세요.

창 크기에 따라 페이지의 각 요소와 여백 등이 변화하는 것을 확인할 수 있을 것입니다.