부록) 새 스킨 만들기의 HTML구조 2 이글루스
2010.01.15 21:23 Edit
새 스킨을 만들면서 겪은 어려움을.. 다른 사람은 조금이라도 덜 겪었으면 하는 마음에 몇 줄 적습니다.
CSS소스 맨 처음에 뜬 건 "영역별 크기"라는데, 대체 이 클래스가 어디 영역인지 알 수가 있어야죠?
부디 도움되시길 바랍니다.
새 스킨 만들기의 HTML 구조 분석
- <div class="body">
- <div class="wrap">
- <div class="header">헤더영역</div>
- <div class="container"> //content_wrap과 sidebar를 담습니다.
- <div class="content_wrap"> //와이드위젯과 포스트를 담습니다.
- <div id="section_widemenu1" class="widemenu">와이드위젯 '위'</div>
- <div id="section_content" class="content"> 포스트 영역
- <div id="section_widemenu2" class="widemenu">와이드위젯 '아래'</div>
- </div> //content_wrap 끝
- <div id="section_sidebar1" class="column">사이드바 영역</div>
- <div class="content_wrap"> //와이드위젯과 포스트를 담습니다.
- </div> //container 끝
- <div class="header">헤더영역</div>
- </div> //wrap 끝
- <div class="wrap">
- </div> // body 끝
포스트 영역 HTML 분석
- <div id="section_content" class="content"> //post_view(s) + post_navi
- <div>//post_view(s)를 묶는 영역
- <div class="post_view"> //메인에 보이는 포스팅 개수가 늘어나면, 이 영역이 두 개가 됩니다.
- <div class="post_title_area">포스트 제목</div>
- <div class="post_content">포스트 본문</div>
- <div class="post_footer_area">트랙백(0), 덧글(0) 등의 글씨가 나오는 곳</div>
- <div class="post_link">덧글, 핑백, 트랙백 영역</div>
- </div> //post_view 끝
- <div class="post_view">(이하생략)</div>
- <div class="post_view"> //메인에 보이는 포스팅 개수가 늘어나면, 이 영역이 두 개가 됩니다.
- </div> //post_view(s)를 묶는 영역 끝
- <div class="post_paging">1,2,3,4...</div>
- <div>//post_view(s)를 묶는 영역
- </div> //content 끝
포스트 제목 HTML 분석
- <div class="post_title_area">
- <div class="post_title">
- <h2>실제 제목</h2>
- <ul class="post_info">글쓴이, 글쓴 시간, 포스트 주소, 덧글 수 등의 정보</ul>
- <div class="post_title">
- </div>
사이드바 영역 HTML 분석
- <div id="section_sidebar1" class="column">
- <div class="widget menu_profile">프로필</div>
- <div class="widget menu_calendar">달력</div>
- <div class="widget menu_category">카테고리</div>
- <div>
- <div class="widget widet_xxxxx(각기 다름)">
- <divi class="widget_content">사용자 위젯 스크립트 소스</div>
- </div>
- <div class="widget widet_xxxxx(각기 다름)">
- </div>
- <div >...이런 식으로 여러 개 더 있을 수 있다.</div>
- </div> //사이드바 끝
#section_sidebar1과 column의 값은 같아야합니다.
.column .widget은 프로필, 달력, 카테고리, 최근덧글 등의 "넓은 의미의 위젯"이며
.column .widget .widget_content는 "사용자가 추가한 위젯" 입니다.
