쏭군은 열정 드리머

책 제목 : Stylin' with CSS - 스타일링 CSS
부제 : 웹표준? DIV 코딩? 이 책 하나면 모두 해결!!!
만날 수 있는 곳 : Yes24, 인터파크, 도서11번가, 강컴닷컴, 알라딘, 교보문고
---
YES24에 소개한 역자의 글
안녕하세요. Stylin' with CSS의 한국어판 역자 쏭군입니다. 이 책은 영미권에서 많은 인기를 끈 책입니다. 그 만큼 입문 하시는 여러분들이 보시기에 내용도 탄탄하고 좋은책입니다.

처음에 이 책의 번역을 의뢰 받았을 때, 많이 망설였습니다. 첫번째 이유는, XHTML/CSS책을 번역하기에는 늦은게 아닌가 하는 생각이 들어서 였습니다. 그러나, 실무에서 아직도 이 부분에 대한 서적과 컨텐츠를 필요로 하시는 분들이 많다는 것을 알게 되었습니다.

두번째 이유는 원서가 워낙 훌륭한 책이였기 때문입니다. 제가 감히 이 책을 한국어로 잘 번역해 낼 수 있을지도 두려웠습니다. 어쨌든 저는 심사숙고 끝에 두려움을 물리치고 번역 작업에 착수하게 되었습니다. 이 책의 저자 찰스 와익 스미스가 책에서 최대한 많은 것을 담으려고 노력한 흔적이 엿보입니다. 영미권에서 이 책의 인기 또한 이유가 있음을 알게 되었습니다.

이 책을 통해서 기본기를 확실하게 잡으시고, 부족한 부분은 실무에서 금방금방 쌓으실 수 있으리라 생각됩니다. 책이 많은 분들께 도움이 되었으면 좋겠습니다.

또한, 컴퓨터 서적의 특성상 오타라던가 문장의 번역이 아리송한 부분이 있을 수 있습니다. 이 부분은 제 블로그(monoeyes.com)와 출판사를 통해서 최대한 정오표를 디테일하게 제공해 드릴 수 있도록 하겠습니다. 여러분들께 많은 도움이 되는 책이 되기를 빕니다. 감사합니다.

- 부족한 역자 쏭군 올림

to. 블로그 이웃 여러분들께
안녕하세요. 요즘 개인적인 포스팅이 좀 뜸했습니다. 이래저래 바쁘다 보니 블로그에서 인사를 잘 못드리는 것 같습니다. 다 시간관리에 미숙한 저의 부족함 때문이라고 생각합니다. 이번달에 저와 제 아내가 함께 번역한 책이 한 권 출간하여 판매를 시작했습니다. XHTML과 CSS 서적입니다. 웹표준 서적이에요^^ 아직 배워야 할 것도 많고 갈 길도 먼데 섣불리 서적을 번역한게 아닌가 조금 걱정도 되고 무섭고 그런게 저의 심정입니다~ 하지만 열심히 번역했습니다. 원서가 워낙 좋은 책이라 공부하시는 분들께 많은 도움이 되리라 생각합니다~ 책을 보시고 문제점이 있거나 궁금증이 있으시면 언제라도 블로그 통해서 말씀해 주세요~ 고맙습니다^^ 책을 보시는 분들께 진심으로 많은 도움이 되었으면 좋겠습니다.

책의 오타나 기타 문제, 그리고 궁금증이 있으신 경우
초벌 번역을 할 때부터 교정 작업을 거치기 까지 많은 분들의 손을 거쳐서 책이 완성됩니다. 꼼꼼히 작업하지만, 그래도 사람이 하는 일인지라 오타나 기타 문제들이 있는 경우가 있을 수 있습니다. 특히 컴퓨터 책은 오타가 심하다는 말이 있더라구요~ 하하^^; 스타일링 CSS책에서 발견되는 오타나 기타 문제점들은 제 블로그와 출판사 사이트를 통해서 정오표를 제공해드리겠습니다. 또한, 저희가 찾지 못한 문제를 찾으신 경우에는 제 블로그를 통해서 알려주세요~^^

thanks to
원고 작업 기간동안 조마조마해 하시며 끈기 있게 책의 완성까지 인도를 해주신 지앤선의 홍성신 대리님께 우선 감사의 말씀을 드립니다. 그리고 늘 활기찬 에너지로 저희를 북돋워주신 김지영 이사님께도 감사의 말씀을 전합니다. 정말정말 고생 많으셨습니다.

끝으로, 번역 작업 때문에 새벽 늦게 까지 잠도 못잤던 사람. 위장병까지 얻은 저희 와이프 유미에게 진심으로 고맙다는 말씀을 전합니다. 유미야 수고했어. 사랑해요!

XHTML코딩시, 한 단계 아래 레벨에 속하는 태그는 탭을 이용해서 한 칸 밀어냅니다. 이렇게 계층간 TAB을 이용해서 시각적으로 보기 좋게 해두면, 추후 코드 수정을 할때도 무척이나 도움됩니다. XHTML의 계층간 TAB활용은 조금만 경력이 있으신 디자이너/개발자 분들이면 잘 하시는 것 같습니다.

아주 사소한 부분이고, 꼭 지켜야 하는 룰은 아니지만, CSS도 TAB활용을 잘 하시길 바랍니다. 특히 CSS는 XHTML과 동일하게 TAB 작업을 해두면 추후 CSS 수정 작업시 매우 빠르고 효율적으로 작업을 할 수 있습니다.

바빠서 틈틈이, 계속 작성중인 문서입니다~
작성이 완료 되면 이 문구는 사라집니다~




박스모델과 객체의 공간에 대한 기본적인 이해

HTML과 CSS를 분리하여 웹페이지를 제작할 때, CSS를 이용하여 레이아웃을 구성합니다.
(물론 HTML 구조화도 CSS 코딩 못지 않게 중요합니다. 의미에 맞는 HTML구조화는 기본입니다.)
CSS로 레이아웃을 구성할 때, 박스모델만 이해를 하고 있으면 CSS코딩의 50% 이상은 먹고 들어갑니다. 박스모델에서 가장 중요하게 쓰이는 것이 margin과 padding 입니다.

• margin은 border를 기준으로 바깥에 있는 공간입니다.
• padding은 border를 기준으로 안쪽에 있는 공간입니다.

위의 그림을 봐주세요.
4개의 박스모델로 레이아웃이 구성되어 있습니다. 검정색 선은 border 입니다. 박스를 눈으로 보여주는 껍데기라고 생각하시면 됩니다.

border를 기준으로 안쪽에 파란색이 칠해져 있습니다. 그 파란색 부분이 padding 입니다. padding은 박스와 실제 컨텐츠 사이의 여백을 의미합니다.

border를 기준으로 바깥쪽에는 연두색이 칠해져있습니다. 이 부분이 margin 입니다. margin은 박스모델바깥의 여백을 의미합니다. 박스들이 너무 따닥따닥 붙어있다면 답답하겠죠? margin과 padding이 조금은 이해가 가실런지 모르겠습니다^^;;

네이버 인기검색어의 박스모델과, 제 블로그 우측의 사이드바의 박스모델로 margin과 padding을 설명하였습니다. 찬찬히 보시면 이해가 가시리라 생각됩니다.


margin과 padding 속성을 제대로 활용하는 방법

기본적으로 margin과 padding을 다음과 같이 사용할 수 있습니다.

.box { margin: 20px; }

이렇게 사용하면 박스모델의 상하좌우 모두를 마직 20픽셀로 띄우겠다는 말이됩니다.
그리고 반드시 px, em 등의 단위를 붙여줘야 한다는 사실도 잊으시면 안되겠구요~
(단, 값이 0일때는 단위를 안 붙여도 무방합니다.)

그럼 이런 질문도 스스로 해 볼 수 있습니다.
난 왼쪽에만 20px의 공간을 주고 나머지는 10픽셀을 주고 싶은데....

이렇게 코딩 해보면 되겠습니다.

.box { margin: 10px 10px 10px 20px; }


그럼 margin과 padding은 어떤 태그든지 모두 사용 가능한가요?

일단 블록라인 태그와 인라인 태그에 대해서 알아두실 필요성이 있는데요.
테트리스를 생각해보세요. 블럭들이 아래로 내려가면서 하나씩 하나씩 차곡차곡 쌓이죠? 웹브라우저는 이와 반대로 블럭들을 위에서 부터 하나씩 쌓아갑니다. 그리고 좌측에서 부터죠.


실수 빈도가 높은, 주의할 점 몇 가지

박스의 크기(width, height)는 border 값과 padding 값을 빼주어야 합니다.
예를들어, 가로 200픽셀, 세로 200픽셀의 정사각형 모양의 고정된 박스가 있다고 가정합시다.
이 박스의 클래스명이 box 라고 할 때, css는 다음과 같이 정의될 수 있겠습니다.

.box { width: 200px; height: 200px; }

헌데 만약에 이 박스에 두께 1픽셀의 검정색 테두리가 들어가게 되면, 아래와 같은 박스를 만들 수 있겠지요.

.box { width: 200px; height: 200px; border: 1px solid #000; }

이 박스의 너비와 높이는 실제로 가로 202px, 세로 202px 이 되었습니다. 왜냐하면 border값이 추가 되었기 때문인데요. 한 면당 1px씩 빼주어야 합니다. 그렇다면 스타일은 아래와 같이 다시 정의되어야 겠지요.

.box { width: 198px; height: 198px; border: 1px solid #000; }

이렇게 해주어야. 실제로 가로세로 200px 인 박스가 되겠습니다.

이렇게 완성된 박스안에 컨텐츠를 임의로 넣어보겠습니다.
컨텐츠가 박스에 딱 달라붙는군요. 그래서 박스와 컨텐츠사이에 여백을 줘 보겠습니다.
아까 배운 padding 을 이용해서 줄 수 있겠지요. padding을 15픽셀 정도 줘 보겠습니다.

.box { width: 198px; height: 198px; border: 1px solid #000; padding: 15px; }

padding을 15픽셀 주었으니 상하좌우에 15픽셀씩 패딩값이 들어갔겠죠?
그러면 가로값 30픽셀을 빼주고, 세로값도 30픽셀을 빼주어야겠죠.

.box { width: 168px; height: 168px; border: 1px solid #000; padding: 15px; }

이렇게 되어야, 실제로 가로 200픽셀, 세로 200픽셀인 박스가 만들어집니다.
가로 168px + 좌측border 1px + 우측 border 1px + 좌측 padding 15px + 우측 padding 15px = 200픽셀

이해가 가시죠^^?

만약 위의 예제처럼 border가 1픽셀 들어가있고, padding이 15픽셀 들어가 있는 박스에 width 값을 200픽셀 주게되면 실제로는 232px 짜리 박스가 만들어집니다. 그러면 계획했던 200픽셀 박스를 만드는 것은 실패하고 레이아웃은 산산조각이 나겠지요.

잊지마세요.

고정크기의 레이아웃을 만들 때, border 값과 padding 값 만큼의 사이즈를 빼주어야. 실제로 원하는 사이즈를 얻을 수 있다는 사실을요^^!

이미지가 아닌 텍스트로 웹페이지의 자료를 입력할 경우,
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.



기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 2가지 수준이고.
사이즈는 최소 사이즈가 11픽셀입니다. 그 이하는 찌그러져 버리지요.

영문은 11픽셀 이하 9픽셀도 깨지지않고 표현되며, 선택할 수 있는 폰트의 숫자도 많습니다.

그래서 이미지를 쓰지 않고 최대한 텍스트를 활용하여 페이지를 작성할 때 '돋움체 11픽셀'의 활용도는 매우 높습니다.

열심히 코딩을 하다가 익스플로러 계열의 브라우저들이 한글 폰트사이즈의 11픽셀을 읽어내지 못하는 문제를 발견했습니다.



보시다시피 아주 변태적인 경우입니다. 분명히 폰트사이즈 11픽셀을 줬는데, 익스플로러에서는 꿈쩍도 하지 않습니다. 우리회사에서 저와 웹표준 소모임을 하고 있는 매니아 A2님과 함께 CSS를 하나씩 지워가며 문제를 찾으려 했지만, 단 1라인을 남겨놓고도 문제를 찾지 못했습니다. 여전히 익스플로러에서는 한글 폰트 11픽셀이 먹히지 않는 둥 요지부동이였습니다.


한참을 뚫어지게 소스를 보고 나서야 문제점을 발견했습니다.


익스플로러에서는 font 속성에 폰트이름을 정해주지 않고, 사이즈만 11픽셀로 지정하면, 영문 이외의 폰트는 12픽셀로 출력된다는 것이였습니다. 아놔!! 이런 변태적인 경우가!! 익스플로러 하여튼!!


하지만 숨겨진 문제가 또 하나 있으니!

다음의 경우를 봅시다.

font-family: Dotum, 돋움; font-size: 12px; letter-spacing: -1px;

이 예제와 같이 letter-spacing: -1px 을 사용하는 경우가 생깁니다.
letter-spacing: -1px 을 사용하면, 한글 가독성도 조금 떨어지긴 하지만 보기 싫은 정도는 아닙니다. 디자이너분들 중에서도 포토샵 자간 -100 ~-75 정도를 즐겨 사용하는 분들이 계시고 그걸 코딩으로 간단하게 처리하는 방법이 letter-spacing 을 -1px 해주는 방법일 것입니다.(em 등의 활용은 일단 이 포스트와 크게 관련이 없으므로 언급하지 않겠습니다). 헌데 문제는 보시는바와 같이 영문과 숫자입니다. 상당히 가독성이 떨어집니다. 게다가 숫자의 경우는 아예 딱 붙어버립니다.

이 문제를 해결하기 위해서 즐겨 사용하는 방법이 아래와 같은 코드 처리입니다.

font-family: Verdana, Dotum, 돋움; font-size: 12px; letter-spacing: -1px;

letter-spacing 은 -1px 을 줘야겠고, 중간에 숫자나 영문을 써야할 경우 이와 같은 기법을 많이들 사용하십니다. 폰트를 설정하면서 영문폰트를 먼저 선언해주는 방법입니다. 그러면 일단 숫자나 영문은 영문 폰트를 먼저 인식하기 때문에 뒤에 선언한 돋움체는 한글만 적용을 받게되지요. 일단 아까전의 돋움체의 영향을 받을때 보다는 가독성이 많이 완화된 모습입니다.


익스플로러 폰트 사이즈 11픽셀처리 변태적인 상황은 여기서 또 한 번 연출됩니다.

font-family: Verdana, Dotum, 돋움; font-size: 11px; letter-spacing: -1px;

바로전의 예제에서 폰트사이즈만 11픽셀을 줬습니다. 파이어폭스는 11픽셀로 잘 출력되는 반면 익스플로러는 또또!! 요지부동입니다. 정말 변태스럽습니다. 이것의 문제원인과 해결법은 다음과 같습니다.

익스플로러에서는 폰트사이즈 11 픽셀을 사용할 때, 한글을 11픽셀로 사용하고 싶다면, 폰트 선언시 무조건 굴림이나 돋움을 가장 앞으로 오게 해야한다.

결국 폰트사이즈 11픽셀을 처리하는 부분에서는 다음과 같은 문제가 생기게 됩니다. 이것은 따로 span 을 줘서 letter-spacing: 0 으로 처리를 해주지 않는 이상 익스플로러에서는 해결불가능한 문제인 것으로 보입니다.

이처럼, 돋움체, 폰트사이즈 11px 은 사이트를 만들때 빠질 수 없는 디자인적 구성요소 중 하나입니다. 게다가 letter-spacing: -1px 을 줘야만 깔끔하게 출력이 됩니다.  헌데 익스플로러의 변태스러움으로 이해서 font 선언을 할 때, 영문 폰트가 앞에오는 꽁수를 사용할 수 없습니다. 그래서 돋움체에 폰트사이즈 11, 그리고 자간 -1px을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.

이상 익스플로러 계열의 브라우저에서 폰트 11픽셀을 변태적으로 처리하는 문제점과 그 해결방법을 알아보았습니다. 오랜만에 CSS 관련글 쓰려니 힘듦니다. 헥헥!


ps. 이 글에는 '변태'가 몇 번 들어갔을까요? 맞히는 분께는 올블로그 무료 이용권 50년치를 드립니다^,.^

해외 CSS와 디자인 사이트들을 서핑하다가 재미있는 서비스를 발견했습니다.
배너에 제목이 재미있어서 낚여서 들어갔는데요.. 이름하야!
You DESIGN We XHTML, IN 8 Hours

배너 제목이 참 재미있지요? '당신이 디자인하면, 우리는 코딩을 8시간 만에 해주리라!'


'PSD2HTML' 이라는 간판을 걸고 사업을 하고 있었습니다.
직접 디자인한 PSD를 자기들에게 주면 정확히 8시간안에 코딩을 완료해서 보내준답니다.

대충 IE와 파이어폭스만 지원하고 대충CSS 코딩으로 떼우면 $117,
웹표준을 준수하고 SEO(검색엔진최적화)까지 해서 최대한 신경써서 하는 코딩은 $211를 받는다네요.

정확하게 시간까지 공지되어 있습니다.

포트폴리오를 뒤져보니 그 유명한 CSS Zengarden도 저쪽의 포트폴리오였군요...^o^)b

참 재미있는 아이디어인 것 같습니다.
우리나라야 아직 HTML&CSS 코딩만으로 먹고 살곳이 녹록치 않지만, 미국에는 저렇게 해도 꽤나 먹고 살 수 있겠네요. 역시 컴퓨터는 뭐를해서 먹고 살아도~ 영어권이네요~~

조금 다른 이야기를 하나 드리자면,
한국에서는 디자이너 중에서도 '웹디자이너'가 제일 박봉입니다.
줏어들은 이야기로 미국이나 캐나다에서는 '웹디자이너'가 디자이너중에서 TOP 벌이가 '괜찮은 편'이라고 하더군요.연봉이나 대우나~
물론 거기 사는 사람한테 줏어들은거라서, 100% 신뢰할 순 없지만요.

일전에 웹서핑을 하다보니,
한국에 계셨다면 빛을 보지 못 할뻔한 실력이였을분인데(본의 아니게 죄송^^),
거기에서 나름 디자인 작업 열심히 해서, 고급차를 타더군요. 한국분이였는데~~~

아 말이 엉뚱한 방향으로 흘렀네요^^;;
어쨌든 저런 다양한 시도를 해볼 수 있는 영어권이 부럽습니다.
우리나라도 웹디자이너분들에 대한 처우가 더욱 좋아졌으면 좋겠군요^_^)b
(물론 e-xxxxxxx 같은 대형회사의 디자이너분들이야 잘 나가시는 분들이지만, 중소에이전시 업체의 디자이너분들은 거의 매일 밤잠도 포기하고 결과물을 찍어내는데 그에대한 대우란 퍽 좋지 않죠^^;;)
더불어 디자이너분들도 늘 능력개발에 매진해야겠구요~
무엇보다도 실력들도 좋으시면서~ 자기 몸값을 깎지맙시다~ 당당하게 제 값 받아야죠~^^

폼을 구성하는 라디오버튼, 셀렉트박스 등은 브라우저마다 다르게 출력되기 때문에, 실제 웹사이트를 만들 때, 이 녀석들의 디자인을 컨트롤 하는 것이 여간 까다로운 것이 아닙니다.

이번에는 라디오버튼과 이미지가 조합되서 클릭되어야 할 때, 발생하는 문제점 몇 가지를 해결한 코딩법을 소개해 드리겠습니다.


다음과 같은 U.I.를 만들어야 됩니다. 세 가지의 옵션 중 하나를 선택하게 하는 UI인데요, 접근성을 높이기 위해서는 다음과 같은 조건이 전제되어야 합니다.

이미지를 클릭해도, 라디오버튼이 선택 되도록 하는 것

네, 이용자가 원하는 옵션의 이미지를 클릭해도, 라디오 버튼이 선택되도록 하는 것이 접근성을 조금 더 높일 수 있는 방법이겠습니다.  그러면 이 UI를 만들기 위해서 어떻게 코딩하시나요?

삽질 1 <label> <input type="radio" name="blog" checked="checked" /> <img src="http://monoeyes.com/tistory.gif" width="103" height="28" alt="티스토리" /> </label> <label> <input type="radio" name="blog" /> <img src="http://monoeyes.com/tattertools.gif" width="119" height="28" alt="태터툴즈" /> </label> <label> <input type="radio" name="blog" /> <img src="http://monoeyes.com/textcube.gif" width="113" height="28" alt="텍스트큐브" /> </label> 디자인이 들어가는 CSS는 일단 논외로 하겠습니다.
이 코드는 input 과 img 를 라벨로 묶은 기본적인 형태입니다.

하지만, 우리의 일반적인 생각과 달리 이 소스에는 문제가 있습니다.

파 이어폭스에서는 이미지를 클릭하면 label 로 묶어진 라디오버튼 까지 한번에 클릭이 됩니다만, 익스플로러 계열에서는 이 소스 만으로는 이미지를 클릭해서는 라디오버튼이 꿈쩍도 하지 않습니다. 결국 유저에게 그 작은 라디오 버튼을 누르라고 강요하게 되는 것이고, 이것은 웹접근성이 많이 떨어지게 됩니다.

삽질 2 <input type="radio" name="blog" checked="checked" id="tistory" /> <label for="tistory"> <img src="http://monoeyes.com/tistory.gif" width="103" height="28" alt="티스토리" /> </label> <input type="radio" name="blog" checked="checked" id="tattertools" /> <label for="tattertools"> <img src="http://monoeyes.com/tattertools.gif" width="119" height="28" alt="태터툴즈" /> </label> <input type="radio" name="blog" checked="checked" id="textcube" /> <label for="textcube"> <img src="http://monoeyes.com/textcube.gif" width="113" height="28" alt="텍스트큐브" /> </label> 첫 소스보다는 다소 진보된 소스입니다.
input 버튼에 고유 id 값을 주었습니다. 클릭될 이미지를 label로 묶은 다음, 라벨에 for 값을 주어서, 강제로 해당 라디오 버튼을 눌리게 한 것 입니다.

하지만, 이 소스도 문제가 있습니다.
역 시나 파이어폭스에서는 작동을 합니다만, 익스플로러 계열에서는 작동을 하지 않습니다. 만약 label for 옵션을 사용할 때, 이미지 대신 텍스트라면 익스플로러 계열에서도 동작을 합니다만, 이미지를 사용할 경우 라디오 버튼이 꿈쩍도 하지 않습니다. 아이러니한건 이미지에 마우스 over시 라디오버튼이 반응은 보인다는 것 입니다. 뭐 클릭이 안되니까 쓸모는 없지만 말입니다.

해법
XHTML코드
<table class="blogtype"> <tr> <td> <input type="radio" name="blogtype" checked="checked" id="tistory" /> <label for="tistory"> <span class="tistory"><b>티스토리</b></span> </label> </td> <td> <input type="radio" name="blogtype" id="tattertools" /> <label for="tattertools"> <span class="tattertools"><b>태터툴즈</b></span> </label> </td> <td> <input type="radio" name="blogtype" id="textcube" /> <label for="textcube"> <span class="textcube"><b>텍스트큐브</b></span> </label> </td> </tr> </table> CSS 코드 .blogtype { margin-bottom: 28px; overflow: visible; } .blogtype { margin-bottom: 28px; overflow: visible; } .blogtype b { display: none; } .blogtype input { margin-right: 2px; float: left; display: block; margin-top: 9px; } .blogtype span { margin-right: 7px; } .blogtype .tistory { background: url(../images/icon_tistory.gif) 0 0 no-repeat; display: block; width: 103px; height: 28px; float: left; } .blogtype .tattertools { background: url(../images/icon_tattertools.gif) 0 0 no-repeat; display: block; width: 119px; height: 28px; float: left; } .blogtype .textcube { background: url(../images/icon_textcube.gif) 0 0 no-repeat; display: block; width: 113px; height: 28px; float: left; } 바로, 라벨의 for 값으로 라디오 버튼을 클릭하고, 라벨 사이에는 실제로 '텍스트'가 들어가게 하되, CSS로 이 텍스트를 이미지로 치환하는 방법입니다.
이렇게 하니까. IE6, IE7 등 익스플로러 계열에서도 잘 작동하고, 파이어폭스와 다른 브라우저에서도 문제없이 잘 동작하네요.

만약 정렬문제가 귀찮으시다면, 위의 소스처럼 테이블을 나눠서 엘리먼트를 배치하셔도 됩니다~

본 포스팅은 Code Syntax Highlighter가 사용되었습니다. RSS구독 하시는 분들은 http://monoeyes.com/447로 접속하시면 깔끔한 코드를 보실 수 있습니다.

아마도 앞으로는 디자인을 모듈화 하는 작업이 더욱 많아질 것입니다.
그래서 CSS를 통한 박스형 디자인은 자주 쓰이는 업무 중 하나인데요,
아직까지는 CSS를 이용해서 박스를 디자인함에 있어서 불편한 점이 많습니다.
CSS3 에서 새로이 추가되는 프로퍼티들을 보면서 기대되는 것 몇 가지를 소개할까 합니다.

background-size
background의 사이즈를 조절할 수 있는 프로퍼티입니다

div {
        background-image: url(bg.gif);
        background-size: 50%; }

라고 하면 백그라운드 크기를 50% 줄입니다.

div {
       background-image: url(bg.gif);
       background-size: 50px; }

이라고 하면 백그라운드 이미지를 50픽셀로 고정하게 됩니다.

다중 background 도입
하나의 엘리먼트에 여러개의 백그라운드를 사용할 수 있습니다.

div {
       background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg4.gif);
       background-position: top left, top right, bottom left ,bottom right; }

이런 방식으로 사용이가능합니다.

div {
      background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg.gif) url(bg5.gif);
      background-position: 20% 30%, 10% 40%, 60% 100%, 60%, 70% 80%; }

갯수의 제한도, 포지션 선언 방법도 자유롭습니다.

div {
      background-image: url(bg1.gif), url(bg2.gif);
      background-repeat: no-repeat, repeat;  }

각기 반복을 다르게 설정하여 사이트를 꾸밀 수 있게 됩니다.

border-style 추가


몇 가지 border-style이 추가됩니다. wave 속성이 눈여겨 볼만하네요~

border-image
엘리먼트의 border에 백그라운드를 넣을 수 있게 되었습니다!!


border-radius

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

기다렸던 속성중에 하나입니다. 박스형 모델을 디자인 할 때, 모서리에 라운드를 넣기 위해서는 필수 불가결하게 background 를 동원하거나 여러겹의 레이어를 겹쳐서 꽁수를 써야했는데요. 이제 그런 불편함은 많이 사라질 것 같습니다.

box-shadow 속성
엘리먼트의 외곽에 그림자 효과를 줄 수 있습니다.

div { border: 1px solid #999; box-shadow: 4px 4px #ccc; }

별 것 아닌 것 같지만, 이 속성 역시 필요없는 이미지 작업을 무척이나 줄여줄 것 같습니다. 또한 여러개의 엘리먼트를 겹치던 테크닉도 사라지겠네요. 너무나 유용할 것 같습니다.


CSS3로 인해서, 정말 다양한 CSS 기법들이 등장할 것 같습니다. 또한 불필요한 이미지 작업도 많이 줄어들 것 같습니다. 기대가 됩니다. 앞으로 더욱 웹페이지의 디자인 기법들이 발달해서 U.I.가 풍성해질 것을 기대하니 무척이나 고무됩니다.

꽤 오래전에 제안된 테크닉들 같은데요, 언제쯤 CSS3 프로젝트가 완료되고, 모든 브라우저에서 CSS3를 표준으로 채용할 날이 올까요 :D

소개하지 못한 많은 것들이 있습니다. 더 좋은 정보는 아래에 이 자료의 출처를 표시해두겠습니다. CSS3를 공부하시는데 참고가 되었으면 좋겠습니다.

출처 : http://www.w3.org/TR/css3-background

CSS의 :hover 이벤트는 마우스가 엘리먼트 위에 올라가있을 때 발생합니다. 이것은 될 수 있으면 자바스크립트의 onmouseover 를 사용하지 않고도, 디스플레이를 컨트롤 할 수 있기 때문에 편리합니다. 최근에 나오는 브라우저는 앵커태그(a) 이 외에 다른 엘리먼트 에서도 :hover 를 사용할 수 있도록 되어있습니다.

하지만 익스플로러 6 이하 브라우저에서는 오직 앵커 태그에서만 :hover가 작동하고, 다른 엘리먼트에서는 작동하지 않는 문제가 있습니다.

지금 제 블로그 메인 메뉴에 마우스를 올리면 뜨는 서브메뉴도 자바스크립트를 일체 사용하지 않고 CSS로만 만들어 진 것 입니다(올블로그 툴바가 있는 상태에서는 오작동합니다. 원인은 찾지 못했습니다). li:hover 기능을 이용해서 만든 것인데, 모든 최신 브라우저에서 별 문제 없이 작동을 합니다만, IE6 이하에서만 동작을 하지 않았습니다.

아래의 해결법으로 IE6에서도 문제없이 풀다운되는 메뉴를 구현할 수 있었습니다.

이럴때는 expression을 사용하면 강력한 CSS컨트롤을 할 수 있습니다. 단점으로는 익스플로러 계열에서만 작동한다는 점인데요. 그래서 오히려 제 블로그 같은 서브메뉴를 구현할때는 장점으로 부각될 수 있습니다. li:hover 가 IE6 이하에서 인식을 못하고 다른 브라우저에서는 정상인식을 하므로 IE6 이하의 브라우저에서만 expression을 적용시키면 되기 때문입니다.

활용소스는 다음과 같습니다.

일반적인 최신 브라우저는 위 소스에서 사용된 div:hover 가 작동합니다. 하지만 IE6 이하의 브라우저에서는 작동하지 않기 때문에, expression을 활용해서 강제로 div:hover 와 똑같은 효과가 구현 가능하도록 한 것입니다.
빨간 부분을 자신에게 맞게 고쳐서 쓰시면 됩니다. CSS는 상속중심의 코드이기 때문에, 기본적으로 상속받을 것은 받고, IE6 에서 사용할 expression만 그 아래에 따로 선언을 해주면 됩니다.

DIV 남발을 하지말자
TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다.
테이블의 단점 중 하나가 <td>에 재차 <table>이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다.

이 소스에서 필요없는 부분은 어디일까요?

네,
바로 이 소스에 있는 모든 DIV 입니다.
굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 감싸지 않더라도, CSS 컨트롤로 얼마든지 예제와 같은 디스플레이를 할 수 있습니다.

이렇게 조금더 소스가 가벼워질 수 있다는 말씁니다.
실제소스에서 수 없이 많은 div 가 쓸데없이 사용되고 있습니다.
이를 줄인다면 페이지가 로드되는데 걸리는 시간도 많이 줄어들겠지요 :D
더불어 DIV가 많아짐으로서 발생하는 다양한 버그발생의 가능성도 줄어들겠지요 :)


ID보다는 CLASS를 사용하고, CLASS역시 남발 하지말자
우선 CSS코딩시, id 사용은 자제하고 class 위주로 사용합니다. id는 한 번만 사용이 되므로, 재사용하기가 까다롭습니다. 더불어, 프로그램에서 페이지 컨트롤을 할 때 id 값을 이용하므로, 프로그램 수정을 가할 때, css도 고쳐야하는 번거로움이 있습니다. id는 지양하고 class를 사용하시길 권장합니다. CSS도 상위 엘리먼트에서 지정한 속성을 상속받을 수 있습니다. 상속은 CSS의 막강한 기능 중 하나입니다. 이 상속을 잘 활용해야, 향후 웹사이트 디자인을 관리할 때도 현저하게 시간을 줄여줄 수 있습니다. 상속을 활용하지 못하면, 오히려 웹표준이 아닌 홈페이지보다도 관리가 복잡하고 어려워 질 수 있습니다.

class를 남발한 소스의 경우

불필요한 class를 줄인 경우

class를 남발하지 않고도, 디테일한 부분까지 컨트롤 할 수 있다는 걸 알았습니다. 또한 class명이 풍족하게 남음으로서 작명에 어려움이 없습니다.(이름이 쉽게 고갈되지 않으므로~) 소스가 짧아서 큰 효과는 못 느끼시겠지만, 불필요한 코드를 줄이고, 재사용율을 높임으로서 1000라인의 소스가 500라인이 되고, 이는 페이지 로딩이나 트래픽등에 영향을 줄 수 있다는 걸 상기합시다. 물론 위의 소스중 text input 의 스타일이 글로벌에 설정되어 있거나 하는 실전에서의 특수상황은 있지만, 저런 방식으로 로그인 박스나, 페이징 박스를 제대로 class 하나로 묶어서 만들어 놓으면 다른 프로젝트로 떼서 사용하기도 간단합니다.


작명센스! 의미있는 CLASS명을 짓자
CSS를 이용해서 페이지 디자인을 하다보면 작명의 어려움의 벽에 부딪히게 됩니다. 왜냐하면 class 명은 좋은 이름이 있고 나쁜 이름이 있기 때문입니다.

- 나쁜이름의 예 1
변화가능성이 있는 이름은 짓지 않는 것이 좋습니다.
leftBox 의 경우 박스가, 레이아웃이 바뀌어 오른쪽으로 가야한다면, 박스는 오른쪽에 있는데 클래스 이름은 계속 leftBox로 가야하는 아이러니한 문제가 발생합니다. 이를 수정하는 것은 안해도 될 노동을 하게 되는 것이죠.

- 나쁜 이름의 예2
자바스크립트 등 해당 페이지와 join 해서 작업할 언어의 기본 함수등과 겹치는 문자는 쓰지 않는 것이 좋습니다. class라면 관련없 적을 수 있지만, 컴퓨터는 어떤 문제를 발생시킬 지 모르는 기계이므로 일단은 안 쓰는 것을 추천합니다.

- 좋은 이름의 예
해당 페이지의 CSS 레이아웃이나 디자인 요소가 바뀌어도, 만고불변 할 이름들입니다. class 이름 만을 보고도 개발자는 해당 위치의 기능에 대해서 파악할 수 있습니다. 의미있는 class 명을 지어야 한다는 말씀~

CSS 강좌를 쓰는 것은 참으로 오랜만입니다.
개발자분들은 연일 죽어나고 계시지만, 디자인은 비교적 회사일에 여유가 생기면서
이런 강좌를 쓸 시간도 주어지네요~
(특별히 칼님께서 휴일도 없이 해피빈기부와 올블릿 적립금 관련 개발하시느라 고생많으셨어요~ 토닥토닥~)

요번 강좌에서는 곧 마이올블에서 사용될 미니캘린더를 디자인 해볼까합니다.

테이블도 웹표준이 아닌건 아니란걸 아시리라 믿고~

테이블로 레이아웃을 짜지마라고는 많이들 들으셨을거에요~
하지만.. 테이블은 여전히 표형식의 데이터 출력물에는 매력적인 도구랍니다.
달력 역시 테이블방식의 코딩이 좋겠죠^^?

레이어 형식으로 필요시 작게 띄워서 사용할 예정이므로, 테이블 바깥에 div 를 감싸줍니다.
div 의 클래스이름은 cal_wrap입니다. css에서는 얘만 호출해서 하단의 태그를 호출할수 있습니다. 일단 테이블을 구성할 기본 HTML 파일을 작성하였습니다.
저장 방식은 utf-8 이고, 메타태그에서도 utf-8 언어셋을 지정합니다.
연결되는 스타일시트 파일은 style.css 입니다.
일요일은 빨간색으로 표현할 예정입니다. 일요일에 해당하는 셀에는 클래스명 sunday 를 모두 주었고, 오늘 날짜에는 today 클래스를, 그리고 유저가 임의로 선택한 날짜를 표현하기 위해 selectDay 클래스를 주었습니다.
그리고 가장 상위에 요일을 표시하는 부분을 한번에 컨트롤 하기 위해서 tr 에 week 클래스를 주었습니다. thead를 써도 되지만 우선 이번에는 이렇게 사용하겠습니다.

CSS는 뒤에 오는 구절을 최근 디자인으로 갱신합니다.
지난달 혹은 다음달 일요일의 경우 another_month 클래스와 sunday 클래스가 겹칩니다. 지이번달이 아닌 날짜는 전부 회색으로 표현할 예정이므로, sunday 클래스를 another_month 보다 상단에 위치시킵니다. 이렇게 하면 빨간색이 입혀있던 일요일은 다음 클래스에서 바꾸라는 색으로 바꿔버립니다.
이전달, 다음달 넘어가는 버튼은 gif 이미지 하나에 마우스가 올라갔을 때 모양을 함께 붙여놓았습니다. 즉, 실제 9x9 사이즈의 버튼에 사용된 gif 는 18x9 사이즈이고, 마우스가 올라가면 background position 을 가로 -9px 시켜서 작동시켰습니다.

자세한 설명은 링크로 대체합니다.
소스를 분석해 보시고.. 어려운점 있으시면 질문주세요~


실제 동작모습보기


 * 퍼가시거나 인용하실 때는 꼭 출처를 남겨주세요~ 쏭군 올림 ^-^

display: block 없이도, 네이버의 실시간 인기검색어 같은 표현방식을 DIV가 아닌 span 으로 처리를 할 수 있다는 사실!


저런씩으로 표현을 하기 위해서 기본적으로 세로로 표시가 되는 div 를 쓸필요없이,
기본적으로 가로로 엘리먼트가 나열되는 span 을 쓰는편이 편리하겠지요^^


위 처럼 코딩을 하고 출력을 해봤습니다. 아래처럼 브라우저에서 출력이 되는군요~


인기키워드 부분을 가로 크기를 넓혀서 ↑ 부분과 떨어뜨려보겠습니다.


브라우저로 결과를 확인해 보겠습니다~~~


오잉? 그런데 변화가 없네요...! span 은 width 가 안 먹는 다는 사실!
하지만 항상 꽁수는 있는 법입니다..
그럼 어떤 방법으로 span 에 가로를 주는지 알려드릴게요~


이렇게 하면 됩니다.
클래스명을 호출하는 .t10 앞에 span 을 붙여줍니다.
그리고 float 를 주면 span 에 가로값을 줄 수 있는 꽁수가 완성됩니다.
결과를 확인해볼까요^^


span 가로 값을 넓혀서 인기키워드 부분을 화살표와 벌린 모습입니다.
span 가로값이 안 먹어서 실전에서 고생하는 경우가 많으니
css 디자이너 분들께서는 필히 이 꽁수를 익히시면 도움되리라 생각합니다^^

검색을 통해서 오신분들~ 퍼 가실때는 출처를 남겨주세요

실무에서 굉장히 자주 마주치는 익스플로러 6 만의 CSS 버그가 있습니다.

쏭군은 익스플로러 7과, 파이어폭스2를 기반으로 디자인 작업을 합니다.
(사파리나 오페라는 아주 가끔 열어보고요.. 그래서 사파리에서 약간의 문제가 있긴 하지만..)
그래도 익스7, 파폭2에서 제작하면 익스 6이나 다른 브라우저에서도 그럭저럭 잘 뜨더군요..

그런데 익스 6은 역시 요주의 녀석이긴 한게...
레이아웃이라던가 객체가 벌어지는 현상이 안 생길래야 안생길수가 없어서..

실무에서 정말 자주 마주치는 익스플로러 IE용 버그 해결 방법을 몇 가지 쓰고자합니다

float 를 쓴 객체에 margin의 left 값이나 right 값이 들어가면 마진값이 두배로 늘어납니다. 그래서 파폭이나 익스7에서 멀쩡한 레이아웃이 익스 6에서는 마진값이 2배로 불어나서 레이아웃이 깨지거나 벌어집니다. 그래서 반드시 알아야하는 버그해결 법입니다.

float 를 쓴 객체에 margin 가로값을 주고나서는 꼭 display: inline 값을 주자는 것!

거의 모든 IE관련 버그는 홀리핵이라는 녀석을 많이 사용하는데, 사용법은 간단합니다

* html { height: 1px; }

그리고 css 상단에는 모든 * 필터를 이용해서 마진과 패딩을 0으로 셋팅하고 CSS 코딩을 시작한다면, 거의 모든 브라우저의 마진 및 패딩 문제를 해결한 상태에서 코딩을 시작할 수 있습니다. 물론 100% 해결되는 건 아니지만 80% 이상 원하는 시안을 얻는데 도움이 됩니다.

* { margin: 0; padding: 0; }

가장 널리쓰고, 유용한 핵이라고 할 수 있겠습니다~

위에 녀석들도 필수적으로 숙지하고 이용해야 하는 자주 등장하는 녀석들입니다만, 역시 IE의 패딩버그를 따라갈 수 없지요.. 덜덜 ㅠㅠ 이 패딩버그는 상당히 많이 발생하고, 레이아웃도 깨먹고, 고치는데 많이 헷갈리기도 하는 기특한 녀석이라서~ 정말 겁납니다~
위에 사용한 별표 * html 을 이용해서 해결하는 방법이 있습니다~

CSS 표준의 width나 height 값은 border 값, padding 값, margin 값을 모두 제외한 순수한 알맹이 값을 의미하는 반면에 IE는 height나 width에 padding과 border값을 포함합니다. 따라서 상당히 레이아웃 차이가 많이 나는 경우가 있습니다. 그런 경우에는 아래의 방식대로 해결하시면 됩니다.

#content { width: 200px; padding-left: 10px; }

이렇게 하면 일반브라우저에서는 총 너비는 210px 입니다. 그런데 이것을 IE에서는 그대로 200을 유지해버리기 때문에, 실제 크기 210px 을 줘야합니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; }
/* 핵으로 210px 을 줍니다, 패딩은 위에서 줘서 패스~ */

맥용 IE에서는 CSS를 정상적으로 읽는데 핵 때문에 다시 깨집니다. 그래서 다시 맥용 IE를 위해서 아래와 같이 코딩해주면 완성됩니다.

#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; w\idth: 200px; }
 /* \ 를 이용해 200px로 돌려줍니다~ */

 

웹표준은 DTD정의로 부터 시작됩니다.
DTD 정의가 빠져있으면 브라우저는 자신들만의 방식으로 코드를 렌더링 하기때문에 같은 내용이라도 브라우저마다 깨져보일 수 있습니다.

디자인만 찍어내왔다보니, dtd며 xml에 대해서는 저도 생소한 편인데, 찾아보니 dtd 별로 인식할 수 있는 태그 없는 태그도 많고, 참 헷갈리기는 한데, 그래도 웹표준을 위해서라면 꼭 정의해야겠군요 xml 제작 효율성과 교환의 인식성도 좋아지고 오류도 최소화할 수 있다네용~

HTML 4.01 호환모드

코드:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능

HTML 4.01 엄격모드

코드:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부태그가 완전히 먹통, 가장 이상적인 문서작성시 사용.

XHTML 1.0 호환모드

코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1999년 12월 24일 확정된 프레임문서. frameset이 사용가능. 하지만 넷스케이프.. 파폭쪽의 frame은 전혀 작동 되지 않음

XHTML 1.0 엄격모드

코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

웹 표준코딩을 준수 했을때 어떤 가시적인 효과가 있는지 직접 검증하기 위하여 한가지 실험을 하였습니다. 첨부된 파일은 동일한 화면을 Table로 구성하였을 때와 Div로 구성하였을 때 어떤 차이가 있는지 보여드리기 위하여 작성된 html 및 css 파일입니다.

Table Layout	Div Layout
HTML 코드라인 수 = 59 Line	HTML 코드라인 수 = 31 Line
HTML 파일 용량 = 1.58 KB	HTML 파일 용량 = 746 Byte
<table width="800" border="0" cellspacing="0" cellpadding="20"> <tr> <td colspan="3" valign="top" bgcolor="#000000" id="logo">Table Layout</td> </tr> <tr> <td width="200" height="400" valign="top" bgcolor="#666666"> <table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu"> <tr> <th bgcolor="#999999" style="height:30px">Menu List </th> </tr> <tr> <td>Menu1</td> </tr> <tr> <td>Menu2</td> </tr> <tr> <td>Menu3</td> </tr> <tr> <td>Menu4</td> </tr> <tr> <td>Menu5</td> </tr> </table> </td> <td height="400" valign="top" bgcolor="#999999"> <table width="380" border="0" cellspacing="0" cellpadding="5" id="contents"> <tr> <th bgcolor="#999999" style="height:30px">Page Title </th> </tr> <tr> <td valign="top">Layout Test Page. </td> </tr> </table> </td> <td width="100" height="400" valign="top" bgcolor="#CCCCCC"> <table width="100%" border="0" cellspacing="0" cellpadding="5" id="contents"> <tr> <th bgcolor="#999999" style="height:30px">Links </th> </tr> </table> </td> </tr> <tr> <td colspan="3" valign="top" bgcolor="#333333" id="copy">Copyright</td> </tr> </table>	<div id="logo">Table Layout</div> <div id="page"> <div id="menu"> <h1>Menu List </h1> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> <div id="contents"> <h2>Page Title </h2> <div id="text">Layout Test Page. </div> </div> <div id="links"> <h2>Links</h2> </div> </div> <div id="copy">Copyright</div>
CSS 코드라인 수 = 8 Line	CSS 코드라인 수 = 11 Line
CSS 파일 용량 = 919 Byte	CSS 파일 용량 = 1.27 KB
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold} #menu th { border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left} #menu td { border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF} #contents th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666} #contents td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify} #links th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666} #links td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify} #copy { font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; }	h1 { width:190px; padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#999999; border-bottom:3px solid #FFFFFF; margin:0} h2 { padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#666666; border-bottom:3px solid #FFFFFF; margin:0} #logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold; background:#000000; width:760px; padding:20px} #page { position:relative; width:800px; overflow:visible} #menu { position:relative; padding:20px; width:200px; background:#666666; float:left; height:400px } #menu ul { margin:0; padding:0} #menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF; list-style:none} #contents { position:relative; padding:20px; background: #999999; font-size:12px; font-family:Verdana; color:#FFFFFF; width:380px; float:left; height:400px} #text { padding:5px; line-height:150%; font-family:Verdana; text-align:justify} #links { position:relative; float:left; background:#CCCCCC; width:100px; padding:20px; clear:right; height:400px} #copy { position:relative; clear:both; background: #333333; font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; width:760px; padding:20px }

DIV+CSS 레이아웃과 웹 표준 코딩의 장점

1. 작고 가벼운 구조와 용량

Div 레이아웃의 경우 순수한 HTML 파일의 코드 라인 수와 파일의 용량은 Table 레이아웃에 비하여대략 50%정도 절감됩니다. 이렇게표준으로 코딩된 HTML 파일은 한개 사이트에서 수십 수천 페이지에 이르기 때문에 사용자의 트래픽으로 인한 서버의 부하를 경감할 수 있습니다. 유지보수 비용과 직결되는 문제죠.

Div 를 이용한 표준 코딩이 가벼워 질 수 밖에 없는 이유는 다음과 같습니다.내용 하나를 원하는 위치에 표기하기 위하여 Table 로 코딩하려면 <table><tr><td>내용</td></tr></table> 이와 같이 3쌍의 태그로 둘러싸야 합니다.하지만 Div 로 코딩하면 <div>내용</div> 1쌍의 태그로 족합니다. HTML 태그의 코드 라인수와 용량이 반으로 줄만 하죠

CSS 코드가 조금 더 늘어나긴 하지만 CSS 파일은 해당 웹사이트에 접속시 최초 1회 다운로드 되어 사용자 PC의 캐시메모리에 저장되며, 해당 웹사이트를 빠져나갈 때까지 다시 다운로드 되는 일이 거의 없는 파일입니다. 따라서 CSS 파일의 용량이 늘어나면 HTML 코드가 줄어들어도 전체적인 트래픽량은 대동소이 하지 않을까 라고 생각하신다면 잘못된 계산 입니다. HTML코드는 페이지를 열때마다 새롭게 다운로드 하지만 CSS 파일은 한번만 다운로드 되는 파일이기 때문입니다.

2. XML포멧으로 확장가능,CSS의존도를 높여디자인개편 비용을 절감

웹 표준 코딩은 문서의 구조와 표현을 분리합니다. 구조는 HTML으로 정의하고, 표현은 CSS로 정의합니다. 예를 들면 문서의 제목을 표현함에 있어서 <h1>태그는 구조적으로 의미있는 태그 입니다. 하지만 <h1> 태그는 글자를 단지 구조적으로만 의미있게 표현할 뿐보여주기 위한 장식적인 디자인 표현은 CSS 에서 담당합니다.이렇게 되면 HTML 태그는 문서의 구조만, CSS는 표현만 따로 분리하여 정의 한 것으로이는XML 데이터 문서로의 확장을 용이하게 만들고디자인 변경시 HTML 파일의 편집비율은 줄어들고 CSS파일만 수정하면 됩니다.

비표준 웹문서의 디자인 개편시HTML 1,000 페이지를 모두 일일이 열어서 Find & Replace 방식으로 수정하여야했습니다. 또는테이블 구조가 변경되는 경우기존의 페이지를 수정하는 것보다 다시 생산하는 방식이 훨씬 빠르기 때문에 디자인 개편은 곧 사이트의 재구축을 의미하였습니다.W3C에서 표준으로 권고하는 웹 표준방식으로 제작된 웹사이트는딸랑 CSS 1개 파일을 수정함으로서 HTML 1,000 페이지를 한꺼번에 디자인 개편하는 놀라운 경험을 할 수 있습니다.CSS의 본래 목적이 바로 그것입니다. 이것을 이해하려면 먼저 CSS의 디자인 표현 가능성과 한계에 대하여 알아두셔야 합니다. CSS의 디자인 표현 능력은 상상 그이상입니다.

3. 사람이나 로봇(컴퓨터)이이해하기 쉬운구조

둘러싸는 코드가간결하고 코드라인의 양이 줄기때문에 구조를 한눈에 파악하기 쉽습니다. 또한 그뿐만이 아닙니다.Div 레이아웃에서 h1, h2 태그를 사용한 것은 제목을 표기하기 위함이며 ul, li 태그를 사용한 것은 목록을구조적으로 의미있게 표현하기 위함 입니다. h1 태그 대신 제목을 <tr><td>...</td></tr>안에표현하는 것은어떤 의미도 없으므로 사람이든 검색로봇이든 이해하기 어려운 정보 입니다. 하지만h1태그로 둘러싼 제목은 사람 뿐만 아니라 검색로봇도 의미있게 받아들이고 XML 데이터로 확장하기에도 용이합니다. 그동안 하찮게 여겼던 태그들이 얼마나 중요한지 모르실 껍니다.

4. Table 은 고지식 하고 Div 는 유연합니다

솔직히 저는 처음 Div 코딩을 제안 받았을때 이해하기 어려웠습니다. 왜 그래야 하는지. Table 태그도 분명 표준 태그이며 편하고 유용하게 사용해 왔는데 왜이제는 사용하면 안돼는지 의아해 했습니다. 하지만 Div 의 장점을 알게 되면서 부터는 더이상 그것이 궁금하지 않게 되었습니다. 물론 Div 레이아웃을 사용하는 것이 웹 표준 방식이며소고기 맛을 처음 본 사람이 돼지고기는 쳐다보지도 않는 상황과 같다고 말씀드릴 수 있겠네요. 벽에 액자를 붙인다고 합시다. Table이 콘크리트 벽에 못을 깊숙히 때려박는 행위라면 Div 는 콘크리트 벽에 실리콘 접착행어를 달아주는 것과 같습니다. 언제든지 깔끔하게 떼어서 다른 위치에 붙일 수 있죠. 이게 가장 큰 장점 입니다. 게다가 레이아웃과 디자인 표현에 관한 코드가 CSS 파일안에서 모두 정의 되므로 문서의 구조와 내용은 변경하지 않고 디자인과 레이아웃만 바꾼다면 HTML 파일은 열어볼필요도 없어집니다. 레이아웃과 디자인을언제든지 쉽게 바꿀 수 있는 유지보수의 용이성이죠.

Table 은 현재 셀과 이웃셀이 연결되어 있습니다. 따라서 서로 높낮이나 크기를 완전히 다르게 하려면 따로 Table 태그를 한번 더 사용해야 합니다. 그리고 셀과 셀이 서로 연결되어 있기 때문에 특정부분의 레이아웃을 잘못 변경하면 페이지의 나머지 레이아웃도 함께 수정해야 합니다. 하지만 Div 태그는 각자 따로 노는 스타일 입니다. 물론 서로 밀어내고 붙어있는등 유기적인 관계를 가질 수도 있으며 이것을 변경하는 것은 매우 쉽습니다. css 코드의 position 속성만 변경하면 됩니다. 그럼 서로 함께 움직이거나 따로 놀도록 설정 할 수 있습니다. 다시 한번 말하지만 Div 태그는 둥둥 떠다니는 레이어의 성격을 함께지니고있으므로 언제든지 원하는 위치로 옮길 수 있어 유지보수가 매우 용이 합니다.

5. 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다

행정자치부에서 발표한 "홈페이지 구축운영 표준지침 2005" 문서에는 "한국형 웹 콘텐츠 접근성 지침 1.0" 이라는 별첨문서가 있는데 2005년부터 구축되기 시작한 행정기관 홈페이지는 해당 지침을 따르도록 되어 있는 말 그대로의 지침 입니다. 아직 강제성은 없지만 이 지침을 기준으로 평가하는 행위도 이루어 지고 있고 또 앞으로 강제될 활률이 높습니다.

이러한 접근성 지침의 근간이 되는 문서는 W3C에서 발표한 "웹 접근성 가이드" 입니다. 웹 표준은 접근성을 고려하여 제정된 것이기 때문에 웹 표준만 지키면 접근성 문제는 90%이상 자동으로 해결됩니다. 따로 떼어놓고 생각할 수 있는 문제가 아닙니다.

자료출처 : http://blog.naver.com/naradesign?Redirect=Log&logNo=110001611307

rel은 연결하는 문서가 스타일시트 문서임을 말해주며, type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 줍니다. 아무리 많은 문서를 만들어도 스타일은 1.css 파일에서 모두 정의해 주고, 문서들에는 LINK element만 넣어주면 된다. 수정을 할 때는 1.css 파일만을 고치면 된다.

출처 : (주)오늘과내일 웹호스팅 페이지 http://tt.co.kr

중앙정렬 사이트의 경우 레이어를 사용하면 사용자의 해상도나 창의 크기에 따라서 레이어 위치가 바뀌기 때문에 매우 고생을 하시는 분들이 많습니다.

위 소스는 화면을 반으로 쪼개어 그 화면 가운데 세로좌표를 기준으로 하여 레이어 위치를 고정시켜주기 때문에 가운데 정렬 홈페이지에서 레이어를 고정시키기에 매우 유용한 소스입니다. -220 부분의 부호와 수치를 적당하게 고쳐서사용하시면 됩니다.

CSS의 margin: auto;가 안 먹힐때 사용하세요.

발췌하실때는 출처와 답글을 남겨주세요^^