본문 바로가기
각종 Tip

웹표준과 CSS에 대한 이해

유토피아건 2009. 8. 18. 17:05


 

ZBXE(제로보드XE) 공식메뉴얼에 있는 내용입니다.
내용상 이해가 쉽게 된다고 생각하여 스크랩 하였습니다.

출처: 제로보드 공식메뉴얼
작성자: 열혈후니
원본 : http://www.zeroboard.com/?mid=manual&pageid=684681 입니다.

 

 

이 페이지에서는 zeroboard XE(이하, zbXE) 스킨 코딩을 위한 기초 문법인 'XHTML의 개념' 과 'HTML에서 XHTML 로 전환'의 필요성을 알기 쉽게 설명하려 합니다.

조금 길어 질 수도 있지만 이 한페이지로 'zbXE의 스킨을 제작하기위한 XHTML'을 이해하는데, 도움이 될 것이라 기대해봅니다.

XHTML과 CSS에 대해서, 이 페이지 외에 한국소프트웨어진흥원(KIPA)에서 만든 pdf파일을 참고하시는것도 도움이 될 겁니다.web-standard-guide-2005_KIPA_200512.pdf

 

  • 스프링노트는 링크에 Target을 걸 수가 없습니다.
  • 많은 참조 링크가 있으니, 링크를 새창으로 열고 싶으신 분께서는 "Shift + 클릭"을 하시기 바랍니다.

 

 

XHTML#

XHTML (eXtensible Hypertext Markup Language) 이란 무엇인가?

[위키백과 참조 : http://ko.wikipedia.org/wiki/XHTML ]

[W3C XHTML 1.0 규격 권고안(설명서,지침) 영문 : http://www.w3.org/TR/xhtml1/ ]

[W3C XHTML 1.0 규격 권고안(설명서,지침) 한글번역문(by http://trio.co.kr/) : http://trio.co.kr/webrefer/xhtml/overview.html ]

 

요약하자면 이렇습니다.

  • XHTML 은 'HTML 버전4'를 XML(확장생성언어)을 적용하여 재구성한 언어로서 'XHTML 1.0'이 2000년 1월 26일, W3C의 권고안이 된 후 계속적으로 개선, 개발 되고있습니다. (HTML은 더이상 개발되지 않습니다.)
  • XHTML은 대부분의 최신 웹브라우저에서 정확하게 해석되고 있으며, XHTML이 HTML에 거의 포함되기 때문에 구형 브라우저에서도 별 문제가 없이 해석됩니다. 즉, 요즈음 브라우저는 '구버전 HTML 문서' 및 '최신 XHTML 문서'를 모두 거의 정확하게 해석하여 표현해 줍니다.
  • XHTML은 HTML의 문법을 대부분 그대로 계승하고 있지만 그 문법을 좀 더 엄격하게 지키도록 요구합니다.
  • 좀 더 엄격한 버전의 HTML 즉, XHTML의 필요를 느끼게 된 가장 큰 이유는 웹 콘텐츠가 전통적인 '컴퓨터'를 벗어나 여러 가지 장치(이동통신기기, 장애인을 위한 점자&음성브라우저 등...)에서 이용되면서, 부정확한 HTML을 해석하는데 많은 어려움이 생겨났기 때문입니다.
    즉, 하나의 웹문서가 여러 가지 장치, 여러 가지 브라우저 에서 모두 그 내용(콘텐츠)를 제대로 이해하고 보여줄 수 있도록 할 필요성이 있는 시대가 이미 시작되었고, 그렇게 할 수 있도록 만들어주는 것이 XHTML의 존재이유입니다.

 

위와 같은 내용을 보면 HTML과 XHTML 이 크게 다르지 않게 느껴집니다.

문법이 크게 다르지 않아서 차이를 느끼지 못한데다가, 구버젼 HTML 문서, 심지어 많은 문법적 오류를 가진 HTML 문서 까지도 최신 웹브라우저에서 큰 문제없이 해석해주는 이유 때문에 이미 오래전에 발표된 XHTML이 아직까지도 대부분의 웹 디자이너에게 멀게만 느껴지도록 방치된 원인이 아닐까합니다. (필자도 얼마전까지 그래왔습니다. zbXE의 스킨을 만들어보기 시작하면서 XHTML관련 책을 한권 사서 보고 나서야 XHTML을 써야겠구나 하는 생각이 들었으니까요.)

 

XHTML 걱정하지 마세요.

기존 HTML로 홈페이지를 직접 만들어 보신 여러분들 께서는 이미 XHTML의 대부분의 문법을 알고 계십니다.

단, 알면서도 지키지 않았거나, 그 테그의 의미를 잘못 이해하고 있었던 것이 조금 있을 뿐입니다.

 

이제 XHTML문서를 작성하는 방법을 하나 하나 알아보도록 하겠습니다.

 

*핵심정리 : XHTML은 "하나의 문서를 여러 가지 장치, 여러 가지 브라우저가 그 내용을 제대로 이해하고 보여줄 수 있도록 하는 것"을 목적으로 탄생하였습니다.

 

*추가 : 문서를 보는데 도대체 얼마나 다양한 "여러가지 환경"이 있길래 이런 고민을 하는 것인지
           다음 페이지를 보시면 느낌이 확~ 오실 것입니다.

웹 접근성 관계요소 (by 정찬명 님) : http://www.zeroboard.com/12663405

 

 

 

XHTML 문서의 구조#

XHTML은 문서의 구조(Structure)와 표현(Presentation)을 분리하여 작성합니다.

이것은 XHTML의 탄생 목적을 달성하기 위한 중요한 방법입니다.

 

구조는 한마디로 문서의 내용 이라고 볼 수 있고,

표현은 그 내용을 표시해주는 방법 즉, 디자인 이라고 보면 되겠습니다.

 

구조 (Structure)        = 내용 (Contents)

표현 (Presentation)    = 디자인 (Design)

 

대부분의 프로그램들이 흔히말하는 "코드와 디자인의 분리" 를 시도하고있습니다.

이것의 장점은 개발과 디자인의 완벽한 분업화가 가능하며, 디자이너는 개발언어를 완벽하게 이해할 필요가 없어지며, 서로간의 간섭을 줄여 오류발생의 가능성도 줄여줍니다. 그리고, 유지보수 측면에서도 유리하게 됩니다.

 

zbXE 역시 이러한 이유로 코드와 스킨을 분리시켜 놓았습니다. 그래서 스킨 디자이너는 머리아픈 PHP코드를 모두 이해할 필요가 없어졌습니다.

 

그리고, 스킨은 역시 같은 이유로  '구조'와 '표현'으로 다시한번 분리되는 것입니다.

디자인을 변경할 때는 디자인만 신경 쓰면 되고, 그 내용은 손 댈 필요가 없으며 의도하지 않게 내용이 변경되는 일도 없습니다.

 

이해를 돕기 위해서 다음 그림을 보시겠습니다.

 

위 그림을 보면 XHTML 만가지고는 브라우저에 우리가 의도한 이쁜(?)문서를 뿌려줄 수 없다는 것을 알 수 있습니다.

표현 방법을 결정하기 위해서 XHTML 과 함께 CSS를 필요로 합니다.

 

구조 (Structure)        = 내용 (Contents)   = HTML (XHTML)

표현 (Presentation)    = 디자인 (Design)  = CSS

* CSS (Cascading Style Sheets) : 위키백과 , 네이버백과

 

구조를 지키는 것은 브라우저 (컴퓨터 또는 여러 가지 장치)를 위한 것이며,

표현은 그 내용을 보는 사람을 위한 것이라고 볼 수도 있겠네요.

 

이제 우리는 다음장을 통하여 이런 구조를 유지하면서 웹페이지를 작성하는 방법을 구체적으로 알아보도록 하겠습니다.

 

 

 

 

 

 

XHTML 작성방법#

XHTML 알고보면 별거 아닙니다!!!

교과서에 충실히 따르라는 지침 일 뿐, 바뀌는 것은 많지 않습니다.

이 페이지에서 모든 변경사항을 일일이 설명하기는 힘들고 중요한 몇 가지만 정리해 보겠습니다.

문서형 선언 (Document Type Definition)#

'문서형 선언' 이란 웹문서를 작성할 때 사용한 언어(문서의 형태)를 결정하고 그 내용을 브라우저에게 알려주는 방법을 말합니다.

문서형 선언은 웹문서의 가장 첫번째 행에 <!DOCTYPE ~내용~> 이라는 테그를 입력하면 됩니다.

 

웹디자이너(혹은 개발자)가 선택할 수 있는 문서형은 아래와 같은 것들이 있습니다.

  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0 Transitional - (zbXE의 기본 문서형입니다.) 기존 HTML의 장점을 사용할 때 그리고 Lynx등 CSS를 이해못하는 브라우저에서의 호환성을 고려할때 사용합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset - HTML Frame(프레임)을 문서내에서 사용코자 할때에는 Frameset DTD을 사용합니다. HTML 엘레멘트의 컨텐트(content) 모델을 제외하고는 HTML 4.01 과도기적(transitional) DTD와 같은데, 프레임세트(frameset) 문서에서는 "BODY"  엘레멘트 자리에 "FRAMESET" 엘레멘트를 사용합니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.0 Strict - 완벽한 XML호환의 XHTML문서 (v1.0)를 작성할시 가장 엄격한 문서 정의(Strict DTD)를 지정합니다. CSS를 사용할 수 있습니다.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

브라우저는 '문서형 선언'을 통해 지정된 형식을 기준으로 문서를 이해하게 됩니다.

 

Strict 와 Transitional 에 관하여...

사전적 의미 :

  • Strict = "엄격한, 꼼꼼한 ; 정밀한 ; 완전한"
  • Transitional = "변천하는 ; 과도적인, 과도기의"

W3C가 제안한 HTML 4.01 규격의 Transitional DTD항목에서 다음과 같이 설명하고 있습니다.

(영문 : http://www.w3.org/TR/1999/REC-html401-19991224/sgml/loosedtd.html )

(한글 번역문서 링크 : http://trio.co.kr/webrefer/html/sgml/loosedtd.html )

This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

 

이것은 과도기적인 HTML 4.01 문서형 선언으로, W3C가 스타일시트(style sheets)를 발달, 장려하기 위하여 단계적으로 제거할 "표현(presentation) 엘리먼트" 를 포함하고있다. 개발자는 가능한 엄격한(Strict) 문서형을 사용해야한다. 그렇지만  표현 속성과 엘리먼트를 지원해야 할 필요가 있을 경우에는 과도기적 문서형을 사용할 수도있다.

 

* may use 의 의미는 '규격에 적합하지 않지만 사용할 수 있도록 허용은 해준다.' 는 정도의 의미로 해석되겠습니다.
  번역문 - http://trio.co.kr/webrefer/xhtml/overview.html#terms "2.1 용어" 부분을 참조하시기 바랍니다.

  영문 - http://www.w3.org/TR/xhtml1/#terms

* 링크된 번역문서의 번역도 좀 이상한 부분이 있어서 필자가 다시 번역했습니다.^^;

 

즉, W3C의 의도는

이미 HTML 4.01 때 부터 구조와 표현의 분리를 지향해왔고,

이 문법을 '엄격하게 지킬 것'을 권장하고 있지만, '완벽한 문법'으로의 전환에 어려움을 느끼는 개발자를 위해 Transitional DTD를 (임시로) 만들어 주었고, zbXE 역시 아직 '엄격한 XHTML'에 익숙하지 않은 상당수의 디자이너&개발자와 구버젼HTML 문법으로 구성된 기존 콘텐츠를 고려하여 XHTML 1.0 Transitional DTD를 선택한 것이라고 볼 수 있겠습니다.

 

HTML 태그(Tag)의 의미를 수호하라!!!#

HTML 문법 안에 있는 모든 태그(Tag)들은 명확한 의미을 가지고 있습니다. 우리는 그 태그의 의미에 맞게 문서를 작성해야 브라우저는 문서의 구조를 제대로 이해할 수 있습니다.

태그의 의미에 맞게 작성한다는 것이 어떤 것인지 이해하기 위해서 몇가지 예를 들어 설명해 보겠습니다.

● 예제 1 - 이것은 제목입니다.

문서안에 아래와 같은 내용이 있다고 합시다.

  1. 짬뽕의 역사
  2. 중국요리의 일종으로...

위와 같은 문서에서 '짬뽕의 역사'를 제목으로 만들어 보겠습니다.

XHTML을 알기전의 우리는 이런 식으로 코딩을 해왔습니다.

  1. <font size="6"><b>짬뽕의 역사</b></font><br>
  2. 중국요리의 일종으로...

결과는 이렇게 보이죠.

보기에는 제목처럼 보입니다. 그러나 브라우저는 어느 것이 제목인지 어느것이 본문인지 구분하지 못합니다.

우리는 브라우저에게 "'짬뽕의 역사'를 굵게 그리고 글꼴크기를 크게 표현해달라." 고 표현(presentation)에 관한 설명만 한 것입니다.

문서의 구조는 전혀 설명해주고 있지 않습니다.

 

다시한번 기억해야 할 것은 XHTML의 문법은 HTML 파일에서 오직 '문서의 구조'만 표현하길 권장하고 있다는 것입니다. 그리고, 엄격한 XHTML 규정 안에서는 표현과 관련된 대부분의 요소(element)와 속성(attribute)들은 없어졌습니다. 즉, 엄격한 XHTML문법에서는 이미 없어진 '표현과 관련된 요소와 속성들'을 사용하면 오류(Error)로 인식됩니다.

그렇다고 너무 걱정하실 필요는 없습니다. 대부분의 브라우저는 오류가 있는 문서라도 가능한 제대로 보여주려고 나름대로의 방법으로 노력해주기 때문에 여러분의 사이트는 오류(Error)메시지 없이 잘 돌아가고 있긴 할테니까요. 한정된 브라우저에서만 말이죠.

 

문법적인 오류가 있는지 검사하는 방법에 관하여 이 페이지 마지막 "XHTML 유효성 검사 도구"에서 배우게 될 것입니다.

 

그러면 XHTML 문법에 맞게 작성해 보겠습니다.

  1. <h1>짬뽕의 역사</h1>
  2. <p>중국요리의 일종으로</p>

결과는 이렇게 보입니다.

똑같아 보인다구요?

그렇지만 의미는 크게 다릅니다.

 

<h1>태그의 "h" 는 'headline'의 첫글자를 따서 만들어진 태그입니다. 즉 제목을 의미합니다.

<p>태그의 "p" 는 'paragraph'. 즉 문단을 의미합니다.

 

문서의 구조를 이루는 요소들은 제목, 소제목, 여러 문단으로 이루어진 본문, 목록, 표, 인용구, 강조문 등의 여러가지가 있습니다. 그리고 HTML은 그 요소들을 위한 태그를 대부분 가지고 있습니다. 우리는 태그를 그런 의미에 따라 올바게 사용함으로서 브라우저에게 문서의 구조를 정확하게 알려주어야 하는 것입니다.

 

질문있어요!!!

  1. <h1>태그로 둘러싼 부분은 '글자의 크기가 커지고 굵기도 굵게 표현'되는데요.
    이것은 <h1>태그가 제목이라는 구조 외에도 표현에 관한 의미까지 포함하는 것 아닌가요?
    그렇게 생각하실 수도 있지만 아닙니다.
    분명 <h1>태그는 브라우저에게 "이것은 제목이다." 라는 구조만 알려주고있습니다. 그런데 모든 브라우저는 '브라우저 나름 데로의 기본 CSS'을 가지고있습니다. 그리고 대부분 브라우저의 기본 CSS는 그 스타일이 매우 비슷합니다.
    즉, 브라우저는 그 문서의 개발자가 따로 스타일을 지정하지 않은 모든 요소 들에 데하여 자기가 가진 기본 CSS의 스타일을 적용해주는 것입니다.
  2. <h1>태그를 이용한 제목의 모양이 마음에 안드는데요. 크기도 너무 크고 글꼴도 마음에 안드는데... 모양을 바꾸고 싶을 때는 어떻게 하죠?
    CSS를 통해서 제목의 표현(모양)을 마음대로 바꾸실 수 있습니다.
    HTML에서는 <h1> 태그를 통해서 제목이라는 구조만 결정하고 CSS에서는 <h1>태그를 사용한 부분을 어떻게 표현되도록 할 것인지 디자인을 결정해주면 되는 것입니다.
●예제 2 - 이왕이면 다홍치마

문장의 일부를 강조하고 싶을 때 자주 쓰는 태그가 있습니다.

바로 <b></b>태그죠. <b>태그는 글자를 굵게(bold) 표시해줍니다.

그리고, <i></i>태그 역시 문장의 일부를 기울어진 이탤릭체(italic)로 강조해줍니다.

 

이 두 태그의 이름이 가지는 의미 자체가 "굵게!" , "기울여!" 라는 표현(presentation)의 의미입니다.

그래서, 이 태그는 XHTML 에서는 사라졌습니다.

 

 

XHTML 문법에서는 대신 아래와 같은 태그를 지원합니다.

<b>글자</b> → <strong>글자</strong>

<i>글자</i> → <em>글자</em>

 

<em>      = emphasis (강조) = 대부분의 브라우저는 기울어진 이탤릭체(italic)로 표현합니다.

<strong> = stronger emphasis (강한 강조) = 대부분의 브라우저는 굵게(bold) 표현합니다.

 

물론, XHTML 1.0 Transitional DTD 에서는 구버젼 태그인 <b><i>를 허용은 해줍니다. 그리고 웬만한 브라우저들은 <b> 태그와 <i> 태그를 기존에 하던 데로 굵게, 기울어지게 표현해 줍니다.

 

즉, zbXE의 스킨을 만들 때 같은 효과라면 <strong>을...

이왕이면 다홍치마라고 XHTML 규격에 맞는 태그를 사용하는 것이 좋겠습니다.

 

 

 

약간 바뀐 HTML 태그(Tags) 규칙#
  1. <html xmlns="http://www.w3.org/1999/xhtml">
    <html> 엘리먼트에 위와 같이 xmlns 속성을 추가해줍니다.
    이것은 문서형 선언(DTD)과 비슷하게 html이 어떤 XML 언어에 속해있는지 식별하도록 하는데 사용됩니다.
  2. 빈태그 표기법 : empty elements (elements without closing tags)
    대부분의 태그는 '시작(열기)태그'와 '종료(닫기)태그'의 한짝으로 구성되어 있습니다.
    그렇지만 <br><img> 태그와 같이 짝이 없이 혼자 작동하는 태그들도 있습니다. 이런 짝없는 태그를 '빈요소(Empty Elements)' 라고 부르며 이런 빈요소 들을 표기할 때는 브라우저에게 "예는 짝이 없으니 종료태그를 찾느라고 수고할 필요가 없어!!" 라고 친절하게 알려주어야 합니다.
    마지막 ">" 앞에 슬래시를 넣어주면 됩니다.
    <br> 태그를 예로 들면 <br /> 라고 적어야 한다는 것이죠.
    <img> 태그는 <img src="dir/image.gif" alt="imgName" /> 이런식으로 적어 주셔야합니다.
    슬래시 앞에 공백을 하나 추가해주는 것이 좋은데 그것은 슬래시 앞에 공백없이는 "/>"를 인식하지 못하는 옛날 브라우저들을 위해서입니다. 하위 버젼과의 호환성을 위해서 슬래시 앞에 공백을 꼭 넣어주세요.
  3. 대체 텍스트 입력 : <img> 엘리먼트에는 반드시 alt 속성을 넣어줍니다.
    alt (alternate : 교체하다, 대리인) 속성은 이미지 파일이 없어졌을 때 대신 표시해줄 이름(text)를 적어 주는 것입니다. 이는 파일이 없어졌을 때 외에도 그림을 보지 못하는 시각장애인을 위한 브라우저 등에서도 그 이미지가 가진 의미를  이해하도록 돕는 역할을 합니다.
  4. 속성의 값들은 반드시 따옴표로 둘러싼다.
    틀림: <table rows=3>
    옳음: <table rows="3">

  5. 간소화된 속성의 사용 금지

    틀림: <textarea readonly>READ-ONLY</textarea>
    옳음: <textarea readonly="readonly">READ-ONLY</textarea>
    이 외에도 checked , nowrap 등과 같은 약식표기는 허용되지 않습니다.

  6. 태그이름과 속성은 반드시 소문자로 표기
    틀림: <BODY><P>The Best Page Ever</P></BODY>
    옳음: <body><p>The Best Page Ever</p></body>
  7. 모든 인라인 요소는 블록 요소에 둘러싸여야 한다.
    틀림: <body>Welcome to my page.</body>
    옳음: <body><p>Welcome to my page.</p></body>
    본문(body)에 직접 텍스트를 삽입할 수 없습니다. 반드시 <h1><p><table><div>태그와 같은 블록 요소로 감싸주어야합니다.
    * 블록 요소와 인라인 요소 에 관하여 모르시는 분은 다음 "DIV 레이아웃" 단원의 설명을 참조해주세요.

  8. name 속성은 폐기, id 속성만 사용

    'name' 속성은 엘리먼트에 이름을 주어 스타일쉬트나 스크립트에서 참조 할 수 있게 해 주었습니다.
    XHTML에서는 문서내의 엘리먼트에 유일한 이름을 부여하기 위해서 'id' 속성 만을 사용합니다.
    * 사실 name 속성은 그다지 많이 사용되는 편이 아니었을 것입니다. 별문제가 되지 안는 변경사항이죠.

 

위 8가지 목록은 모든 변경사항을 설명 한 것은 아니지만 쉽게 접하게될 주요 변경목록이라고 볼 수 있습니다. 그다지 많이 달라지지는 않았죠?
"/>"를 추가하고 "alt" 속성을 꼭 적어주라는 좀 귀찮아 진 규칙과, 기존 문법을 정확하게 지켜야 한다는 내용이 대부분 입니다. 그렇지 않으면 XHTML은 오류(Error)로 인식 할 것이라는 내용이죠.

 

기타 변경사항 참조 :

 

 

 

 

 

 

DIV 레이아웃#

많은 디자이너 분들께서 이제까지 웹디자인을 할 때 홈페이지의 큰 틀인 레이아웃을 만드는 작업을 할 때 <table>태그를 주로 이용해 오셨을 것입니다. 그러나 그것은 HTML 문법에 적합한 방식이 아니었습니다. <table>태그는 단지 "표"를 그리기 위해서 만들어졌기 때문입니다.

HTML문법에 적합하지 않게 작성된 문서는 웹표준에 벗어난다고 보시면 됩니다.

zbXE의 스킨제작을 공부하시기 위해서 대부분 "zbXE공식스킨"을 분석해 보는 것 부터 시작하실 텐데, 기존 <table>을 이용한 레이아웃 제작에만 익숙하셨던 분들은 새로운(?)방식에 적응하기 힘드셨을 것입니다.

 

이 단원에서는 그런 분들을 위해서 기본적이고 이론적인 내용들을 설명하고자 합니다.

 

 

 

블록 엘리먼트와 인라인 엘리먼트의 이해#

구조화된 내용들을 원하는 곳에 배치하려면 꼭 이해해야하는 부분입니다.

사전적 의미 :

  • Block = "덩어리, 토막, 한 벌, 한 묶음"
  • In Line = "그때마다 즉시 처리하는, 직렬의, 일렬로 늘어선"
  • Element = "요소, 성분, 구성요소, 원소, 분자"

 

HTML문서에서 본문(body)에 들어가는 모든 HTML태그는
크게 '블록 엘리먼트(block-level elements)'과 '인라인 엘리먼트(inline elements)' 로 구분할 수 있습니다.

 

블록 엘리먼트는 하나의 덩어리로 표현되는 요소를 말합니다.

인라인 엘리먼트는 그 덩어리 안에서 부분적으로 처리되는 요소들을 말합니다.

 

블록 엘리먼트와 인라인 엘리먼트를 쉽게 구분하는 방법이 있는데 '항상 앞과 뒤에 줄넘김(line break)을 하는 요소'는 모두 블록 엘리먼트 라고 보시면 됩니다.

 

예를 들면 <h1> 태그는 블록 엘리먼트 입니다.

<h1></h1>로 둘러싸인 제목은 줄넘김을 하기위해 <br /> 태그를 뒤에 붙이지 않아도 무조건 줄넘김을 합니다.

 

그리고, <p> 태그와 <br /> 태그의 용도가 비슷해 보인다고 생각해 오셨던 분도 계실 것입니다.

'정확한 문법'을 중요하게 생각하지 않았던 시절에는 줄넘김을 위해 <p>태그를 사용한 적도 있었으니까요. 하지만 이제는 <p>태그를 제대로 써야합니다. 시작태그 <p>와 종료태그 </p>를 반드시 함께 사용해 주어야하며 내용은 그 안에 들어가 줘야합니다. 이렇게 함으로서 하나의 묶음(문단)을 만들어 내는 것이고 그 묶음이 끝나는 지점에서 줄넘김이 생기는 것입니다.

즉, <p> 태그는 '블록 엘리먼트'이고 <br />태그는 '인라인 엘리먼트'입니다.

 

이렇게 <h1>,<p>,<br />태그로 만들어진 페이지의 구조를 그림으로 표현해 보겠습니다.

이와 같이 블록 엘리먼트는 덩어리 구조를 가지게 됩니다.

●예제 3 - <q>, <blockquote> 라는 태그를 비교해봅시다.

이 두 태그는 모두 "인용(quote)" 이라는 의미를 가지고 있습니다.

 

  1. <p>짬뽕이 <q>나는 짜장면보다 맛있어!</q>라고 말했습니다. <blockquote>짬뽕과 자장면은 중화요리의 쌍벽을 이룬다.</blockquote></p>

이런 코드는 아래와 같이 표시됩니다.

<q>태그로 둘러싼 텍스트는 FF(파이어폭스)2 에서 "" 로 둘러싸여 표현됩니다. MS IE(익스플로어)6 에서는 일반 텍스트와 똑같이 표시됩니다. 이것은 FF와 IE가 각각 나름 데로 가지는 기본 CSS의 차이 일 뿐 브라우저는 <q></q>로 둘러 싸인 부분이 인용문구 라는 의미는 똑같이 이해하고 있습니다. <blockquote>태그는 역시 "인용"이라는 의미를 가지지만 태그이름에서 추측할 수 있듯이 <blockquote></blockquote>로 둘러싸인 부분을 하나의 덩어리구조로 만들어 줍니다.

 

즉, <q>태그는 "인용"이라는 의미를 가지는 인라인 엘리먼트 이고,

<blockquote>태그는 "인용"이라는 의미를 가지는 블록 엘리먼트 입니다.

 

의미는 같지만 구조가 다른 쌍둥이 태그라고 볼 수 있습니다.

위 예제에서 블록 요소인 <blockquote>태그가 역시 블록 요소인 <p> 태그안에 포함되어 있는 것을 보실 수 있습니다. 여기에서 알수있는 한가지 사실은 "블록요소는 블록요소에 포함될 수 있다."는 것입니다. 이렇게 HTML 문서는 블록단위의 계층구조를 가질수 있습니다. 사실 문서의 '내용을 구성하는 모든 요소'는 이미 최상위 블록인 <body></body>에 포함되어 있습니다.

 

한가지 중요한 사실은 이러한 계층구조를 통하여 "하위블록들은 상위블록의 속성을 상속받는다."는 것입니다.

예를들어, <body> 태그에 font-size : 50px;  이라는 속성을 부여하면, font-size(글꼴크기)와 관련된 별도의 속성을 가지지 않은 블록의 텍스트들은 50px 이라는 어마어마한 크기의 속성을 상속받게 됩니다. 이러한 '속성' 및 '속성의 상속'에 관해서는 CSS를 공부하시면서 좀 더 자세하게 아실 필요가 있습니다.

 

블록 엘리먼트의 모양을 마음대로 바꾸기 위해서는 CSS의 박스모델(Box Model)을 필요로 합니다.

박스모델에 관한 자세한 설명은 CSS2 규격 한글 번역문 8.박스모델 (http://trio.co.kr/webrefer/css2/box.html) 을 참조하세요.

박스모델이 가지는 마진(margin:바깥여백), 패딩(padding:안여백), 테두리(border) 같은 기본적인 속성은 반드시 숙지하시기 바랍니다.

 

체계적인 DIV씨#

사전적 의미 :

  • Division = "분할, 구획, 배분, 구분, 경계선, 분류, (육군)사단, (학교)반, (회사)부 국 과 ..."

 

<div>태그는 여러가지 요소를 한데 묶어 하나의 그룹으로 만들어 주는 블록 엘리먼트 입니다.

 

위 그림을 보면 4가지 음식에 관하여 설명을 하는 페이지의 구조를 개념적으로 표현한 것입니다. 음식이름을 제목으로하고 그 다음에 음식에 관한 설명 문단이 나오는 구조가 4번 반복되고 있습니다. 똑같은 형태가 반복되어 내용이 한눈에 들어오지는 않습니다. 음식의 수가 많아지면 더 심하겠죠.

 

그런데 자세히 보면 크게 한식과 중식의 두가지로 분류가 가능하다는 것을 알 수 있습니다. 이런 논리적인 분류를 <div>태그를 이용해서 그룹으로 묶어 보겠습니다.

이런 식으로 묶어주니 큰 덩어리가 눈에 들어오면서 훨씬 이해하기 쉬워지겠죠.

DIV 태그는 공통된 부분을 필요에 따라 그룹으로 묶어 줌으로서 문서를 훨씬 구조적이고 체계적이며 논리적으로 정리해 줄 수 있는 중요한 도구입니다.

 

태그는 이렇게 작성됩니다.

  1. <div id="한식">

  2. <h1>김치볶음밥</h1>

  3. <p>김치볶음밥 자세한 설명</p>

  4. <h1>불고기</h1>

  5. <p>불고기 자세한 설명</p>

  6. </div>
  7. <div id="중식">

  8. <h1>짬뽕</h1>

  9. <p>짬뽕 자세한 설명</p>

    <h1>자장면</h1>

  10. <p>자장면 자세한 설명</p>

  11. </div>

id 속성은 해당 엘리먼트에 주어지는 고유한 이름으로 한 문서안에서 중복되어서는 안됩니다. CSS는 이 고유한 이름을 통해서 그 엘리먼트가 어떻게 표현될 것인지를 정확하게 지정해 줄 수 있게 됩니다.

 

질문있어요!!!

  1. 그룹을 지어주는 태그는 블록 엘리먼트인 DIV 밖에 없나요? 인라인 엘리먼트는요?
    있습니다. 인라인 엘리먼트인 <span></span> 이 있습니다. <span>태그는 문단 안에서 내용의 흐름을 방해하지 않으면서 부분적으로 특유의 속성을 지정하고싶을 때 사용하게 됩니다.

 

 

DIV 위치지정#

이제는 제대로 레이아웃을 잡아 보도록 하겠습니다.

 

DIV 블록을 원하는 위치로 보내기 위해서는 미리 알아 두셔야 할 속성들이 있습니다.
바로 margin(바깥여백), padding(안여백), float(유동) 이렇게 3가지 속성이 주로 사용되고, 추가로 position(위치) 속성이 사용될 때도 있습니다. 위에서 언급했던 "CSS의 박스모델" 에 관한 속성들과 "유동(float)"에 관한 속성들 입니다. 링크된 페이지들을 참조해서 공부해 주시고 어느정도는 아신다는 가정하에서 진행하도록 하겠습니다.

 

예제를 작성할 때 사용한 브라우저는 'Firefox 2'를 사용하였습니다.

최종적으로는 IE 또는 Safari , Opera 같은 다른 브라우저에서도 똑같이 잘 보여야 하겠지만 실습하시면서 혼선이 생길 까봐 미리 말씀을 드립니다. 모든 브라우저에서 동일한 디자인으로 표현되도록 하는 작업은 속성들을 바꿔가며 각각의 브라우저에서 계속적으로 테스트를 해보는 수 밖에 없습니다. (특히 IE6는 -.-;;; OTL)

 

 

자 그럼 시작해 보겠습니다.

아래 그림과 같은 블록단위 구조를 가진 페이지가 있습니다. 한번 살펴볼까요?

레이아웃은 이 블록단위의 덩어리들을 어떻게 배치할 것인가를 결정하는 것이라고 말할 수 있겠죠.

이 예제의 목표는 두번째 서브메뉴 블록을 좌측으로 배치시키는 2단 컬럼 레이아웃을 만드는 것입니다.

 

 

소스코드는 이렇습니다.

* 소스코드를 보기 편하게 하기 위해서 이 페이지의 좌우 넓이를 충분히 넓혀주시면 좋습니다.

* CSS코드의 {}안에서 공백은 무시하시면 됩니다. 보기 좋게 하기위해서 많이 띄웠을 뿐입니다.
* 단계별로 추가 및 수정된 부분에는 색깔을 넣어서 보시기 편하게 하겠습니다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xhtml</title>
  3. </head>
  4. <body>
  5. <div id="bodyWrap">
  6. <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
  7. <div id="columnLeft">
  8. 소개<br />인사말<br />연혁<br />오시는길
  9. </div>
  10. <div id="content">
  11. 안녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서  포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
  12. </div>
  13. <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
  14. </div>
  15. </body>
  16. </html>

 

대충 살펴보면, 빨간색으로 표시된 4개의 블록 엘리먼트가 있고 그 4개의 블록을 bodyWrap 이라는 블록이 감싸고 있습니다.

bodyWrap 블록이 하는 역할은 나중에 설명하도록 하겠습니다.

 

지금부터는 문서의 구조(body부분)는 손을 댈 필요가 없습니다.

표현을 담당하는 CSS만 수정하면 원하는 레이아웃으로 바꿀 수 있는 것입니다.

 

우선 브라우저로 확인해보죠.

아무런 스타일을 적용하지 않았기 때문에 블록단위를 눈으로 파악하기 힘들군요. 원활한 진행을 위해서 블록에 배경색을 넣어서 구분하기 쉽게 만들도록 하겠습니다.
HTML 문서의 <head> 와 </head> 사이에 아래와 같은 코드를 입력합니다.

  1. <style type="text/css">
    <!--
    #header {     background: #CCCCEE; }
    #columnLeft { background: #CCEECC; }
    #content {    background: #EECCCC; }
    #footer {     background: #CCCCEE; }
    -->
    </style>

* zbXE에서 스킨을 만드실 때는 스타일시트(CSS)를 HTML 파일에 직접 입력하지 않지만 편의상 직접입력하겠습니다.

소스코드를 보시면 CSS가 "#id이름 { 속성 }"과 같은 형식으로 특정블록을 지정할 수 있다는 것을 알 수 있습니다. 이 형식에서 앞에 붙어있는 "#id이름" 부분을 선택자(selector) 라고 부릅니다. 선택자에 관한 문법은 링크를 참조하세요.

 

자 이제 블록의 구조를 알아보기가 쉬워졌습니다.

 

내용과 브라우저 사이에 하얀 공백이 있는 것은 문서의 내용상 최상위 블록인 <body>블록이 가지는 margin 값 때문입니다.

CSS에 " body { margin: 0; } " 라는 코드를 한줄 추가해주면 없앨 수 있지만 그냥 가도록 하겠습니다.

 

자 이제 본격적으로 시작됩니다.

그림에서 보시는 바와같이 블록은 가로 크기가 100%를 기본으로 합니다. 그래서 브라우저의 좌,우 방향으로 꽉 차는 영역을 차지하게 됩니다. 이것은 역시 기본값이 가로100%인 <body>태그로 부터 상속받은 크기를 기준으로 100% 인 것입니다.

 

우리가 만드려는 사이트의 가로크기를 편의상 320px (픽셀)의 작은 크기로 정하겠습니다. 내용이 들어가있는 4개의 블록을 모두 감싸고있는 bodyWrap 블록에 가로크기 속성을 정해주도록 하겠습니다.

  1. #bodyWrap {   width: 320px; }
  2. #header {                   background: #CCCCEE; }
  3. #columnLeft {               background: #CCEECC; }
    #content {                  background: #EECCCC; }
    #footer {                   background: #CCCCEE; }

위와 같이 한줄을 추가해주면 이렇게 됩니다.

모든 내용의 가로크기가 320px 안에 들어갔습니다. 4개의 블록에는 width 값을 정해주지 않아도 상위블록인 bodyWrap 블록의 width 값을 상속받아 최대치가 320px이 된 것입니다. 최대치가 320px 로 정해졌다고 해서 이 영역을 절대 벗어나지 못하는 것은 아닙니다. 그렇지만 이번단원에서 그런 자세한 속성은 다루지 않겠습니다.

여기서 우리는 블록의 좌우정렬 기본값은 좌측정렬 이라는 것을 알 수 있습니다.

 

홈페이지를 브라우저의 가운데에 위치하도록 조절해 봅시다.

  1. #bodyWrap {  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                           background: #CCCCEE; }
  3. #columnLeft {                                       background: #CCEECC; }
    #content {                                          background: #EECCCC; }
    #footer {                                           background: #CCCCEE; }

margin 속성에 4개의 값이 들어가있습니다. 이것은 순서대로 Top(상), Right(우), Bottom(하), Left(좌)를 의미합니다. 순서는 위쪽방향을 기준으로 시계방향입니다. 이것을 풀어서 비교해보면 이렇게 됩니다.

 

  1. #bodyWrap { width: 320px;  margin: 0 auto 0 auto; }
  2. #bodyWrap { width: 320px;  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }

위 두 줄의 CSS 코드는 같은 의미입니다. 앞으로 짧은 약식표기를 사용하도록 하겠습니다.

그 의미는 좌,우의 바깥여백을 자동으로 맞추도록 한것입니다. 양쪽 다 자동(auto)이니까 같은 비율의 여백을 갖게 되는 것입니다.

 

결과를 볼까요?

 

이제는 columnLeft 블록의 가로크기를 80px 로 줄이겠습니다.

  1. #bodyWrap {   width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                            background: #CCCCEE; }
  3. #columnLeft { width: 80px;                           background: #CCEECC; }
    #content {                                           background: #EECCCC; }
    #footer {                                            background: #CCCCEE; }

columnLeft 블록은 이제는 bodyWrap으로 부터 상속받은 width 속성을 무시하고 자신만의 width 속성을 가졌습니다.

 

서브메뉴를 원하는 크기로 줄였지만 4개의 블록은 여전히 위에서 아래로 순서대로 늘어놓여있습니다. 블록 엘리먼트의 정렬 기본속성이 수직나열입니다. 우리가 해야할 것은 이 수직나열을 수평나열로 바꾸어 주는 것입니다. 마치 인라인 엘리먼트처럼 수평으로 싸여나가도록 만들어 줌으로서 columnLeft 블록과 content 블록 간의 위치를 조절할 것입니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                                           background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                           background: #CCEECC; }
    #content {                                                          background: #EECCCC; }
    #footer {                                                           background: #CCCCEE; }

columnLeft 블록이 좌측으로 유동(float) 되면서 수직정렬에서 벗어났습니다.

columnLeft 블록이 content 블록 위에 떠있다고 보시는게 이해하시기 편할 것입니다.

content 블록은 여전히 가로 320px의 너비를 가지고 수직정렬 되고 있지만 그 내용은 columnLeft 블록을 피해서 흘러갑니다.

 

여기서 한가지 실험을 해보고 넘어가겠습니다.

columnLeft 블록의 내용이 많아서 세로길이가 길어지면 어떻게 되는지 봅시다.

  1. #columnLeft {  float: left;  width: 80px; height: 180px;        background: #CCEECC; }

columnLeft 블록이 content 블록뿐 아니라 footer 블록까지도 영향을 미치는 군요.

이것은 float 되는 블록이 자기자신 이후에 오는 정상흐름(수직정렬)중인 모든 블록에 영향을 준다는 뜻이됩니다.

이런 현상을 방지하기 위해서 footer 블록의 CSS를 다음과 같이 고치도록 하겠습니다.

  1. #footer {         clear: both;                                     background: #CCCCEE; }

clear 속성은 해당 블록이 유동(float)블록을 허용할 것인지 결정해주는 속성입니다. 들어 갈 수있는 값은 none(기본값), right, left, both, inherit(상속받은값) 입니다. both를 값으로 주었기 때문에 footer 블록은 좌우모든 방향에서 자신위에 다른 블록이 떠있는 것을 허용하지 않습니다.

 

columnLeft 블록의 세로길이를 원래대로 돌려놓겠습니다.

 

다음으로 할 것은 content 블록 이 columnLeft 블록과 겹치지 않도록 만들어 주는 것입니다.

 

방법은 두가지 이상 존재합니다.

  1. content 블록도 columnLeft 블록처럼 float (좌측) 시키고 너비를 240px (320px-80px) 로 정해준다.
    #content {    float: left;     width: 240px;    background:#EECCCC; }
  2. content 블록도 columnLeft 블록처럼 float (우측) 시키고 너비를 240px (320px-80px) 로 정해준다.
    #content {    float: right;   width: 240px;    background:#EECCCC; }
  3. content 블록에 왼쪽 margin 속성을 주어서 80px 만큼 떨어지게 만든다.

이런 여러가지 방법중에 서 어느것을 선택할 지는 여러가지 브라우저의 특성에 따라 다르게 보이는 경우가 없는지 실험해가면서 제대로 보이는 쪽을 선택하면 됩니다. 테스트 해보니 2번째 방법은 IE에서 약간 다르게 보이는군요.

3번째 방법으로 진행하겠습니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto; }
  2. #header {                                                           background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                           background: #CCEECC; }
    #content {                                   margin: 0 0 0 80px;    background: #EECCCC; }
    #footer {      clear: both;                                         background: #CCCCEE; }

자~ '중간정렬 2단(컬럼) 레이아웃'이 완성되었습니다.

 

한가지만 더 손을 볼까요?

columnLeft 블록 아래쪽에 보이는 하얀색 영역은 <body>태그의 기본색을 보여주고 있습니다. 좀 어색하군요. 이 영역은 content 블록에 속해있습니다. 정확하게 말하면 content 블록의 margin 영역이죠. 그리고 투명하기 때문에 <body>의 색깔이 보이고 있습니다.

이 곳에 columnLeft 블록과 같은색이 들어가있으면 좋겠습니다.

그런데 margin 영역은 색상속성을 가질 수 없기 때문에 모든 내용블록을 둘러 싸고있는 bodyWrap 블록에 배경색을 넣어주면 되겠습니다.

  1. #bodyWrap {                  width: 320px;   margin: 0 auto 0 auto;  background: #CCEECC; }
  2. #header {                                                            background: #CCCCEE; }
  3. #columnLeft {  float: left;  width: 80px;                            background: #CCEECC; }
    #content {                                   margin: 0 0 0 80px;     background: #EECCCC; }
    #footer {      clear: both;                                          background: #CCCCEE; }

음... 근데 또 고민이 생겼습니다.

좌측단보다 우측단이 내용이 적어서 세로길이가 짧아지면 content 블록 아래쪽에 #CCEECC이런 색상이 보이게 되겠군요. 해결책은 배경색이 아니라 배경이미지를 사용하는 것입니다. 좌측 80px은 #CCEECC색을가지고 우측 240px은 #EECCCC색을 가지는 높이 1px짜리 이미지를 배경으로 만들어 background:url(./bg.gif) repeat-y left top; 이렇게 넣어 주는 것이 더 좋겠습니다.

 

추가로 '3단(컬럼) 레이아웃' 을 만들어 볼까요?

아래 코드를 눈으로 한번 분석해보시기 바랍니다.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>xhtml</title>
  5. <style type="text/css">
  6. <!--
    #bodyWrap {                   width:320px;   margin: 0 auto 0 auto;   background: url(./bg.gif) repeat-y left top; }
    #header {                                                             background: #CCCCCC; }
    #columnLeft {  float: left;   width: 80px;                            background: #CCEECC; }
    #columnRight { float: right;  width: 80px;                            background: #CCCCEE; }
    #content {                                    margin: 0 80px 0 80px;  background: #EECCCC; }
    #footer {      clear: both;                                           background: #CCCCCC; }
    -->
  7. </style>
  8. </head>
    <body>
    <div id="bodyWrap">
  9. <div id="header">[로고] 홈 | 회사소개 | 제품소개 | 짬뽕정보</div>
  10. <div id="columnLeft">
  11. 소개<br />인사말<br />연혁<br />오시는길
  12. </div>
  13. <div id="columnRight">
  14. 추천제품 :<br />고추짬뽕<br />삼선짬뽕<br />해물짬뽕
  15. </div>
  16. <div id="content">
  17. 안녕하십니까?<br />짬뽕주식회사입니다.<br />짬뽕주식회사는 최고의 짬뽕을 만들기 위해 50년간 한우물을 파다가 기름이 나와서 기름장사를 하려다가 기름이 하루만에 바닦나서  포기하고 어제부터 다시 짬뽕을 만들기 시작한 굴지의 중화요리 전문 기업입니다.
  18. </div>
  19. <div id="footer">저작권은 (주)짬뽕에 있는거 같아요.</div>
  20. </div>
  21. </body>
  22. </html>

 

이 단원을 통해 설명한 방법이 전부는 아니지만 DIV 블록 엘리먼트를 통한 레이아웃을 잡는 방법에 관하여 이해하시는데 도움이 되셨길 바라면서 마치겠습니다.

 

 

 

zbXE 공식사이트 레이아웃 분석#

이제는 zbXE에 기본적으로 포함되어 있는 "zbXE 공식사이트 레이아웃 ver 0.1" 의 구조를 한번 살펴봅니다.

 

  1. <div id="bodyWrap">
        <div id="header">
            ~상단 내용~
        </div>
        <div id="contentBody">
            <div id="columnLeft">
                ~좌측 내용~
            </div>
            <div id="columnRight">
                ~콘텐츠 영역~
            </div>
        </div>
        <div id="footer">
            ~하단 내용~
        </div>
    </div>

앞의 단원들을 이해하셨 다면 이정도 문서는 구조가 한눈에 쏙~ 들어오시겠죠?

웬만한 사이트는 척보면 구조가 훤히 보이시나요? 매트릭스는 어디에나 존제합니다. 빨간약을... 쿨럭~. (-.-;;)

 

(이 단원은 작성중입니다.)

 

 

 

 

 

 

XHTML 유효성 검사도구#

XHTML 유효성이란 작성된 문서가 XHTML 문법에 적합한가에 관한 판단입니다.

 

아래 사이트들은 여러분이 작성한 문서가 얼마나 규격에 맞게 만들어졌는지 판단하는데 도움을 줄 것입니다.

 

XHTML 유효성 검사 도구 : http://validator.w3.org/

KLDP의 한글화된 CSS 유효성 검사 서비스 : http://css-validator.kldp.org/

 

에러가 하나도 없는 완벽한 XHTML 문서작성에 도전해 보세요. !!! 아자 !!!

 

(이 단원은 작성중입니다.)

 

기타 :

브라우저의 쿼크모드 (Quirks Mode : 변덕모드)

모든 브라우저는 웹표준을 준수하지 않는 페이지를 해석할 때에도 나름대로의 방법으로 가능한 제대로 보여주기 위해서 최선을 다하는데 이것을 쿼크모드 라고 합니다. 여기에서 "나름대로의 방식"이 브라우저마다 다르기 때문에 브라우저 마다 다르게 보이는 것입니다.

http://naradesign.net/wp/2007/03/27/118/

http://www.quirksmode.org/css/quirksmode.html

 

 


 

SengHyun's log :: 네이버 블로그
이 글은 캡쳐화면이 내 블로그에 자동저장되는 캡쳐업로더로 작성된 문서입니다. 자세히
저작자표시 비영리 변경금지

'각종 Tip' 카테고리의 다른 글

변리사 시험을 준비하시려는 분들께  (0) 2009.09.23
영화파일 화질의 종류에 대해서...  (0) 2009.08.10
책 가격비교 사이트  (0) 2009.06.07
[스크랩] 기본태그 Html 소스 사용법  (0) 2009.06.05
변리사  (0) 2009.06.03

'각종 Tip' Related Articles

티스토리툴바