DIV와 CSS 레이아웃, 웹표준에 대한 소개

DIV와 CSS 레이아웃, 웹표준에 대한 소개

2012/01/11

DIV태그에 관한 간단한 소개

DIV는 Division의 약자로 나누고 쪼갠다는 뜻입니다. 예를 들면, 우리가 흔히 이야기 하는 2단 레이아웃이니 3단 레이아웃이니 이야기할때 큰 틀을 하나 잡고 가로 혹은 세로방향으로 내부를 나누어갑니다. 바로 이런 역할을 하는 태그라는 뜻이죠.

DIV와 CSS의 상관관계?

DIV는 (X)Html의 요소이지만 CSS에서 매우 비중있게 다루어집니다. 왜냐하면 DIV의 역할이 CSS와 함께 (X)Html문서에서 레이아웃을 잡는데 핵심적인 개념으로 사용되기 때문인데요. 과거에는 레이아웃을 잡을때 table 태그를 많이 이용했는데, (X)Html, CSS, 자바스크립트를 W3C 표준 권고안이 정하는 문법체계에 맞게 올바르게 사용하자는 웹표준이라는 개념이 등장하면서 거의 사장되다시피했던 DIV의 중요성이 부각되었습니다. 태그마다 정의되어 있는 고유한 태그의 기능에 맞게 사용하자는것이지요.

참고적으로 적어봅니다. W3C는 국제적으로 마크업랭귀지와 CSS에 관한 표준안을 발표하는 곳입니다. 링크를 따라가시면 자신의 블로그나 웹싸이트가 표준을 지키고 있는지 검사를 할 수 있는데 블로그는 좀 통과하기가 힘들더군요.

HTML 문법에 대한 표준검사 한국어 서비스 -> W3C Markup Validation Service

CSS 문법에 대한 표준검사 한국어 서비스 ->  W3C CSS Validation Service 

표준 검사를 통과하면 HTML DOCTYPE과 CSS의 버전에 따라 유효성 통과 인증 배너를 다양하게 제공해 줍니다. 배너들을 보여드리고 싶은데 보여드릴 수가 없네요. ^^

웹표준을 왜 준수해야하나?

웹표준을 준수할 경우에 장점은 대략적으로 구글과 같은 검색엔진에서 페이지 노출에 긍정적인 영향을 미치고, 크로스 브라우징(브라우저별 페이지 호환성문제)에서 발생할 수 있는 문제도 상당 부분 해결할 수 있습니다. CSS의존도를 높여서 유지보수나 수정에 용이합니다. 그리고 웹브라우저에서 해당 문서를 읽어들이기 편해지기 때문에 속도면에서도 향상이 있다고는 합니다만 속도를 체감할 수 있을 정도는 아닙니다..;; 이외에도 많은 장점이 있겠지만 제가 아는 수준은 이 정도밖에 안되네요.

불과 몇년 전까지만해도 레이아웃을 구성할때 table태그가 대세였던 점을 생각해보면, 웹표준이라는 트랜드가 얼마나 빠르게 확산되어갔는지 느낄 수 있습니다. DIV의 개념이 처음 접하시는 분은 다소 생소하게 느껴지고 태그를 좀 아는 분도 거부감이 들 수도 있습니다. 하지만 어쩌겠습니까? 요즘 다 이렇게 만든다는데...따라 가야지요. ^^ 저도 사실 DIV에 관해서는 100% 정확하게 사용하지는 못하고 있지만 도움이 될까하여 간략하게 소개글을 적어 보았습니다. 차후에 자세한 설명을 계속해서 올릴것이고, 설명 내용이 조금 길어 질 수도 있을것 같고해서 포스팅을 나누어 올리도록 하겠습니다.

고도를 기다리며 zenith5.tistory.com by 킥스

<관련글>

[CSS] - 헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣는 방법
[CSS] - CSS ID 선택자
[CSS] - CSS 클래스(Class)
[CSS] - CSS 기초적인 구문 규칙
[CSS] - Inline elements 와 Block level elements
[CSS] - CSS 선언방법