DIV 레이아웃에 대한 이해 1편 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

DIV 레이아웃에 대한 이해 1편 정보

DIV 레이아웃에 대한 이해 1편

본문

먼저 브라우저마다 같은 내용의 코딩을 서로 다르게 화면에 뿌려주는 현상때문에 크로스 브라우징 측면에서 div코딩의 입문자가 많이 힘들어 함을 알고 있습니다. 그런 분들을 위해 지금 div 레이아웃 코딩을 하고 계시는 많은 분들이 사용하고 있는 코딩에 대해서 풀어보고 알아보는 시간을 가져보고자 이렇게 팁을 써내려갑니다.

웹표준을 지키고 웹접근성을 고려하고 크로스 브라우징을 하여 우리모두 웹2.0 시대로 넘어갑시다.

먼저 기본적으로 홈페이지 제일 상단에 <!DOCTYPE html> 을 선언해줍니다.
예제 )
<!DOCTYPE html>
<html>
  <head>
    <title>문서의 제목</title>
  </head>
  <body>
  </body>
</html>

여기 예제와 같이 html 위에 독타입을 선언해줍니다. 독타입은 W3C 국제웹표준기구에서 모든 브라우져가 동일한 결과의 코딩을 출력하게 하기위해서 문서의 해석방식을 고정시키기 위해 문서의 종류를 표시하는 겁니다.
<!DOCTYPE html> 이라고 선언하는 것은 많이 들어보던 html5의 문서임을 브라우저에 알리기 위한것입니다.

여기 까지 하셨다면 일단은 기본적인 html5를 할 수 있는 환경이 조성되는 것이고 웹표준의 가장 첫걸음 독타입선언을 완료하게 됩니다. ( ! 독타입도 웹표준에 포함되는 내용입니다. )

다음으로 넘어가서 웹표준에 명시되어 있지는 않지만 홈페이지 코딩시 권장하는 스타일시트를 분리하는 것을 꼭! 하셔야합니다. 이걸 함으로서 홈페이지에 낭비되는 불필요한 리소스를 줄일 수 있습니다. ( 자세한 방법은 네이버 검색 )

스타일 시트를 분리할 경우 스타일 시트를 한개로 쓸까 아니면 여러개로 쓸까 하는 고민이 생깁니다. 저 같은 경우는
Gnuboard4/style/ 이라는 별도의 디렉토리경로를 생성하여 그누보드의 기본적인 /Style.css 를 넣어두고
/Layout_style1.css    /Layout_style2.css 이렇게 스타일 시트를 별도로 분활하여 사용합니다.

먼저 스타일시트를 작성하기전에 고려해야 할 부분들을 알려드리겠습니다. 웹브라우저 마다 다른 값이 화면에 출력되게 하는 가장 무서운 적은 <body></body> 의 속성입니다. 기본적으로 그누보드 style.css 파일에 body의 속성을 고정해 놓았지만 브라우져마다 텍스트 정렬 부분부터 시작하는 많은 속성이 다르게 읽혀집니다. 따라서 body의 서로 다른 속성을 커버할 방법의 코딩이 필요합니다. 그래서 '이중DIV'라 하는 코딩방법이 제시 되었고 대세가 되고 또 코딩의 표준이 되었습니다.

html body 내부 영역을 이중 div 로 살짝 코딩을 하자면
<body>
  <div id="wrap">
    <div class="x1"></div>
    <div class="x2"></div>
    <div class="x3"></div>
    <div class="x4"></div>
  </div>
</body>
과 같이 코딩을 하게 됩니다. 이중DIV 이라 하는 말은 여기서 가장 겉이되는 id가 wrap인 div를 베이스에 깔고 그 안에 실제 내용이 될 div를 집어넣어 안쪽 div를 감싸는 이중구조의 div코딩을 말합니다.

스타일 시트에서 위의 html 코딩에 가장 기본적으로 갖추어야될 소스를 뽑자면 아래와 같습니다.
- Layout_style1.css
#wrap {text-align:center; width:100%;}
#wrap .x1 {margin:0 auto; width:956px;}
여기서 wrap에 텍스트정렬을 중간으로 맞추게끔 하는 이유는 margin:0 auto; 라는 div 중앙정렬 태그가 텍스트 정렬이 중앙정렬이 되어 있을 때에만 작동되기 때문입니다.

- 1편은 여기서 마치도록 하겠습니다. 막 써내려갓습니다.
추천
5

댓글 6개

감사합니다 ^_^

그런데 css는 아직까지 class 지정해주는 것 때문에 해맨다는 ㅠ.ㅠ

보통 #wrap 지정해주면... 하위로 a, ul, li 하위클레스를 지정해주는데..

ul #wrap ul....li.. 이런식으로 나오는것은거은 어떻게 해주라는 것일까요?
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT