47559 Members __ Online

정렬
HOME스터디[s]웹표준

라.DIV로 쉽게 레이아웃 잡기 기초 III HTML

posted by 한장의잎
date : , update :
hit : 54903, scrab : 0 , recommended : 28 , attach : 4

시작에 앞서
짜잔 -_-V
오랜만에 뵙습니다. 모두 별고 없으신지요?
먹고 살기 위해 일거리를 찾아다니다 보니 이제야 나타났습니다.
자, 시작해보겠습니다. 달려달려~!
  1. 상단(HEADER)
  2. 중단(CENTER)
  3. 하단(FOOTER)
  4. 막대기(SLIDER)
이 네가지를 이용해 아아주 기초적인 레이아웃을 짜보았습니다.
하지만 우리는 용맹무쌍(勇猛無雙)하게 다음단계로 나아가야 합니다.
왜냐구요? 그러고 싶으니까요~*-_-*
오늘은, 상단 중단 하단에 해당되는 DIV
즉 HEADER, CENTER, FOOTER 그리고 SLIDER 라는 녀석들을 그룹(GROUP)이라 부르겠습니다.
그리고, HEADER, CENTER, FOOTER를 대그룹이라는 직위에 올려놓고
SLIDER는 CENTER라는 대그룹 휘하에 근무하는 중그룹이라는 직위를 주겠습니다.
우선 아래 참조그림을 살펴볼까요?
layout003 
변화가 크게 생겼습니다.
언뜻 보면 어지럽습니다 @@
하지만, 조금 자세히 보면 너무 간단합니다.
네, 이번엔 요놈을 만들어 보도록 하겠습니다. 여러분
그룹의 정의 그리고 ID 네이밍
ID HEADER
layout003_01 
이름 ID 설명
GLOBAL NAVIGATION BLOCK gnb 광역 차림판
LOGO H1 표어(LOGO) ID를 사용하지 않고 HTML 기본 태그(TAG)인 H1을 사용 하겠습니다.
SEARCH BLOCK search 검색을 위한 입력창
CHANNEL NAVIGATION BLOCK cnb 채널의 차림판
CHANNEL SUB NAVIGATION BLOCK csnb 채널의 보조차림판
ID CENTER
layout003_02 
이름 ID 설명
LOCATION BLOCK locate 현재위치
SLIDER BLOCK slider 왼쪽막대기(딱히 이름붙힐게;;)
INFOMATION BLOCK info 정보
CONTENTS BLOCK contents 본문
ID SLIDER
layout003_02 
이름 ID 설명
OUTLOGIN outlogin 회원인증
LOCAL NAVIGATION BLOCK lnb 보조 차림판
INFOMATION BLOCK info 정보
CONTENTS BLOCK contents 본문
ID FOOTER
layout003_03 
이름 ID 설명
COPYRIGHT copyright 저작권
FOOTER GLOBAL NAVIGATION BLOCK fgnb 하단 광역 차림판

 

HTML 코딩
header
<!-- 여기부터 상단 -->
<div id="header">
      <div id="gnb">광역차림판</div>
      <h1>로고</h1>
      <div id="cnb">채널차림판</div>
      <div id="csnb">채널보조차림판</div>
      <div id="search">검색창</div>
</div>
<!-- // 여기까지 상단 -->
center
<!-- 여기부터 중단 -->
<div id="center">
      <div id="locate">현재위치</div>
      <div id="info">정보</div>
      <div id="slider">왼쪽막대기</div>
      <div id="contents">본문</div>
</div>
<!-- // 여기까지 중단 -->
footer
<!-- 여기부터 하단 -->
<div id="footer">
      <div id="fgnb"> 하단 광역 차림판 </div>
      <div id="copyright"> by EIPS </div>
</div>
<!-- // 여기까지 하단 -->

 

   어려움이 없을거라 생각하고 있습니다만, 만약 어려움을 느끼신다면 의견을 남겨주세요.

   이미 올라왔던 내용도, 다시 정리하고 차근차근 설명하도록 하겠습니다. :)
   다음편에서는 CSS를 작성 및 적용을 한 후, 위 HTML안에 내용을 넣어보도록 하겠습니다.

 

   부족한 내용에 관심 가져주시는분들께 감사의 말씀 올립니다.(--)(__)꾸벅









div, 웹표준, 레이아웃, 코딩
댓글 22 | 엮인글 0

DIV? 레이어 주무르기 1편
다.DIV로 쉽게 레이아웃 잡기 기초 II





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E