XHTML과 CSS를 이용한 올바른 웹 페이지를 만드는 방법을 설명한 웹 표준의 역사와 배경, 웹 기술의 표준화단체, 디자인방법과 웹 사이트를 장식하는 콘텐츠와 전환방법 등을 담아 웹 표준의 원리와 원칙을 정리하였다.

웹표준이 대세
웹표준이 일반 대중에게 알려진 것은 2005년 6월 코리아 인터넷 닷컴에서 진행한 CSS 세미나부터일 것이다. 그뒤 2년 동안 변화가 많았다. 한국 웹 표준화프로젝트 (http:// webstandards.or.kr/), CSS 디자인 코리아 (http://standardmag.org), 한국 웹 접근성
(그룹(http://kwag.net) 등 관련 커뮤니티들이 생겼고,‘ 웹표준의 날’같은 행사도 진행되고
다양한 웹표준 관련 세미나가 열렸다. 또한 팀인터페이스의 UI아카데미에서 웹표준과 웹접근성 교육을 정기적으로 진행하고 있다

웹표준은 웹의 근간
웹표준이 처음 알려질 때만 해도, 많이 사용되는 것이 표준이고 W3C의 표준을 따라갈 필요는 없다거나, 수지타산 이 맞지 않는 투자는 필요 없다거나, 과연 웹표준이 도움이
필요한지 의문이 많았다. 하지만 웹표준에 관한 관심 은 엄청나게 늘어 웹표준을 부정
적으로 또는 옵션으로 바라보는 사람은 거의 찾아볼 수 없게 되었다. 이제는 대규모
포털 업체나 대기업들이 앞장서서 웹표준을 연구하고 적용하고 있다. 웹사이트를 가장 많이 만들지만 별다른 관심이 나 개선점이 보이지 않던 웹에이전시 업계에서도 웹표준을 새롭게
인식하려는 움직임을 보인다. 이제 웹표준은 웹을 올바르게 만드는 데 가장 기본인 근간
기술임에 모든 사람이 동의한다.

실제로 도움이 되도록
이제 인식을 퍼뜨리는 단계는 지났고 다음 단계를 준비할 때이다. 이 순간에도 초기 웹표준 멤버들은 같은 고민을 한다. 현재 가장 필요한 다음 단계는 웹표준이 우리에게 보여준
많은 장점을 믿고 적용하려는 웹사이트 제작자들이 느낄 수 있게 하는 일이다. 그러려면
웹표준 입문서나 기초 교육이 아닌 실제로 도움이 되는 게 필요하다. 한국 소프트웨어
진흥원 도움으로 실전 웹표준 가이드도 나왔고, 더블트랙의 박수만이 번역한 웹표준 관련 서적이 세 권 있고, 웹표준을 적극적으로 도입하여 가능성을 보인 미투데이(http://me2day.
Net) 같은 서비스도 있다. 하지만 웹표준을 처음 접하는 사람이 참고할 책이나 사이트가 부족한 게 현실이다

전문가조차 들춰보게 할 만큼 상세하게 다룸
이렇게 부족함을 공감하던 사람들에게『웹표준 교과서』는 가뭄에 내리는 단비처럼 갈증을 해소할 수 있을 것이다. 기존 번역서들은 친절하고 상세하지만 웹표준의 전체적 규모를
알게 하는 데에는 부족했다.『 웹표준 교과서』는 웹표준에 관해 많이 안다고 자부하던
전문가조차 자료를 다시 들춰보게 할 만큼 상세하다. 다루는 내용도 역사적 관점, 마크업
스타일, 웹 기능, 크로스 브라우징, 웹 접근성, 검색엔진 최적화 등 굉장히 넓다. 기초적 내용부터 전문적 내용까지 모든 내용을 다룬다. 교과서로 삼을만하고 웹을 만들 때 옆에
보는 조언자 구실을 훌륭하게 할 책이다.

제1장 소개-웹표준은 무엇인가
1. 누가 웹표준을 정하는가
2. 인프라와 트렌드에서 생각하는 웹표준
3. 웹표준의 장점
4. 구조언어와 표현언어
5. 그 밖의 언어와 가이드라인

제2장 문서구조-XHTML 웹페이지 구축 시작
1. 웹 구조 이해
2. XHTML의 전체 모양과 서식
3. XML선언, 문서형 선언, 네임 스페이스와 언어코드
4. 타이틀, 문자코드세트, 설명문과 키워드
5. 검색로봇 제어, 그 밖의 메타데이터, 내비게이션 링크
6. 제목, 문단, 작성자 정보, 구분선
7. 인용문, 정형화된 텍스트
8. 항목 목록과 번호 목록, 정의형 목록, 표
9. 링크, 이미지
10. 텍스트를 정의하기 위한 인라인 요소
11. 그룹화 요소, 주석 삽입, 문자참조

제3장 시각표현-CSS 웹페이지를 자유롭게 디자인하기
1. CSS의 역할
2. CSS의 서식
3. CSS 적용방법과 우선순위
4. 선택자와 가상 클래스·가상 요소
5. 박스모델
6. 시각정형모델
7. 시각효과
8. 문자색과 배경
9. 글꼴
10. 텍스트
11. 표
12. 생성내용
13. 목록
14. 사용자 인터페이스
15. @규칙과 미디어 컨트롤

제4장 상호작용-웹 사이트를 장식하는 다양한 콘텐츠
1. 폼 설치
2. 스크립트 삽입
3. 이미지맵 삽입
4. 인라인 프레임 삽입
5. Java애플릿 삽입
6. 오브젝트 삽입
7. 프레임 설정

제5장 리디자인-웹표준으로 매끄러운 전환
1. HTML4.01, XHTML1.0, XHTML1.1의 차이
2. HTML에서 XHTML으로 전환하는 방법
3. XHTML1.1 폐지 요소 대체
4. XHTML1.1 폐지 속성 대체
5. XHTML1.1 추가 요소 해설

제6장 크로스 브라우저 레이아웃-브라우저를 차별하지 않는 레이아웃 기법
1. 브라우저의 구현과 호환성
2. 문서형식 전환과 표현방식
3. CSS핵
4. 외부 스타일시트 만들기
5. 레이아웃 기법(1)－문서본체
6. 레이아웃 기법(2)－내비게이션
7. 레이아웃 기법(3)－링크
8. 레이아웃 기법(4)－텍스트
9. 레이아웃 기법(5)－제목글
10. 레이아웃 기법(6)－인용문
11. 레이아웃 기법(7)－목록
12. 레이아웃 기법(8)－테이블
13. 레이아웃 기법(9)－폼
14. 레이아웃 기법(10)－이미지 대체 기법
15. 레이아웃 기법(11)－다단 레이아웃
16. 레이아웃 기법(12)－인쇄용 스타일

제7장 접근성－다양한 사용자를 배려하는 설계
1. 접근성이란
2. W3C의 대처: WAI
3. 웹 콘텐츠 접근성 지침 1.0(WCAG1.0)
4. 미국 재활법 508조(Section 508)

제8장 메타데이터－효율적인 정보 수집을 지원하는 웹 기술
1. 메타데이터와 시맨틱 웹
2. RSS로 하는 효율 정보 전달
3. FOAF로 하는 인물 프로파일 제공

해외 선진국에서는 국내보다 강화된 기준의 법률 제정으로 웹 접근성을 보장하고 있다.

현재 웹 접근성 준수에 관한 내용을 법률로 규정하고 있는 국가는 25개국 정도로 파악된다. 이 가운데 17개국에서는 웹 접근성이 법률로 의무화돼 있다.

대부분의 국가가 W3C(World Wide Web Consortium)가 책정한 웹 문서 접근성 지침(WCAG:Web Content Accessibility Guidelines)1.0과 접근성 관련 최초의 법안인 미국 재활법을 참조해 독자적으로 현지화한 제도를 적용 중이다.

미국은 세계 최초로 웹 접근성에 관한 법률을 제정했다. 1996년 미국 장애인 관련법(ADA)의 실현정책으로 ‘웹 페이지 접근 장애 방지를 위한 디자인 표준’을 제정했다.

특히 1998년에는 ‘재활법 508조’를 규정해 관공서나 공공기관이 운용하는 홈페이지가 웹 접근성을 준수하도록 했다. 이어 지난 2000년 12월에는 웹 접근성 지침 1194.22를 제정, 2001년부터 이를 의무적으로 준수하도록 강제화했다.

영국은 1995년 제정된 ‘장애인 차별 금지법’에서 고용, 상품, 시설, 서비스 제공, 교육, 교통수단 등의 장애인 차별금지를 포괄적으로 규정하고 있다. 서비스 제공자가 장애인에게 일반인에게 제공하는 서비스의 제공을 거절하는 것, 장애인에게 제공하는 서비스의 수준이나 방식을 일반인과 달리하는 것 등을 불법으로 간주하고 있다. 또 2004년 10월부터는 모든 사업장이 웹 접근성 지침을 의무적으로 준수하도록 강제화했다.

일본은 장애인기본법이 제정되기 전에 정보 접근성에 대한 지침들을 제정하고 이를 강제화했다. 일본은 1999년 5월 정보통신 접근성 패널(TAP)에서 W3C의 WCAG 일부 규정을 수용하고, 이를 기초로 정보통신 및 우정국, 보건복지부 관계자들로 구성된 웹 접근성 전문위원회를 구성해 접근성 가이드라인을 발표했다.

호주는 1992년 ‘장애인 차별 금지법’을 제정해 장애인도 일반인과 동등하게 취업, 교육, 상품, 서비스, 편의시설 등을 이용할 수 있도록 명시했다. 2003년 인권동등기회보장위원회에서 W3C의 WCAG를 표준으로 장애인을 위한 전자상거래 새로운 정보기술 및 웹 접근성 향상을 위한 권고안을 작성했다.　 윤대원기자 yun1972@etnews.co.kr

웹 접근성 동향 보고서(4월7일)

드디어 내일이면 4월11일, 장차법 적용이 1단계 적용이 되는 일자이다.
많은 뉴스와 홍보활동이 이루어지고 있는 중에, 아직은 완벽한 대처가 부족한 상태에서 조마조마한 심정이 들기까지 하고 있다.

지난 4월7일 카도에서 주관하고 행정안전부에서 주최한 "웹 접근성 기술동향 및 향상방안 세미나"에 참석하였다.
연일 제안서와 PT등으로 바쁜 일상중에 다녀왔지만, 나름 웹 접근성 분야의 분위기를 느끼고 현재 우리나라의 웹 접근성 수준을 파악할 수 있는 의미있는 자리였다.

10:00~10:40 기조강연 (LG CNS 고현진 부사장)
웹의 창시자 팀버너스-리의 "The power of the web is in its universality. Access by everyone regardless of disability is
an essential aspect."말을 시작으로 한, 고현진 부사장의 기조연설은 웹 접근성과 웹표준으로 인한 기대효과를 전파하였다.

10:40~10:45 개회사(한국정보문화진흥원 손연기 원장)

10:45~10:50 축 사(행정안전부 박성일 정보화기획관)

10:50~11:10 웹 접근성 현황 및 정책방향(행정안전부 홍영우 사무관)
장애인의 인터넷 이용률은 52%에 달하며, 전체 국민 77%와는 많은 격차가 발생하고 있고, 이러한 차이를 감소시키고자 노력하고 있으며, 공공기관의 경우, 개선이 매년 향상 중앙행정기관은 90%, 입법사법기관은 89%, 광역지자체91%이나 기초지방자치단체와 전자정부의 경우에는 각각 83%, 80로 다소 미흡한 실정이며, 1단계인 올해는 정부기관과 종합병원이 의무 발효가 된다.
 

                                                                      (단계별 적용 범위)

11:10~11:50 웹2.0시대와 웹 접근성(IT문화원 김중태 원장)
김중태 IT문화원 원장은 장차법의 과도한 강조가 역차별이라는 일부의 반대 시선에 대해, 누구에게나 생길 수 있는 일이라며,
필요성과 당연성을 강조하였으며, 현재 논의되는 웹 접근성은 비용의 문제가 아닌 철학의 관점에서 접근하여야 한다라고 주장하였다.
아울러, 액티브엑스와 플래시의 차이는 다음과 같다.
거부권: 플래시는 거부권이 있으나 액티브엑스는 거부권이 없다.(이 문제는 도구의 문제가 아닌 철학의 문제)
사용권: 플래시는 다른 운영체제에서도 설치할 수 있지만 액티브엑스는 설치할 수 없다.

11:50~12:20 웹 접근성 표준 동향(한국정보문화진흥원 현준호 부팀장)
한국정보문화진흥원의 현부팀장은 금번 제시된 WCAG2.0의 변경배경을 유연성 및 검증가능성 제고에 있다고 W3C의 근거를 바탕으로 제기하였으며, 크게 4 영역에 관한 주요 강조사항을 아래와 같이 필역하였다.


우리나라의 웹 접근성 표준화 현황은 웹 콘텐츠 접근성, 접근성을 고려한 웹 저작도구, 또 사용자 에이전트로 크게 나뉘어서
해당 부분으로 발전되고 있으며, 웹 접근성 기반 조성을 위해 표준, 교육, 실태조사, 품질마트 등에 중점을 두고 있다.

12:20~12:40 웹 접근성 구축 성공사례(경상남도 고성군)
고성군은 웹 접근성 품질마크 인증을 높은 점수로 획득하였으며, 자세한 결과치는 다음과 같다.
해당 개선 프로젝트에서 특히, 인식의 용이성 부문에서는 영상매체인식을 위해 동영상 콘텐츠에 음성내용과 동일한 대본을 제공하였으며, 페이지의 논리적 구성을 위해, CSS제거시에도 콘텐츠의 구성순서가 논리적으로 배치되도록 선형화 하였으며,
페이지의 효율적인 이동을 위해 스킵 내비게이션 링크를 제공하여, 이해의 용이성을 확보하였고, 노스크립트 태그로 전체열기/닫기 기능을 차선책을 선택하여 제공하였음.
플렉스는 아직 접근성과 관련하여 제한적인 면이 많이 발생하며, 플래시는 논리 적용에만 신경쓰며, 자유로이 구현가능하다.
플렉스의 경우, 화면 낭독 프로그램의 지원이 미흡하나, 자바스크립트와 플래시는 부분적으로 사용할 수 있는 상황이다.

13:50~14:25 접근성 있는 RIA 제작기법(충북대학교 김석일 교수)
RIA(Rich Internet Application)란 전통적인 테스크톱 애플리케이션의 기능과 특징을 웹 애플리케이션으로 웹콘텐츠와 S/W와 중간적인 형태로 볼 수 있으며, 웹 프로토콜을 통하여 제공되는 콘텐츠 사용자 에이전트 소프트웨어임.
RIA의 웹 접근성은 보조기술이 서비스하지 못하는 사항에 많은 영향을 받고 있으며, 대체 기능 차선책 마련에 노력하여야 함.

14:25~15:00 접근성을 해치지 않는 자바스크립트 활용(오페라소프트웨어코리아 신현석 과장)
자바스크립트를 둘러싼 오해가 상당부분 존재하고 있는데, 자바스크립트를 사용하지 말라는 극단적인 이야기도 있다
적절한 자바스크립트의 활용이요구되어지며, GET이 POST 비해 보완이 약한 것이 아니며, 용도에 맞게 사용하는 것이 필요하고, URL 변수명이 나오게 하면 보안에 문제가 있다라는 것은 너무 초보적인 질문임. 최신 보안지침을 지속적으로 적용하는 것이 필요함.
접근성 개발 방법론 사상 중, 적절한 저하 (Graceful Degradation), 점진적 향상(Progressive Enhancement), 겸손한 구현(Unobtrusive Javascript)이며, 적절한 HTML이 우선시 되며 올바른 자바스크립트 활용이 뒤따라야 된다.

15:15~15:50 웹 기획자가 알아야할 웹 접근성(오픈컴 나인환 과장)

15:50~16:25 웹 디자이너가 알아야할 웹 접근성(잡코리아 장성민 대리)
소통이라는 개념으로 시작되는 웹접근성은 웹, 콘텐츠와 이용자(장애인에 대한)에게 해당 내용을 소통시키여야 한다.
디자이너는 이러한 관점에서 마크업과 웹퍼블리셔이라 불리우는 직군을 났게 되었다.
과거 5년전만해도 작은 기업의 경우, 웹디자이너군에서 비주얼디자인, 플래시, 코딩까지 모두 수행하는 경우가 많았으며,
그 후, 코더라는 직군이 조용히 생겨났고, 표준화라는 수행과정이 퍼블리셔를 등장하게 하는 기폭점이 되었고,
단순 코딩이라는 수준을 넘어 UI 범위를 책임지는 개념으로 변환되고 있으며, 접근성이라는 흐름에 들어서는 전문가 수준으로
여기지고 있다. 다만 아래에도 제기되는 사항이지만, 표준화와 접근성은 기본적으로 누구나 체득하는 기본기술이 되어져야
보다 인터넷이 보편성을 가질 수 있게 될 것이다.

16:25~17:00 웹 개발자가 알아야할 웹 접근성(티맥스소프트 추지호 전임연구원)
웹 접근성을 위한 웹 개발자 3가지 수칙 해당 섹션은 이곳이 잘 정리되어져 있으니 참고하기 바람.

관련자료는
웹 개발자가 알아야할 웹 접근성 :
웹 디자이너가 알아야할 웹 접근성
웹 기획자가 알아야할 웹 접근성
자바스크립트 활용
접근성있는 RIA 제작기법
웹 접근성 구축사례
웹 접근성 표준동향
웹2.0시대와 웹 접근성
웹 접근성 현황 및 정책방향
기조강연
타이트한 느낌이지만 모든 연사분들이 열심히 준비하여 내실성을 기했다.
특히, 스킬적인 부분에 관해서보다는 개념등 사상을 전달하고자 모든 분들이 노력하시는 모습이 역력했다.
스킬이야 온라인상의 자료로 충분하다는 판단에서 사상을 전파하고자 이해시키려는 의도였으며,
실제로, 이러한 방향은 늦었지만 매우 유효한 세미나라는 평가를 할 수 있었다.

다만, 아쉬움으로 계속 남는 것은 부단한 노력으로 최후에는 그러한 산출물이 나올 것으로 기대합니다만,

-웹 접근성 수행 전략(웹 접근성 방법론 정립)
 
-웹 접근성 기반 기술화 방안
  웹표준화와 마찬가지로 웹 접근성도 웹개발자(웹디자이너 포함)이라면 기본 소양 기술이 되어져 기반기술화가 되어져야
  한다. HTML이나 CSS처럼 기본 기술이 되어져 별도로 작업을 하지 않아도 되는 토양이 되어져야 이중 낭비가 되어지지 않게
  되어진다.
  * 민간개발자 웹 접근성 전문교육 과정
    1.대상 : 웹기획자, 웹디자이너, 웹프로그래머 등
    2.기간 : 2009년 4월 27일 - 7월 31일 등 총12차 운영
    3.시간 : 3일21시간 / 10:00-18:00 (7시간)
    4.장소 : 서울/광주/대전/부산
    5.신청방법 : 온라인 http://www.kpit.or.kr
    6.문의 : 한국생산성본부 02-724-1224

-보다 원활한 신기술 적용 및 세부 기술 습득을 위한 집단지성시스템(예, 위키피디아) 마련

-기타 (대응책 수립 절실)
 웹 접근성 평가툴의 난립
 다수 품질마크 인증기관 등장

블록레벨 엘리먼트와 인라인 엘리먼트

이번 호는 [http://www.w3.org/TR/html401/struct/global.html]을 살펴보면서 BODY 엘리먼트 안에 바로 작성하는 Block-level Elements(블록 레벨 요소)와 Block-level Elements(블록 레벨 요소) 안에 포함되어 사용되는 Inline Elements(인라인 요소)에 대하여 알아보고 올바른 마크업을 하는 방법에 대해서 배워보기로 하자.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

BODY 엘리먼트 안에 마크업하는 엘리먼트들은 블록 레벨 엘리먼트와 인라인 엘리먼트의 두 종류에 속한다. 기존의 테이블 레이아웃 방식에서는 엘리먼트의 이러한 특성을 알 필요가 없었지만, 의미를 살린 마크업을 하게 되면 엘리먼트의 구조적, 디스플레이적 특징을 이해해야 올바른 마크업이 가능하다.

브라우저에 엘리먼트가 디스플레이 될 때 블록처럼 층으로 쌓이게 되면 블록 레벨 엘리먼트이고, 마크업한 엘리먼트가 브라우저에 디스플레이 될 때 가로로 일렬로 늘어서게 되면 인라인 엘리먼트라고 생각하면 구분하기가 쉽다. 이것은 물론 브라우저에 보이는 것만을 가지고 구분하는 것이고 엘리먼트를 그렇게 만든 이유를 이해해야만 올바른 마크업을 할 수 있다.

[그림1. 7 HTML 도큐먼트의 전체적인 구조를 설명하는 http://www.w3.org/TR/html401/struct/global.html 화면]

그림1의 도큐먼트에서 5.The document body 아래 3.Block-level and inline elements를 클릭하면 [http://www.w3.org/TR/html401/struct/global.html#h-7.5.3]에서 [7.5.3 Block-level and inline elements] 내용을 확인할 수 있다.

01. Block-level Elements(블록 레벨 요소)

블록 레벨 요소는 ‘덩어리’라는 의미의 Block(블록)을 만드는 레벨 요소로 H1~H6, P, ,DIV, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등의 엘리먼트가 있다. 물론 더 많은 엘리먼트가 여기에 속하지만 아래에 소개하는 방법으로 여러분 스스로 쉽게 판단할 수 있다. 일반적으로 블록 레벨 엘리먼트는 인라인 엘리먼트들과 다른 블록 레벨 엘리먼트를 포함 할 수 있다. 그러나 인라인 엘리먼트는 일반적으로 텍스트와 다른 인라인 엘리먼트들만 포함할 수 있다. 이 구조적 차이는 블록 엘리먼트가 인라인 엘리먼트 보다 더 큰 구조를 만들어 사용할 수 있도록 하고 있다.

처음 사용해 보는 엘리먼트라도 브라우저에 디스플레이해 보고 블록 레벨 엘리먼트인지 인라인 엘리먼트인지 판단하여 사용하면 된다. 인용문일 때 사용하는 BLOCKQUOTE 엘리먼트가 어디에 속하는지 궁금하다면, 다음의 소스와 같이 작성하여 브라우저에서 층으로 쌓이게 되면 블록 레벨 엘리먼트라고 판단하면 된다.

<body> <blockquote>인용문입니다1</blockquote> <blockquote>인용문입니다2</blockquote> </body>

[그림2. blockquote 엘리먼트 적용화면]

02. Inline Elements (인라인 요소)

인라인 요소와 텍스트는 반드시 블록 레벨 요소에 포함시켜 나타내어야 유효성 테스트에 통과할 수 있다. Inline Elements는 a, img, em, strong 등이 해당되며, ‘텍스트 레벨 요소’라고 불리기도 한다. 대부분의 인라인 요소가 인라인 요소와 텍스트 포함이 가능하지만 블록 레벨 엘리먼트 포함은 불가능하다.

텍스트를 강조할 때 사용하는 EM 엘리먼트를 BODY 엘리먼트 바로 아래에 마크업한 예이다. 이것은 인라인 엘리먼트를 블록 레벨 엘리먼트 안에 사용할 수 있다는 규격을 지키지 않았기 때문에 유효성 검사를 하게 되면 ‘오류’가 있다고 나타난다. 잘못된 예:

<body> <em>텍스트를 강조합니다.</em> </body>

[그림3. em 엘리먼트 Validation Output:Error 화면]

문단을 표현하는 블록 레벨 엘리먼트인 P 엘리먼트 안에 포함시켜 유효성 검사를 하게 되면 유효성 검사 통과가 된다.

올바른 예:

<body> <p> <em>텍스트를 강조합니다.</em> </p> </body>

[그림4. em 엘리먼트 Validation Output: Passed 화면]

의미를 살린 마크업을 올바르게 하기 위해서는 각 엘리먼트의 기능과 블록 레벨 엘리먼트와 인라인 엘리먼트의 특성에 맞게 사용해야 한다.

03. Grouping Elements: DIV, SPAN 엘리먼트

BODY 엘리먼트 안에 사용하는 엘리먼트 중 엘리먼트나 텍스트 데이터를 그룹으로 묶을 수 있는 기능을 가진 것은 DIV, SPAN 엘리먼트 두 가지가 있다. DIV 엘리먼트는 블록 레벨 엘리먼트로 다른 블록 레벨 엘리먼트(DIV, P, FORM, TABLE 등)들과 인라인 엘리먼트(A, SPAN, IMG, EM, STRONG, 등)을 포함할 수 있다. SPAN 엘리먼트는 텍스트 데이터의 중간에 외형적인 변화가 필요할 경우 사용하게 된다. 이러한 특성을 적용하여 마크업을 하게 되면 결국은 의미를 살려 마크업한 엘리먼트들을 그룹핑하여 영역을 나누는 역할을 DIV 엘리먼트가 수행하게 된다. DIV, SPAN 엘리먼트에 ID, Class Attribute(애트리뷰트)를 추가하여 원하는 구조를 완성하게 된다.

블록 레벨 엘리먼트라고 모두 다른 블록 레벨 엘리먼트를 포함할 수 있는 것은 아니다. ‘문단 내에서 제목으로 강조하고 싶은 텍스트에 H1 엘리먼트를 사용하겠다는 생각’으로 아래와 같이 마크업을 하였다면, 브라우저에 디스플레이는 생각한 대로 되었지만 유효성 검사를 해 보면 잘 못 마크업한 것을 알 수 있다.

모든 블록 레벨 엘리먼트가 다른 블록 레벨 엘리먼트를 포함할 수 있는 것이 아니기에, 이런 경우 구조적인 영역구분이 필요한 경우 P 엘리먼트 대신 DIV 엘리먼트를 사용하는 것이 올바른 방법이며, 예와 같이 제목만을 마크업하면 되는 경우 DIV 엘리먼트로 감싸지 않고 BODY 엘리먼트 바로 아래에 H1 엘리먼트만을 마크업해도 된다.

잘못된 예:

<body> <p> <h1>p엘리먼트 안의 h1 엘리먼트</h1> </p> </body>

[그림5. 브라우저에 디스플레이된 화면]

[그림6. 잘못된 예의 유효성 테스트 결과 화면]

Table 레이아웃에 익숙한 제작자가 의미를 살린 마크업을 시도하는 경우 많이 발생되는 문제가 테이블의 중첩되는 구조를 그대로 옮겨 놓는 듯한 구조를 만드는 것이다. 브라우저에 디스플레이도 원하는 대로 되고, 유효성 검사도 통과하지만 잘못한 마크업이다. 디자인을 위해 필요한 경우나 영역의 구분을 위해 필요한 경우가 아니라면 DIV 엘리먼트로 무의미하게 감쌀 필요는 없다.

잘못된 예:

<div> <div> <h1>과도한 div 안의 h1 엘리먼트</h1> </div> </div>

04. CSS의 Display Property(속성)의 값 inline, block

[http://www.w3.org/TR/CSS21/]의 [Full Table of Contents]에 있는 [9.2.4 The 'display' property]을 클릭하면, Display 속성의 값들을 설명하는 페이지로 연결된다. 값들 중에서 inline, block 값은 기본적인 엘리먼트의 디스플레이 속성을 변경할 수 있게 한다.

[그림7. http://www.w3.org/TR/CSS21/ CSS2.1 명세서 화면]

아래는 인라인 엘리먼트인 A 엘리먼트를 CSS로 display:block 화하여 블록엘리먼트의 속성을 가지게 하였다. 브라우저에서 보게 되면 블록 엘리먼트처럼 층으로 쌓이게 되고, 블록 엘리먼트의 Box Model(박스모델)이 그대로 적용된다. A 엘리먼트를 display:block 하는 방법은 메뉴바를 구현할 때 많이 사용되고 있다.

인라인 엘리먼트의 속성을 block화한 예:

<style type="text/css"> a{display:block;} </style> </head> <body> <p> <a href="#">a엘리먼트는 인라인 엘리먼트이다.</a> <a href="#">a엘리먼트는 인라인 엘리먼트이다.</a> </p> </body>

[그림8. 인라인 엘리먼트의 속성을 block화한 화면]

아래는 블록 레벨 엘리먼트인 ul, li 엘리먼트를 이용하여 가로 메뉴바를 구현할 때 사용하는 방법 중의 한 가지로, li 엘리먼트를 display:inline화 하는 경우를 살펴보자. 아래의 소스만을 가지고 완벽하게 메뉴바를 구현할 수 있는 것은 아니며, 여기서는 중간 과정 중의 하나로 display:inline 인 적용되는 것을 보여주기 위한 예이다.

블록 레벨 엘리먼트의 속성을 inline화 한 예:

<style type="text/css"> li{display:inline;} </style> </head> <body> <ul> <li>메뉴1<li> <li>메뉴2</li> </ul> </body>

[그림9. display:inline 적용 전 화면]

[그림10. display:inline 적용 후 화면]

지금까지 블록 레벨 엘리먼트와 인라인 엘리먼트의 특징을 살펴보았다. 여기에 추가할 부분은 HTML 엘리먼트들이 가지는 Box model에 관한 것이다. Box model의 속성 값은 블록 레벨 엘리먼트와 인라인 엘리먼트에 다르게 적용되며, 부모, 자식, 인접한 엘리먼트의 관계, 위치에 따라서 적용한 Box model의 값이 다르게 디스플레이 된다.

05. CSS box model(박스모델)

모든 엘리먼트에는 사각형 박스가 생성된다. 이 박스는 CSS로 제어할 수 있다. CSS box model(박스모델)은 [http://www.w3.org/TR/CSS2/box.html]에서 내용을 확인할 수 있다.

[그림11. http://www.w3.org/TR/CSS2/box.html 에 있는 박스모델 화면]

아래 소스에 적용하면서 그림을 이해해 보자.

박스모델을 이해하기 위한 예:

<body> <div> 박스안의 텍스트 </div> </body>

엘리먼트 안에 텍스트를 작성한 뒤 디스플레이 해 보면 일반적으로 볼 수 있는 화면이다. 하지만 css를 적용해 보면 이 텍스트들은 여러 프로퍼티들도 구성된 박스 안에 들어 있다는 것을 알게 된다. 그림11에서 가운데 'content' 부분이 div 엘리먼트 안에 작성한 ‘박스안의 텍스트’가 있는 영역이다. 물론 ‘content' 부분에 이미지가 들어갈 수 도 있다.

[그림12. div 엘리먼트가 만든 박스 안에 들어있는 텍스트의 디스플레이 화면]

1.Padding (패딩) content(내용)와 Border(테두리) 사이의 공간이다. 그림11과 같이 TP (padding-top), RP (padding-right), BP (padding-bottom), LP(padding-left)의 Property(속성)가 있다.

Padding property 적용 예:

<style type="text/css"> div {padding-top:20px;padding-right:20px; padding-bottom:20px;padding-left:20px; } </style> </head> <body> <div>박스안의 텍스트</div> </body>

텍스트 주변에 공간이 생긴 것을 확인 할 수 있다. 위의 CSS 선언부분을 간단하게 작성할 수 있다. 간략한 표기 속성인 padding 속성을 사용하고 값은 top, right, bottom, left 순으로 스페이스로 구분하여 작성할 수 있으며, 값이 동일할 경우 div {padding:20px; }으로 작성할 수 있다.

<style type="text/css"> div {padding:20px 20px 20px 20px; } </style>

[그림13. Padding property 적용 화면]

2.Border (테두리) Padding 둘레에 만들어지는 테두리이다. 그림11과 같이 TB(border-top), RB(border-right), BB (border-bottom), LB(border-left)의 Property(속성)가 있다.

Border property 적용 예:

<style type="text/css"> div{padding:20px;border:4px solid red; } </style> </head> <body> <div>박스안의 텍스트</div> </body>

Padding의 둘레의 top, right, bottom, left 방향에 4px 두께의 실선 빨간색 테두리가 만들어졌다. 위의 표기법은 가장 간략하게 표현된 방식이며, 원하는 방향의 테두리만 줄 수도 있으며 테두리선의 두께, 모양도 변경할 수 있고, 원하는 색상을 설정할 수 도 있다.

[그림14. Border property 적용 화면]

Border-top 속성을 재설정한 예:

<style type="text/css"> div{padding:20px;border:4px solid red;border-top:10px dashed green;} </style>

div 엘리먼트에 background-color 속성을 적용하게 되면 그림15에서 테두리의 바깥 경계까지 배경색상이 적용되기 때문에 선의 끊어진 부분에 배경색상이 채워져 있는 것을 볼 수 있다.

[그림15. border-top 속성을 재설정한 화면]

3.Margin (마진) Border 둘레에 만들어지는 투명한 공간이다. 그림11과 같이 TM(margin-top), RM(margin-right), BM(margin-bottom), LM(margin-left)의 Property(속성)가 있다.

Margin 속성을 적용한 예:

<style type="text/css"> div{padding:20px; border:4px solid red; border-top:10px dashed green; margin:30px;} </style>

Border 둘레의 top, right, bottom, left 방향에 투명한 공간이 생기는 것을 확인할 수 있다. DIV 엘리먼트의 width 값을 지정하지 않았기 때문에, width 기본값인 브라우저의 100%에서 30px씩 네 방향으로 margin 값이 적용되어, 결과적으로는 width 값이 줄어들게 된다.

[그림16. border-top 속성을 재설정한 화면]

Div 엘리먼트에 width값을 적용한 경우 마진이 적용되는 예:

<style type="text/css"> div{padding:20px; border:4px solid red; border-top:10px dashed green; margin:30px; width:150px;} </style>

[그림17. div엘리먼트에 width:150px을 적용한 화면]

06. 마치며

드림위버 CS3에서 웹표준 문서를 제작하기위해서의 네 번째인 이번 호에서는 블록레벨 엘리먼트와 인라인 엘리먼트를 살펴보았다. HTML 엘리먼트는 각각의 기능을 가지면서도 블록레벨 엘리먼트와 인라인 엘리먼트의 특징도 가지고 있으며, 이러한 특징을 CSS를 통해서 제어할 수 있음을 알 수 있었다. 물론 더 많은 내용들이 있지만 기본적인 특징들을 잘 관찰하고 이해한 뒤 다른 특징들을 살펴보는 것이 올바른 웹표준 문서를 구현하기 위해 도움이 될 것이다.

CSS작성과 유효성 검사

이번 호는 의미를 살려 마크업한 [http://ko.www.mozilla.com/ko/firefox/about] 의 HTML 엘리먼트에 CSS(Cascading Style Sheet)을 적용하여 파이어폭스, IE6, IE7에도 동일하게 디스플레이 되도록 적용시키고 CSS Validator를 테스트 하는 방법에 대해서 배워보기로 하자. CSS 적용의 기준은 W3C의 권고안을 많이 반영하여 만든 파이어폭스 브라우저를 기준으로 작업하고 IE6, IE7, 오페라, 사파리 등과 같은 브라우저에서 다르게 디스플레이되는 부분은 별도의 CSS 핵(Hack)을 작성하여 주는 방식으로 진행한다.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

기존의 테이블로 레이아웃을 만들던 방식에서는 link스타일, body 엘리먼트 정도를 CSS로 제어하였지만, 웹 표준 방식에서는 웹 문서의 모든 디자인적 용도(엘리먼트의 배열, 텍스트 색상, 크기 등, 디자인을 위한 배경이미지 위치, 네비게이션 구현 등)를 위한 작업은 CSS를 이용하여 작업하게 된다. 앞의 호에서 의미를 살린 마크업으로 [http://ko.www.mozilla.com/ko/firefox/about/] 와 같이 HTML을 작성한 것을 CSS를 이용하여 디자인을 입혀보기로 하자. 작성하지 않은 분은 파이어폭스 브라우저에서 [보기>소스]하여 나온 소스를 [전체선택]하여 드림위버에서 Script와 CSS를 제거하고 사용해도 된다.

CSS1은 1996년에 소개되었는데, 현재 사용하고 있는 CSS의 기본구조, Selector(선택자), Property(프로퍼티)등 대부분을 갖추고 있었으며, 1997년에 만들어진 CSS2은 CSS1을 대부분 사용하면서 Media Types을 추가하여 브라우저, 음성장치, 프린터, 점자장치, 핸드장치(handheld device) 등 각기 다른 장치들에 맞도록 CSS를 적용할 수 있도록 하였으며, 컨텐츠의 위치지정, 다운로드할 수 있는 글꼴, 테이블 레이아웃, 국제화 지원 기능, 자동 카운터와 번호 붙이기, 사용자 인터페이스와 관계된 일부 Property(속성)을 지원하게 된다. 현재 표준으로 인정된 CSS2.1은 2와는 많은 차이는 없다. 현재 CSS3이 만들어지고 있는 중이며, 여러 개의 Background 이미지를 사용하고 위치도 조절할 수 있으며, background-size, border-style, border-image, border-radius, box-shadow Property(속성)등이 추가된다고 한다. 현재 웹표준 사이트를 제작한다면 많은 브라우저들이 지원하는 CSS2.1을 기준으로 작업하고 유효성 검사를 하게 된다. [ http://www.w3.org/TR/CSS21/ ]에서 CSS2.1에 관한 정보를 제공하고 있다.

[그림1. http://www.w3.org/TR/CSS21/ 화면]

현재 논의되고 있는 CSS3에 관한 정보는 아래의 주소에 링크되어 있는 정보를 잘 살펴보기 바란다.

[그림2. http://www.w3.org/Style/CSS/current-work 화면]

02. CSS를 웹문서에 적용하는 방법

CSS를 웹문서에 적용하는 방법에 따른 분류이다.

1.External Style Sheet (외부 스타일시트)

외부 스타일시트를 적용하는 방식에는 두 가지가 있다. 위의 방식은 일반적으로 많이 사용하는 방식으로 브라우저의 버전에 관계없이 CSS를 적용시킬 수 있다. XHTML로 웹문서를 작성하는 경우 단독 엘리먼트이지만 끝에 / 를 넣어 닫아준다.

<head>
<link rel="stylesheet" type="text/css" href="style.css" /> </head>

@import 방식은 CSS 파일이 다른 CSS 파일을 불러올 수 있도록 한다. 복잡한 구조의 사이트인 경우 웹문서에 적용되는 최종 style.css가 각각인 base.css, layout.css를 불러와 포함할 수 있다. 이렇게 다른 CSS를 포함하는 style.css는 위의 link 방식으로 웹문서에 적용할 수도 있고, 아래와 같이 @import 방식으로 적용될 수도 있다.

style.css가 CSS를 포함하는 방법

@import url(base.css);
@import url(layout.css);

@import로 웹문서에 적용되는 경우 낮은 브라우저에서는 인식하지 못하는 경우가 있기 때문에 최신 버전의 브라우저에 적용시킬 CSS를 별도로 불러오는 경우 사용하기도 한다.

<head>
<style type="text/css">
@import url(style.css);
</style>
</head>

‘정보통신 접근성 향상 표준화 포럼’ 사이트인 [http://iabf.or.kr/]가 케이스이다.

[그림3. http://iabf.or.kr/ 화면]

2. Internal Style Sheet (내부 스타일시트)

웹 문서 내부에 CSS를 작성하여 사용한다.

<head>
<style type="text/css">
h1 { margin: 0; }
</style>
</head>

3. Inline Styles (필요할 때마다 엘리먼트에 적용하는 스타일)

<p style="color: gray; margin-top: 10px"> 이것은 웹표준 방식에서는 권장하지 않는다. 수정, 관리가 어렵고, 컨텐츠와 디자인의 분리를 위해서도 좋은 방법이 아니다. </p>

03. Selector(선택자)

CSS를 작성하는 방법은 먼저 Selector(선택자)를 작성하고 {(시작 중괄호)로 시작하여, }(닫기 중괄호)로 선언 구간을 만든다. 선언 구간 안에 Property(프로퍼티) 선언, :(콜론), Value(값), ;(세미콜론) 순으로 작성한다. :(콜론)은 Property(프로퍼티)와 Value(값)을 구분하기 위한 것이고 ;(세미콜론)은 마침표의 역할을 한다. ;(세미콜론) 뒤에 다시 Property(프로퍼티)를 추가하고 동일한 방식으로 계속 작성해 나간다.

h1 { font-size: 12px;}

많은 선택자가 있지만 기본적으로 많이 사용하는 선택자를 중심으로 알아보자. 파이어폭스에 [Web Developer]를 플러그인 하고 [http://ko.www.mozilla.com/ko/firefox/about/]사이트의 CSS에서 사용된 선택자를 확인해 보자.

[그림4. 파이어폭스에서 [Web Developer>View CSS]를 선택하는 화면]

1.Type selectors (태그 선택자)

아래에서 body, form, img 가 태그 선택자이다. 주로 기본적으로 엘리먼트에 적용할 CSS를 작성할 때 사용하는 방식이다. 다음, 네이버 같은 사이트의 CSS를 보면 처음부분에 엘리먼트에 대한 Property를 쭉 정의해 놓았다. 웹 문서 마크업에서 사용하는 엘리먼트는 많지 않고 디스플레이 되어야 하는 상태가 예측되기 때문에 기본적인 CSS 적용이 가능하며, 이렇게 해 두는 것이 효율적이다.

[그림5. 태그 선택자 화면]

2.Class selectors (클래스 선택자)

클래스 선택자는 앞에 .을 붙이고 영문으로 시작하도록 작성하면 된다. 아래에서 .product-firefox 와 .product-thunderbird 이 클래스 선택자이다. 원하는 엘리먼트를 정밀하게 제어할 수 있으며, .product-firefox 은 마크업 된 서로 다른 엘리먼트에 여러 번 적용해서 사용할 수도 있다. 아래와 같이 엘리먼트에 class="" 를 쓰고 적용한다. 이때 .은 빼주어야 한다.

[그림6. 클래스 선택자 화면]

<body> <div class="product-firefox">클래스선택자를 엘리먼트에 적용하는 방법 </div> </body>

3.ID selectors (아이디 선택자)

아이디 선택자는 앞에 #을 붙이고 영문으로 시작하는 네임을 준다. 아이디 선택자는 같은 페이지 내에 한 번만 적용하는 것이 원칙이다. 같은 ID를 한 번 이상 사용하여도 작동은 하지만 HTML Validator를 통과하지 못한다. 주로 레이아웃 구조를 위해 사용되거나 웹브라우저에서 아이디 선택자가 클래스 선택자 보다 우선권이 주어지는 것을 이용하여, 스타일의 충돌을 피하기 위해서도 사용한다.

[그림7. 아이디 선택자 화면]

4.Descendant selectors (하위 선택자)

#header 아이디 밑의 자식으로 있는 h1 엘리먼트의 스타일을 적용하고 싶다면 그림과 같이 작성한다. 부모와 부모에 포함된 자식의 관계는 스페이스로 구분한다.

[그림8. 하위 선택자 화면]

#header의 자식인 h1 엘리먼트의 자식인 img 엘리먼트를 선택하여 CSS를 적용하였다.

[그림9. 하위 선택자 화면]

하위 선택자를 이해하기 위해서는 HTML의 가계도를 이해하는 것이 필요하다.

5. Grouping (그룹 선택자)

동일한 값을 사용하는 엘리먼트나 ID, Class 선택자를 그룹으로 묶어서 다음과 같이 적용할 수 있다. 선택자의 구분은 ,(콤마)로 한다.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

위의 CSS를 그룹핑하면 다음과 같다.

h1, h2, h3 { font-family: sans-serif }

[그림10. 엘리먼트만을 그룹핑한 화면]

[그림11. 각각의 ID선택자 밑의 자식엘리먼트의 값을 지정하기위해 그룹핑한 화면]

6. Universal selector (전체 선택자)

*(애스터리스크)는 웹 문서에 있는 모든 엘리먼트를 선택하기 위해 간략히 표현하고 싶을 때 사용할 수 있다. 아래와 같이 작성하면 혅재 웹 문서에 있는 모든 엘리먼트의 글자크기를 12픽셀로 지정할 수 있다.

* {font-size:12px;}

전체 선택자는 하위 선택자의 역할로도 사용된다. 다음과 같이 작성하면 #content 밑의 모든 엘리먼트의 배경색상은 흰색으로 설정된다.

#content * {background: #fff;}

7. 그 밖의 선택자들

• Child selectors (자식 선택자)
• Adjacent sibling selectors (인접한 형제 선택자)
• Attribute selectors (애트리뷰트 선택자)
• Pseudo-classes (가상 클래스)
  • :first-child
  • The link pseudo-classes: :link and :visited
  • The dynamic pseudo-classes: :hover, :active, and :focus
  • The language pseudo-class: :lang
• Pseudo-elements (가상 엘리먼트)
  • The :first-line pseudo-element
  • The :first-letter pseudo-element
  • The :before and :after pseudo-elements

04. CSS 작성하기

CSS는 마크업된 엘리먼트를 원하는 형태로 브라우저에서 보여지도록 하는 용도로 사용하기 때문에 먼저 작성된 엘리먼트의 구조를 파악하는 것이 중요하다. 그림은 드림위버의 디자인뷰에서 보여지는 화면위에 구조를 위해 사용된 DIV 엘리먼트의 ID, Class 명을 표기한 것인데, 여기서는 Class 선택자만 사용되어 있다.

[그림12. http://ko.www.mozilla.com/ko/firefox/about/의 구조]

1. 원하는 대로 구조가 잡히는지 확인하면서 작업하는 것이 중요하다. 구조는 블록레벨 엘리먼트를 그룹핑하는 div 엘리먼트를 사용하게 되기 때문에, 필자의 경우 처음 구조를 확인하면서 마크업을 하는 경우 다음과 같이 작성하여 div 엘리먼트의 테두리를 1픽셀 빨강색으로 설정하여 확인한다. 작업이 어느 정도 마무리 되면 삭제하고 부분적으로 엘리먼트에 배경색상을 넣어 넓이와 높이를 확인하면서 작업하는 것이 편리하다.

[그림13. div에 테두리 적용한 파이어폭스 브라우저 화면]

2. 웹문서에 사용된 기본적인 엘리먼트에 대한 스타일 정의가 먼저 되어야한다. 현재의 웹문서에는 사용되지 않은 엘리먼트이지만 CSS는 공통으로 사용되는 경우가 많기 때문에 엘리먼트의 그룹핑 선택자가 작성되고 동일한 값을 주는 경우가 일반적이다. 소스에 작성된 규칙은 ‘Nice to Opera’ 규칙이라고도 하는데, IE5만 닫힌 중괄호를 인식하여 스타일 선언이 끝난 것으로 생각하게 한다. 나머지 모든 웹브라우저는 앞서 지정된 x-small 값을 small로 덮어써 다시 적용하게 된다. 그 결과 글씨 크기가 모두 일관된 배율이 유지되게 할 수 있다.

voice-family: inherit;
font-size: small; /*일반 웹브라우저에 적용된다*/ }

body, td, th, input { /* redundant rules for bad browsers */
font-family: verdana, sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; }

[그림14. body 엘리먼트에 글자크기를 적용한 파이어폭스 브라우저 화면]

3. :link와 :visited와 :hover :visited: 는 가상클래스 선택자이며, 작성 순서를 지켜야 원하는 결과를 얻을 수 있다.

/* Navigation */
:link { color: #039; }
:visited { color: #636; }
:link:hover, :visited:hover { color: #333; }

[그림15. link 스타일을적용한 파이어폭스 브라우저 화면]

05. CSS Validator

[http://jigsaw.w3.org/css-validator/ ]에서 CSS 유효성 검사를 할 수 있다. 서버상에 CSS가 없기 때문에 [By direct Input ] 안에 직접 작성한 CSS를 입력하여 테스트 해 볼 수 있다.

[그림16. http://jigsaw.w3.org/css-validator/#validate_by_input 화면]

[그림17. http://jigsaw.w3.org/css-validator/validator 화면]

의미를 살린 마크업과 유효성 검사

이번 호는 컨텐츠를 의미를 살려 마크업하는 방법(Semantic Markup)과 마크업이 제대로 되었는지 체크하는 유효성 검사(Validator Test)를 하는 방법에 대해서 배워보기로 하자. 기존의 테이블로 레이아웃을 잡고 큰 이미지로 컨텐츠를 표현하던 방식에서는 생각되지 않던 부분이라 생소하지만, 내용을 이해하게 되면 정말 필요한 방식이라는 것을 느끼게 될 것이다. 웹표준으로 사이트를 제대로 제작하고자 한다면 body 엘리먼트 이하의 컨텐츠는 의미를 살린 엘리먼트로 작성되어야 한다.

글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

• 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
• 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

웹표준을 공부하게 되면 HTML element(엘리먼트)라는 용어를 접하게 된다. HTML element(엘리먼트)는 HTML Tag(태그)에 의해 작성되어 진다. HTML Tag(태그)는 < 와 >에 둘러쌓여 있고, HTML element(엘리먼트)는 몇가지의 단독태그 (예:<br>, <hr> 등)를 제외하고는 Start Tag(시작태그)와 End Tag(끝태그)로 구성(예:<pp>컨텐츠</p>)되어 있다.

01. 의미를 살린 마크업 (Semantic Markup)

HTML element(엘리먼트)는 표현하려고 하는 컨텐츠의 의미나 종류에 따라 W3C 권고안을 지켜 작성하면 된다. 컨텐츠의 의미에 적합한 HTML element를 찾기위해 [http://www.w3.org/TR/html401/]페이지에서 상단의 [element] 메뉴를 클릭하여 [Index of Elements] 페이지에서 찾아서 사용하면 된다.

[그림1. http://www.w3.org/TR/html401/ 화면]

[그림2. http://www.w3.org/TR/html401/index/elements.html 화면]

제목을 표시하는 h1, h2, h3, h4, h5, h6 elements를 클릭하면 그림과 같이 자세한 설명을 볼 수 있고, 한 페이지 내에서 제일 중요한 제목부분을 h1 element로 한 번만 마크업하고, 다음 중요한 제목은 h2 element로 마크업한다. h2 element는 동일한 중요도의 제목 부분에 여러 번 사용해도 되며, 다음 중요한 제목은 h3 element로 마크업해 나간다. h3 element를 건너뛰고 h4 element로 마크업을 하게 되면 검색엔진은 더 이상 중요한 제목이 없다고 생각하고 더 이상 페이지를 검색하지 않게 되어, 결국 웹페이지가 검색결과에 노출될 기회를 잃어버리게 된다. 문단으로 나열되는 경우 p 엘리먼트를 사용하며, 회사주소를 작성할 때는 address 엘리먼트를 사용하고, copyright를 표시하는 ©도 ASCII값으로 © 와 같이 마크업해야 한다. 문단에서 강조해야할 텍스트는 strong 엘리먼트나 em 엘리먼트를 사용하여 마크업하면 브라우저나 다른 디바이스에서 컨텐츠를 해석해 나갈 때 좀 더 강조한다는 의미로 해석하게 된다. 의미를 살려 마크업을 한다는 것은 일반 웹브라우저를 비롯한 다양한 환경의 디바이스에게 단순히 디스플레이 되는 것과는 별도로 컨텐츠를 제목, 문단, 컨텐츠의 목록, 강조, 주소, 저작권, 인용, 그룹 등의 구조에 맞게 엘리먼트를 사용하여, 브라우저나 디바이스가 마크업을 해석할 때 컨텐츠의 의미를 알도록 설계하는 것이다.

[그림3. http://www.w3.org/TR/html401/struct/global.html#edef-H1 화면]

만약, [ http://www.w3.org/ ]의 설명이 어렵게 느껴진다면 [ http://w3schools.com/ ] 사이트를 방문해 보기 바란다. 다양한 언어에 관한 내용과 예가 잘 정리되어 있어 좀 더 접근하기 편할 것이다.

[그림4. http://w3schools.com/ 화면]

02. 파이어폭스 설치하기

드림위버에서 마크업을 하기 전에 W3C의 권고안을 지켜 개발한 Mozilla 재단에서 만든 FireFox 브라우저를 설치해 보자. 웹접근성에는 여러 의미가 내포되어 있는데 그 중 한 가지가 다양한 브라우저에서의 웹사이트 접근이 가능해야 한다는 의미도 포함된다. 우리나라에서 대부분 사용하는 Internet Explorer 외에 FireFox, Opera, 맥용 브라우저인 Safari 등 있으며, 이러한 개념은 크로스브라우징이라는 용어로 설명되고 있다.

웹표준 작업시에는 W3C의 권고를 잘 반영하는 FireFox에 디스플레이 되는 것을 기준으로 작업하고, 브라우저의 특성에 따라 다르게 디스플레이 되는 부분은 별도의 Hack(핵)을 사용하여 다른 값을 주어 조절하는 것이 시간과 노력을 줄일 수 있다. 의미를 살린 마크업에 사용되는 엘리먼트는 몇 개 되지 않기 때문에 이해만 하면, 중요도에 비해 어렵지 않지만 브라우저별 다른 디스플레이를 맞추기 위해서는 많은 시간과 노력이 필요한 부분이다.

자, 그럼 FireFox를 설치해 보자. 검색 사이트에서 ‘파이어폭스’라고 입력하고 검색하면 나오는 결과 중 원하는 버전을 선택하여 설치한다. 여기서는 한글 FireFox v2.0.0을 설치한다.

[그림5. http://naver.com/ 의 파이어폭스 검색결과 화면]

파이어폭스를 설치한 뒤, 웹표준 사이트 제작에 꼭 필요한 부가기능을 추가하기 위해 상단메뉴의 [도구>부가기능]을 선택한다.

[그림6. 파이어폭스 설치화면]

부가기능 팝업창의 아래에 [유용한 확장기능 찾기]를 클릭하여 [ https://addons.mozilla.org/ko/firefox/browse/type:1 ]사이트로 간다.

[그림7. 파이어폭스 부가기능 설치화면]

상단의 검색창에 ‘web developer’를 입력하고 검색 버튼을 클릭한다.

[그림8. 파이어폭스 부가기능 사이트 화면]

그림과 같이 결과가 나오면 [Web Developer]를 클릭하여

[그림9. web developer 검색결과 화면]

설치페이지로 넘어간다. [설치하기] 버튼을 클릭하면

[그림10. web developer 설치페이지 화면]

설치 팝업이 나오고 [지금설치] 버튼을 클릭하면 설치되고, 설치된 후 [Firefox 다시 시작]버튼을 클릭하면, 이제 마지막 작은 팝업창이 나오고 [예]를 클릭하면 파이어폭스 브라우저가 다시 실행된다.

[그림11. web developer 설치팝업 화면]

[그림12. web developer 설치팝업 화면]

다시 실행된 파이어폭스 텝 위부분에 ‘web developer'가 설치되어 있는 모습을 볼 수 있다. 이 기능은 웹사이트 분석에 없어서는 안 될 중요한 부가기능으로, 지금 설치하지는 않겠지만 ’Firebug'도 개발에 유용한 기능을 가지고 있으니 같은 방식으로 설치해 보기 바란다.

[그림13. web developer가 파이어폭스에 설치된 화면]

Internet Explorer는 6, 7을 기준으로 일반적으로 작업하고 있으며, IE6, IE7을 한 컴퓨터에서 동시에 설치하고 싶다면 IE7을 설치하여 사용중이라면 ‘Multiple-IE’ 라는 IE6, IE5.5, IE5, IE4 & IE3 버전의 Standalone 프로그램을 설치하고, IE6 사용자라면 IE7 Standalone을 설치하여 사용하면 편리하다.

03. 드림위버에서 의미를 살린 마크업하기

1.웹표준으로 만들기 위해서 HTML 문서의 DOCTYPE 이 중요하고 드림위버 작업에서 먼저 해야할 단계도 [Edit>Preferences>New Doccument]에서 [Default Document Type]을 설정하는 것이다. 여기서는 [XHTML 1.0 Strict]으로 설정하자.

[그림14. 드림위버CS3에서 DOCTYPE 설정 화면]

2. DOCTYPE에 관한 내용은 3월호에서 언급했듯이, 브라우저가 HTML 문서를 어떤 방식으로 해석할지를 결정하는 중요한 역할을 하며, 여기서 엄격(Strict)하게 지킨다는 의미는 앞으로 없어질 엘리먼트를 사용하지 않는 것을 정확하게 지켜서 마크업을 한 문서임을 선언하는 것이며, 마크업 작성자도 엄격하게 규칙을 지켜 작성해야 하며, Validator Test도 이에 맞게 테스트한다.

[그림15. DOCTYPE이 XHTML 1.0 Strict로 설정된 화면]

3. [ http://ko.www.mozilla.com/ko/firefox/about/ ]를 보고 마크업을 해보자. 구조를 분석해 보면 ‘Mozilla 소개’가 페이지의 중요 제목에 해당하고 아래에 설명들은 여러 개의 문단으로 구성되어 있다. 아래에는 저작권의 표시가 있다.

[그림16. http://ko.www.mozilla.com/ko/firefox/about/ 화면]

4. 소스를 보면 body 엘리먼트 이하에 ‘Mozilla 소개’가 <h1>Mozilla 소개</h1>로 의미를 살려 마크업 되어 있고 설명 부분인 문단은 <p>~</p>로 작성되어 있는 것을 알 수 있다. div 엘리먼트가 많이 보이는데 이것은 문서 내에서 영역을 나누어주는 역할을 하는데, 결국 컨텐츠의 그룹핑을 하는 역할을 한다. 같은 용도로 사용하는 span 엘리먼트가 있는데, 차이점은 div 엘리먼트는 브라우저에 블럭(Block)처럼 쌓여서 디스플레이 되어 블록(Block)레벨 엘리먼트에 속하고, span 엘리먼트는 한줄 선상으로 배열되어 인라인(Inline)레벨 엘리먼트에 속한다. 이러한 특징은 Property의 속성들로 구성된 박스모델의 디스플레이가 다르게 구현되고, 우리는 그러한 특징에 맞게 활용해야 한다.

[그림17. http://ko.www.mozilla.com/ko/firefox/about/ 소스화면]

5. 드림위버에서 body 엘리먼트 아래에 아래와 같이 의미를 살려 마크업하고 파이어폭스와 IE에서 각각 띄워 살핀다.

[그림18. 의미를 살린 마크업된 화면]

[그림19. IE6에 디스플레이된 화면]

[그림20. 파이어폭스에 디스플레이된 화면]

6. 그리고 작성한 마크업이 맞는지 Validator 테스트를 해야한다. 드림위버에서는 [File>Validator>Markup]를 선택하면 아래 창에서 결과를 보여준다. 지금 작성한 것은 매우 간단한 것이기에 에러가 없지만, 여러분이 웹표준의 기본에 대해 알지 못하고 마크업을 했다면 아마 이 간단한 것에서도 많은 에러표시가 나오게 될 것이다. 드림위버에서 제공하는 Validator의 기능을 간편하게 사용하도록 한 것이며, 직접 http://validator.w3.org/에서 테스트 해보는 것도 좋은 방법이다.

[그림21. 드림위버에서 Markup Validator 화면]

7. h1, p 엘리먼트를 구조적으로 그룹핑하고 디자인적으로 제어하기 위한 목적으로 div 엘리먼트를 이용하여 감싸준다.

8. 드림위버에서 여기까지 마크업하고 비교해 본다. 실제 소스에서는 ‘한국Mozilla 활동'을 h3 엘리먼트를 사용하였는데 h2를 사용하는 것이 더 적절하다고 생각된다.

[그림22. 파이어폭스에 디스플레이된 화면]

[그림23. IE6에 디스플레이된 화면]

9. ‘한국Mozilla 활동' 아래에 ul 엘리먼트를 사용하여 컨텐츠가 나열되어 있는 것을 볼 수 있다. ul 엘리먼트는 테이블 레이아웃 방식에서와는 달리 어떤 내용을 순서가 없이 나열되는 경우 아주 많이 활용되고 있다. 심지어는 메뉴 네비게이션을 만들 때도 의미적으로 각각의 메뉴가 순서없는 목록으로 보고 ul 엘리먼트를 사용하며, 사이트 맵과 같은 배열에서도 사용된다.

[그림24. 파이어폭스에 디스플레이된 화면]

[그림25. IE6에 디스플레이된 화면]

04. 마치며

드림위버 CS3에서 웹표준 문서를 제작하기위해서의 두 번째인 이번 호에서는 의미를 살린 마크업을 이해해 보았다. 눈으로 보여지는 디스플레이도 중요하지만 그 보다 컨텐츠가 구조적으로 배열될 수 있도록 마크업하는 것은 앞으로 구현될 많은 디바이스와의 접근성, 호환성에서도 매우 중요한 일이다. 반복해서 이야기하지만 웹의 정신을 이해하면 웹표준을 좀 더 쉽게 작업할 수 있다. 혹시 지금 작업한 소스를 확인하고 싶다면 제 블로그인 www.tagnbrace.com/ 서 확인하기 바란다

인터넷한겨레 꼴찌… 장애인차별금지법 시행 앞두고 개선 시급

국내 주요 언론사닷컴 가운데 조인스닷컴의 웹 접근성이 가장 우수한 것으로 나타났다. 미디어오늘이 케익소프트의 웹 접근성 평가 시스템을 활용해 국가 표준인 ‘한국형 웹 콘텐츠 접근성 지침(KWCAG) 1.0’의 13개 항목 26개 지표를 기준으로 국내 10개 언론사닷컴을 평가한 결과 조인스닷컴이 준수율 90.83점으로 가장 높은 점수를 받았다.

웹 접근성이란 “누구나 웹에 접근할 수 있어야 한다”는 전제 아래 시각 또는 청각 장애인이나 고령자 등 취약 계층이 얼마나 일반인과 동등하게 웹 사이트에 접근하고 이용할 수 있는지를 평가하는 척도를 말한다. 최근에는 웹 접근성이라는 개념이 장애인뿐만 아니라 일반인에게도 훨씬 편리하고 효율적인 웹 표준으로 인식되고 있다.

미디어오늘은 KWCAG 1.0을 기준으로 11일 각 홈페이지별로 5개 페이지를 평가했다. 평가 결과 조인스닷컴이 압도적인 격차로 1위를 기록한데 이어 매일경제가 72.75점으로 2위, 경향닷컴이 70.55점으로 3위를 기록했다. 한국아이닷컴(65.57점)과 조선닷컴(62.65점)이 그 뒤를 이었고 문화일보와 한겨레는 50점에도 못 미쳤다.

세계 표준으로 쓰고 있는 ‘W3C 웹 콘텐츠 접근성 지침 1.0’으로 평가한 결과도 큰 차이를 보이지 않았다. 조인스닷컴과 매일경제가 마찬가지로 1, 2위를 차지한 반면 세계일보와 인터넷한겨레가 각각 3위와 5위로 뛰어오른 것이 큰 차이다. 여기에서는 연합뉴스와 문화일보의 점수가 상대적으로 뒤처졌다.

이 같은 결과는 케익소프트가 지난해 4월 조사한 순위와도 큰 차이가 없다. 지난해에도 조인스닷컴이 87.08점으로 1위, 매일경제와 연합뉴스가 각각 68.42점과 66.26점으로 2, 3위를 기록했고 한겨레와 서울경제가 맨 뒤로 처졌다. 다만 전반적으로 점수가 눈에 띄게 향상됐지만 연합뉴스는 오히려 점수가 많이 깎였다.

점수와 무관하게 대부분 언론사닷컴 사이트들이 여전히 키보드만으로 웹 서핑이 불가능했고 조인스닷컴을 제외한 다른 사이트들은 특히 이미지와 스크립트의 대체 텍스트를 거의 제공하지 않고 프레임에 제목을 붙이지 않는 등 핵심적인 웹 접근성 지침을 무시하고 있는 것으로 나타났다.

미국에서는 재활법에 웹 접근성 관련 항목을 명시하고 공공 사이트에 이 지침을 준수할 것을 의무화하고 있다. 웹 접근성 문제로 기업이 소송당하는 일도 흔하다. 우리나라에서도 장애인차별금지법에 “전자정보를 이용하고 접근하는데 정당한 사유 없이 장애를 고려하지 않은 기준을 적용해 불리한 결과를 초래하는 차별행위를 해서는 안 된다”고 규정돼 있다.

당장 다음 달부터 시행되는 이 법 조항에 따르면 국내 상당수 언론사닷컴은 소송을 당할 위험에 직면해 있는 셈이다. 언론사닷컴 뿐만 아니라 국내 대부분의 웹 사이트들이 마이크로소프트 인터넷 익스플로러에 최적화돼 있어 다른 운영체제나 웹 브라우저 사용자들은 심각한 불편을 호소하고 있는 상황이다.

웹 접근성은 한국정보문화진흥원 등에서 누구나 쉽게 무료로 평가할 수 있다. 한국 웹 접근성 그룹에서 활동하고 있는 LG전자 이러닝솔루션그룹 신승식 과장은 “웹 접근성이란 컴맹이 봐도, 누가 봐도, 장애인이 봐도 직관적으로 이해하고 교육받지 않아도 쉽게 쓸 수 있게 하는 것”이라고 말했다.

신 과장은 “웹 접근성의 핵심은 웹 사이트와 어플리케이션이 다양한 사용자의 요구와 기호, 환경에 유연하게 대처할 수 있도록 디자인하는 것”이라고 강조했다. “이러한 유연함이 느린 인터넷 회선 속도나 팔이나 손가락이 다친 환자 등 특정 환경에 처한 일반인에게도 이익을 준다”는 이야기다.

이정환 기자 black@mediatoday.co.kr