Home » 웹 표준 -2. XHTML과 CSS

웹 표준 -2. XHTML과 CSS

2.1. XHTML(Extensible hypertext Markup Language)

  • XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 마크 업 언어로, HTML보다 엄격한 문법을 가진다.
  • HTML이 SGML의 응용인 데 반해, 매우 유연한 마크 업 언어인 XHTML은 SGML의 제한된 부분집합인 XML의 응용이다.
  • XHTML 문서는 하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다.

  • HTML 4.01의 후속 버전으로 HTML 5가 개발 되었다.

  • 좀 더 엄격한 버전의 HTML의 필요를 느끼게 된 가장 큰 이유는 웹 컨텐츠가 기존의 전통 컴퓨터에서 벗어나 여러 가지 장치(이동기기 등)에서 이용되기 시작하면서, 부정확한 HTML을 지원하는 데 필요한 자원이 부족한 환경이 생겨났기 때문이다.
  • 문서가 검사될 수 있도록 문서 형 정의(DTD)를 사용해 XHTML 문서를 규정한다.

참고. SGML
SGML(Standard Generalized Markup Language)은 문서용 마크 업 언어를 정의하기 위한 메타 언어이다. IBM에서 1960년대에 개발한 GML(Generalized Markup Language)의 후속이며, ISO 표준이다.

XHTML의 포맷

[week1/xhtml.html]

번호 설명
(1) 은 현재의 문서가 어떤 형식에 맞추어 제작되었는지를 설명.
예제에서는 문서를 XHTML1.0을 따르고 Strict 방식에 따라 영문으로 제작되었다는 것과 http://www.w3.org/TR/xhtml/DTD/xhtml-Strict.dtd라는 DTD정의를 참조한다는 것을 알려준다.
또한 ie같은 경우 버전 별로 호환이 안 되는 경우가 발생하므로 경우에 따라 doctype을 구분해 주어야 정상 작동하는 경우도 있다.
(2) 언어 선언. 이 문서가 어느 나라 말인지 설정
(3) 텍스트로 된 html이고 인코딩은 utf-8이라는 의미

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week1메뉴 -> XHTML

2.2. CSS(Cascading Style Sheets)

  • 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.

  • HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

  • 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄 간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지 / 보수도 간편하게 할 수 있다.

CSS 적용방법

[week1/css.html]

[css language=”/csstest.css”][/css]

번호 설명
(1) 현재 문서 외부의 css 문서를 가져와 적용
(2) 문서 내부에 css 작성할 경우 사용방법
(3) css의 body로 되어 있는 부분이 적용 된다
(4) css의 .test1으로 되어 있는 부분이 적용 된다
(5) css의 #test2로 되어 있는 부분이 적용 된다
(6) body 태그 안의 내용들에 대하여 스타일 적용
(7) 태그 속성 중 class에 .test1으로 된 내용에 대하여 스타일 적용
(8) 태그 속성 중 id에 test2로 된 내용에 대하여 스타일 적용

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week1메뉴 -> CSS


그림 2. CSS 적용