그레이톤의 심플한 2단 스킨! 하하~~(멋적음 _ _;;)
이제 skin.html을 작성해 보려고 합니다.
일단 디자인한 스킨이 어떠한 구조로 이루어 졌는지에 대해 작성해 보도록 하겠습니다.
앞서 결정된 디자인을 잘 뜯어 보면, 크게 header, content, sideinfo, footer영역으로 이루어져 있습니다. header에서 블로그 제목, 블로그 메뉴 또는 블로그 설명, 구독하기 버튼등이 들어갈 수 있겠죠. content에는 검색 리스트, 검색 댓글 리스트, 위치로그, 태그, 방명록, 공지사항, 보호글, 글, 페이징 하는 부분이 들어가게 됩니다. sideinfo에는 블로그 컨텐츠 관련된 여러 정보들이 올것입니다. 카테고리나, 최근글 리스트, 공지사항 등등이 포함됩니다. footer에는 기타 전체 블로그 메뉴와 카피라잇 부분이 들어 갈수 있겠죠.
꼭 그렇게 해야 하나요? header 영역에 블로그이미지를 넣고 싶다규~
어떤 영역에 어떤 내용을 넣을것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을수도 있고, sideinfo영역에 단순히 카테고리와 최근글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 그만큼 자유도가 보장된다는 의미겠죠.. ^^
그럼 미리 디자인 해 놓은 내용을 바탕으로 대략의 구조화에 들어가 보겠습니다.
------| skin.html structured |------------------------------------
<div class="container">
<div class="header"></div> <!-- header close -->
<div class="content"></div> <!-- content close -->
<div class="sideinfo"></div> <!-- sideinfo close -->
<div class="footer"></div> <!-- footer close -->
</div> <!-- container close -->
Tip : 닫는 </div>태그에 주석을 달아 놓습니다. 코드가 길어지면 헛갈릴수 있습니다.
container는 왜 넣었나요? 필요없는 레이어 아닌가요?
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두면 됩니다.
header는 꼭 header라고 써야 하나요? heaven이라고 쓰고 싶어요
클래스명을 지을때 상당히 많은 고민을 하게 됩니다. sideinfo 라고 할지 sidebar라고 할지... guest라고 할지 guestbook 라고 할지... 작명을 할때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두개의 단어를 사용하게 될경우 단어의 경계를 위해 두번째단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이건 그냥 저만의 rule입니다. recent_comment 라고 써도 누가 뭐랄사람 없습니다. ^^;;;
sideinfo는 보통 sidebar라고 하지 않나요? 헛갈려요
기존 sidebar를 sideinfo라고 변경한 이유는 sidebar가 꼭 bar의 형태가 아니라서 그렇습니다. 1단스킨의 경우 sidebar의 영역이 bar의 형태가 아닌 맨 아래 무더기로 위치하게 됩니다. 그래서 나름대로 sideinfo라고 이름을 변경하게 되었습니다. 이건 어디까지나 저만의 rule라고 할 수 있는데 나름대로 정당하다고 생각합니다. ^^;;; (너무 주관적인가? 여러분은 어때요?)
작명의 rule에 어떤 강제사항이 있는것은 아니지만 다른 사람이 봤을때 직관적으로 알아볼수 있는 이름이라면 주석조차도 필요치 않을수 있습니다. 그리고 본인이 작성한 코드를 한두달 시간이 흐른 후에 보더라도 특별한 어려움없이 수정할 수 있을것입니다. 그만큼 작명은 중요하다고 할수 있죠
위의 대략적인 구조화를 좀더 detail 하게 작성해 보겠습니다.
------| skin.html detail structured |------------------------------------
structureView.html좀더 자세한 스킨의 구조입니다.
structureView.html 은 스킨의 구조를 보기편하게 View 버전으로 만들어 봤습니다. sturcture.html은 실제 다운받아서 활용할 수 있도록 코드화 되어 있는 파일입니다.
다음엔... "해당영역에 원하는 치환자 붙여넣기" 에 대해 알아보도록 하겠습니다.
