지금 현재 사용중인 블로그의 스킨은 티스토리에서 제공하는 1단형 스킨인 #1 을 수정한 것이다. 개인적으로 #1 스킨은 반응형 화면에 적합한 최고의 스킨이라고 생각한다. 처음 보여지는 화면만 보고 별로라고 할수도 있지만 구조적으로도 대단히 마음에 든다. 일부 나에게 맞춰 수정해야 하는 부분들이 있긴 하지만 ..


1헤드바 제거


#1 스킨은 관리자 메뉴, 카테고리, 검색 등 주요 메뉴가 헤드바 형태로 맨 위 상단의 공간을 차지하고 있다.

현재 이 블로그에서는 디자인이나 효과를 새로 적용하긴 했지만 기존 스킨과 마찬가지로 헤드바 안에 각 기능들을 변경해 거의 비슷하게 유지하고 있었다.

헤드바의 배경이 투명 상태여서 존재 여부를 알긴 어렵긴 하지만 상단의 일정 부분은 헤드바로 인해 클릭이 되지 않았다.

헤드바 형태가 반드시 필요한 것은 아닌것 같아서 여러 구성요소들을 포함하고 있는 헤드바를 삭제했다. 헤드바를 삭제하고 관련 CSS 를 삭제하니 당연한 일이지만 위치가 모두 뒤죽박죽이 되었다. 상단의 메뉴들은 모두 화면에 고정되는 형태여서 새로 위치 잡는건 다행히 간단하게 해결했다.



2메뉴 버튼 변경


가운데 3줄 모양의 햄버거 버튼도 메뉴 버튼임을 알기 쉽게 하기 위해 2줄 형태에 MENU 란 문구를 추가했다. 최근 웹사이트들에서는 메뉴 버튼이 이제는 기본 구성요소가 되었고 단순한 3줄이 아닌 다양한 형태의 메뉴 버튼들을 사용하고 있다. 메뉴 버튼은 이제 웹사이트의 꽃이다. ㅎㅎ



3홈과 방명록 버튼 추가


방명록 버튼이 메뉴 안에 들어가 있어 찾기 어려운듯 해서 화면의 왼편 아래에 추가했다. 단순해 보이지만 나름 고민도 하고 신경 많이 썼다. 방명록 찾는 사람이 없을지도 모르는데 나 혼자 오버한다.;;


4첫화면 이미지 그리드 모바일 화면 변경


블로그의 첫페이지는 현재 맨소니를 이용한 이미지 그리드 방식으로 최근글의 목록을 보여주고 있다. PC 화면에서는 3개의 열로 9개가 나타나고 태블릿과 모바일 화면에서는 1열로 9개가 주루룩 나타나는 형태였다.

이번에 태블릿 화면에서는 2열로 보이도록 화면 구성을 추가했다. 휴대폰 화면에서는 기존과 마찬가지로 1열 화면 구성이다.

이제 어느 기기의 화면에서도 보기에 불편하지 않은 반응형 블로그이다. (완벽이란 말을 썼다가 지웠다. 내가 모르는 불편함이 있을 수 있으니..)


태블릿 화면 첫페이지



모바일 화면 첫페이지


5기타


이 외에도 타이틀 부분등 화면 구성들에서 크게 눈에 띄지 않는 부분들이긴 하지만 이곳은 끊임없이 조금씩 변하고 있다.


블로그의 스킨 꾸미기 방법이나 서식 만들기와 관련된 글은 더이상 작성하지 않는다. 그리고 스킨 만들기나 변경 사항을 기록하는 것은 개인적인 용도일 뿐이다. 여기저기 찾아보면서 시도해보기도 하고 실패하기도 하고 나 자신에게도 재미있는 시간들이었는데 아쉽게 생각한다.