레이블이 웹표준인 게시물을 표시합니다. 모든 게시물 표시
레이블이 웹표준인 게시물을 표시합니다. 모든 게시물 표시

2009년 2월 6일 금요일

[CSS]메일링 코딩 스타일

· 메일링 코딩스타일 적용테스트 (외부스타일 제외)


메일링 코딩을 할때 여러분들은 웹표준에 맞춰 코딩을 하는지요?

메일링은 웹페이지로 볼수 없으며, 구조화를 시킬 필요도 없고, 시킬수도 없다는게 제 개인적인 생각입니다.
그래서 몇가지 테스트를 해보았습니다. 사실 꽤 오래전에 테스트를 한건데 이제서야 공유를 합니다.

css 를 부르는 방법은 크게 3가지로 분류 됩니다, (외부스타일, 내부스타일, 인라인스타일)
여기서 외부스타일은 메일제공 사이트와 class 충돌문제가 발생할수 있어 테스트 항목에서 제외시켰습니다.
총 테스트 방법은 3가지(옛날방식, 인라인방식, 내부스타일) 이며, 자주이용하는 메일 9개만 테스트 해보았습니다.


  옛날방식 인라인스타일 내부스타일 비고
Daum O O O  
네이버 O O X 이미지를 첨부파일로 인식, 내부스타일 적용안됨
야후 O O O  
파란 O O O 이미지를 첨부파일로 인식
구글(G메일) O X X 스타일 적용안됨
엠파스 O O O  
네이트 O X X 스타일 적용안됨, 이미지를 첨부파일로 인식
코리아닷컴 O O O 이미지를 첨부파일로 인식
Outlook Express O O O  


● 간단하게 3가지 방식을 설명을 드리자면

- 옛날방식 : 배경이미지나, 폰트사이즈, 컬러등을 css 로 입히는 방식이 아닌 엘리먼트 안에 직접적으로 해당소스를 삽입하는 방법입니다. ex)<td background="http://www.webmini.net/test_bg.gif">
- 인라인스타일 : 배경이나, 폰트사이즈, 컬러등을 해당 엘리먼트 안에 스타일을 주는 방식입니다. ex)<td style="background:url(http://www.webmini.net/test_bg.gif) no-repeat;">
- 내부스타일 : 해당 페이지 안에 style 소스를 선언후 class 로 불러오는 방식입니다. ex) .wrap --> <td class="wrap">

테스트 결과 네이버, 구글, 네이트는 내부스타일과 인라인스타일이 적용 되지 않았습니다.
스타일이 적용되지 않는 이유는 스타일 충돌이 생겨 메일사이트가 깨지는 경우를 대비해서 해당사이트에서 차단한듯 보여집니다.
위에서도 알수 있듯이 공통적으로 동일하게 보여지게 하기 위해선 옛날방식 (table 방식) 으로 진행이 되어야 하며, 스타일 적용이 되지 않는 곳이 있기에 div 방식은 피하는것이 좋을듯 보여집니다.

작성자: 시간: 댓글 7개:
라벨: , , , ,

[웹표준]믹시의 추적버튼에서 &(엔퍼센트) 에러

Markup Validation Service 에서 유효성 검사를 해보면 &(엔퍼센트)로 된부분은 전부 에러로 잡아냅니다.
파이어폭스 부가기능중에 'html validator' 로 확인해도 에러로 잡아내며, 다음과 같이 사용하라고 알려줍니다.
 
&amp;


여러 사이트를 보면 & 로 되어있는데, 제가 개발자가 아니라서 & 의 사용용도는 정확하게 모르겠습니다.
믹시를 예로 들자면 아래와 같이 추적버튼의 링크를 제공해줍니다.



제공해준 이미지경로 주소를 보시면 <img src='http://mixsh.com/widget/mr/but.html?p=haY51hVrovetsWaHO9uTcTVC6QR5J3CTC92G18h0Qa4%3D&t=12' alt='믹시' border='0' />
&(엔퍼센트)가 들어감을 알수 있습니다.
해당소스를 넣고 유효성 검사를 해보면 & 부분은 모두 에러로 잡습니다.


그래서 'html validator' 에서 알려준데로 추적버튼 소스에 & 대신 &amp; 로 수정하고 유효성검사를 해보았습니다.
수정된 소스는 다음과 같습니다.

<img src='http://mixsh.com/widget/mr/but.html?p=haY51hVrovetsWaHO9uTcTVC6QR5J3CTC92G18h0Qa4%3D&amp;t=12' alt='믹시' border='0' />



음.. 결과는 통과했다고 나오네요.
& 를 &amp; 로 바꾸어 사용하는게 맞는거 같긴한데, 개발자분들은 어떻게 생각하시는지요?


작성자: 시간: 댓글 5개:
라벨: , , , , , , ,

2008년 10월 1일 수요일

[사이트]css로 만든 메뉴모음 사이트

 

 http://www.dynamicdrive.com/style/

 

css로 만든 라이브러리가 많으니, 참고하시면 많은 도움이 될듯하네요.^^

작성자: 시간: 댓글 없음:
라벨: , , , , , ,

2008년 9월 21일 일요일

[웹표준]DTD에 따른 브라우저 박스크기변화

먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.

크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.

테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.

먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>




보시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다.


다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.

소스는 다음과 같습니다.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>




이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.

오페라와 사파리(3.1) 역시 파폭과 동일하게 보여지며 DTD와 관계없이  padding 값과  border 값만큼 지정한 박스보다  커짐을 알수 있었습니다.

 



역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^
작성자: 시간: 댓글 2개:
라벨: , , , ,

[웹표준]웹표준 저작 프로그램

웹표준과 저작 프로그램
제프리 젤드만의 웹표준 가이드에서는 이렇게 쓰여져 있습니다.

브 라우저 전쟁의 절정이었던 시점에서 개발된 어도비(이전의 매크로미디어)사의 드림위버너 Golive처럼 시장을 장악한 전문가용 비주얼 에디터들은 3.0과 4.0 브라우저에 최적화된 마크업과 코드를 생성하여 브라우저의 비호환 문제를 처리했습니다.

브 라우저가 비표준이고 유효하지 않은 HTML 태그로 실행될 때 드림위버와 GoLive는 브라우저가 원하는 대로 태그를 만들어 주었습니다. 각 브라우저가 자신들만의 호환성 없는 DOM이 있거나 독자적인 스크립트 언어로 작동된다면, 드림위버나 GoLive는 그것에 따라서 코드를 만들었습니다.

이런 방식을 사용한 드림위버와 GoLive가 마크업과 코드를 직접 사용하는 개발자들보다 더 잘못했다는 것은 아닙니다. 2장에서 설명한 바와 같이 표준이 개발되는 중이었고, 브라우저들이 지원을 제대로 하지 않을 때라서 사이트 제작자도 어쩔 수 없었습니다. '원하는 대로 주라'는 말은 그때는 말이 됐지만 이제는 적절한 전략이 아닙니다. 브라우저가 표준을 지원하자 드림위버나 GoLive 같은 프로그램들도 같이 변하게 되었습니다. 이제는 프로그램들도 표준을 지원합니다.

전문 비주얼 웹편집의 선두 주자인 드림위버로 만든 사이트의 표준화 지원과 접근성을 향상시키는 노력의 일환으로 매크로 미디어의 기술자들과 같이 일하기 위해 2001년 WaSP의 Dreamweaver Task Force 가 생겨났습니다.
이 그룹의 주요목표는 아래와 같습니다.

* 드림위버는 '격이 다른'유효한 마크업을 만들어야 한다(유효한 마크업은 반드시 표준 태그와 요소만 사용해야 하고 에러가 없어야 한다.)
* 드림위버는 유효한 DTD를 추가하여 XHTML과 HTML 버전을 선택할 수 있게 해줘야 한다 (DTD-Document Type Definition은 브라우저에게 어떤 종류의 마크업으로 웹 페이지를 만들었는가를 알려준다.)
* 드림위버는 문서의 DTD를 엄격히 따르고, 이에 따라서 마크업과 코드를 만들어야 한다.
* 드림위버는 모두에게 접근성 있는 웹 문서를 사용자가 쉽게 만들 수 있게 해야한다.
* 드림위버는 CSS2를 정확하게 표현하여 CSS로 만들어진 페이지가 드림위버의 비주얼 환경에서 작동이 되어야 한다.
* 드림위버는 사용자의 허락 없이 inline 스타일을 추가하여 유효한 CSS 레이아웃을 방해아지 않아야 한다.
* 사용자가 드림위버로 만든 페이지가 유효하고 높은 수준의 접근성을 이룰 수 있다는 믿음을 가질 수 있어야 한다.

이 목표들에 더해서 추가적인 목표들이 2002년 5월 드림위버 MX가 출시되면서 생겨나게 되었습니다.
드림위버 MX를 만드는 데 도움을 주었던 Dreamweaver Task Force는 제품을 평가 하면서 아래 사실들을 발견하게 되었습니다.

* 훌류한 유효한 마크업을 생산해 냈다.
* 사용자가 접근성 있는 사이트를 만들 수 있게 도와주었다.
* (CSS배치에 다소 문제점이 있긴 하지만) 적합한 수준의 정확도로 CSS2를 표현했다.
* CSS 레이아웃을 해치지 않았다.
* 유효한 XHTML 과 CSS(자동으로 표준지원 검사를 하여)사용을 권장했다.
* 웹표준을 중요하게 생각하고 장려했다.

개인 적으로도 드림위버를 웹표준 저작 툴로 추천하는 바입니다.
참고로 외국에서 실시된 설문조사에서 가장 많이 사용하는 웹저작 툴로도 드림위버를 꼽고 있습니다.
http://webdesign.about.com/gi/pages/poll.htm?linkback=http://webdesign.about.com/b/a/253457.htm&poll_id=2822610066

물론 우리나라에서는 에디터플러스도 많이 사용되긴 하지만, 위에 설문조사에서 보듯이 웹퍼블리셔들이 선호하는 저작 프로그램임은 사실인거 같습니다.
작성자: 시간: 댓글 없음:
라벨: , ,

2008년 9월 20일 토요일

[웹표준]웹표준의 장점

1. 수정과 관리 용이
지금까지 새로운 버전의 브라우저가 출시되거나 사이트 디자인이 큰폭으로 리뉴얼될 때마다 제작자가 페이지를 새로 제작해야 했다. 또 여러 사람이 사이트를 관리하는 경우 서로마다 제작자가 다른 마크업 때문에 불필요한 혼란이 생기는 문제도 있었다. (X)HTML로 콘텐츠를 올바르게 구조화하고 CSS로 시각표현을 통일하여 제어하면 페이지 제작 부담이 크게 줄어든다.

2. 웹 접근성 향상
올바른 (X)HTML과 CSS로 다양한 브라우징 환경에 대응하는 접근 가능한 웹페이지를 만들수 있다. 중요하게 생각할 것은 장애자와 노인을 배려한 웹페이지는 결과적으로 모든 사람에게 높은 접근성을 제공하는 페이지가 된다는 것이다.

3. SEO(검색엔진 최적화) 대책
검색엔진의 크롤러는 (X)HTML소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화되고 깨끗하게 정리된 소스는 검색로봇이 잘 검색할 수 있다. 부족한 SEO는 비즈니스 기회를 잃고 기회 손실을 가져오기 때문에 상당히 중요한 부분이다.
SEO는 웹표준과도 관계가 깊다. 단적으로 문서구조가 명확한 웹페이지를 만드는 게 바로 SEO이다. 예컨대 타이틀(h1~h6 요소)사용법, 텍스트 강조(strong 요소) 등 웹표준에 기반을 둔 적절한 마크업을 하는 것이다. '인간뿐만 아니라 검색엔진에게도 친절한 페이지'를 만드는 것이 SEO의 주안점이다.

4.파일 사이즈 축소와 서버 저장 공간 절약
소스를 효율적으로 작성하면 파일 크기를 줄이고 서버 저장 공간을 절약할수 있다. 동시에 화면표시에 걸리는 시간이 줄고 서버 부담도 덜 수 있다.

5. 하위호환성과 상위호환성 확보
올바른 (X)HTML과 CSS로 페이지를 제작하면 오래된 브라우저에서도 콘텐츠가 적절하게 표시되고 상위 호환성과 상호운용성이 확보된다.

자료출처 : 웹표준 교과서 내용일부..
작성자: 시간: 댓글 없음:
라벨: , , ,

2008년 3월 21일 금요일

[잡담]DTD에 따른 브라우저 박스크기변화

먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.

크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.

테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.

먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>

사용자 삽입 이미지
보시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다.


다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.

소스는 다음과 같습니다.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>


사용자 삽입 이미지
이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.

오페라와 사파리(3.1) 역시 파폭과 동일하게 DTD와 관계없이  padding 값과  border 값만큼 지정한 박스보다  커짐을 알수 있었습니다.

사용자 삽입 이미지
사용자 삽입 이미지
역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^
작성자: 시간: 댓글 없음:
라벨: , , , , ,

2008년 1월 23일 수요일

[도서]제프리 젤드만의 웹표준 가이드

사용자 삽입 이미지
제프리 젤드만의 웹표준 가이드
웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택(2ed)

제프리 젤드만 (Jeffrey Zeldman) 은 누구인가?
제프리 젤드만은 최초의 웹디자이너 중 한 명이고 전문가들 사이에서 강력한 영향력을 지녔습니다.

1995년 전 아트 디렉터이자 카피라이터인 그는 최초로 가장 영향력 있는 개인 웹 사이트 중의 하나 (www.zeldman.com)을 만들었고웹 디자인의 방법과 원칙에 대한 유명한 튜토리얼을 쓰기 시작했습니다.

1998년 마이크로소프트와 넷스케이프에서 각각 자기들의 브라우저에서 같은 기술을 지원하도록 설득한 기초 연합인 The Web Standards Project(www.webstandards.org)를 공동 설립했습니다. 같은 해 A List Apart(www.alistanart.com) 'for people who make websites' (웹 사이트를 만드는 사람들을 위하여)를 만들기 시작했습니다. 그리고 이 분야해서 가장 존중 받고 영향력 있는 잡지가 되었다고 합니다. (책 저자 소개 일부...)

목차보기

오늘 점심시간에 코엑스에 잠깐 다녀왔는데, 우연치 않게 서점을 발견해서 전부터 구매하고 싶었던 '제프리 젤드만의 웹표준 가이드'를 질렀습니다.

온라인에서는 28.000원에 판매가 되던데 저는 기다리는게 싫어서 32.000원에 질렀습니다.
웹표준을 본격적으로 접한게 작년 같은데 공부하면 할수록 어려운게 이쪽 분야가 아닌가 하는 생각이 듭니다.

이미 예약판매때부터 미리 구매한 사무실 대리님이 계셔서 잠시 빌려 봤었는데 내용이 좋은거 같아 저도 구매를 하게 되었습니다. 웹표준 관련서적은 구매를 많이 했었는데, 책만 보면 졸려서 인지, 필요할때만 살짝 펼쳤는데, 이번참에 끝까지 읽어보고 개념부터 다시 잡아야 겠다는 생각이 듭니다.

이쪽 분야에 종사하시는 분들은 꼭 읽어 보시기 바랍니다.^^

작성자: 시간: 댓글 1개:
라벨: , , , ,

2007년 7월 7일 토요일

[잡담]!important와 언더바 핵

한 규칙 안에서 윈도우용 IE 6 이하 버전을 위한 선언과 이외의 다른 브라우저를 위한 선언을 각각 사용하고 싶을 경우가 있습니다. 이를 위해서 속성에 이스케이프 문자를 사용하는 핵을 이용하거나 아니면 !important 또는 언더바 핵을 이용할 수 있습니다.

윈도우용 IE 6 이하 버전에서는 한 규칙안에서 여러 개의 속성을 사용할 수 없기 때문에
 !important 핵을 사용하면 제대로 동작합니다.

#nav {
  position: fixed !important;
  position: static;
}

윈도우용 IE 4~6 버전은 첫 번째 선언을 무시하고 두 번째 선언을 적용합니다. 나머지 브라우저는 
!important 키워드가 사용된 첫 번째 규칙을 적용합니다. !important 키워드를 쓰면 캐스케이드 우선 순위가 높아지기 때문입니다.

 !important 핵과 유사한 방법으로는 언더바 핵이 있습니다. 속성명 앞에 언더바를 붙이면 표준 호환 브라우저에서는 이 선언을 무시하고 해당 속성을 인식하지 않습니다. 하지만 윈도우용 IE 6 이하 버전의 브라우저는 언더바 문자를 무시하고 해당 속성을 인식합니다. 다음 예제 코드의 경우, 최신 브라우저는 포지션을 fixed로 지정하고 두 번째 선언을 건너뛰는 반면, 윈도우용 IE 4-6는 언더바 문자를 무시하고 첫 번째 규칙을 재지정하게 되어 포지션을 static으로 지정하게 됩니다.

#nav {
  position: fixed;
  position: static;
}

css 마스터 전략 책내용 중에서...

css hack 소스를 보실려면 http://www.webmini.net/24918 글을 참조해주세요.
작성자: 시간: 댓글 2개:
라벨: , , , , , ,

2007년 3월 21일 수요일

[잡담]웹표준이란?

웹표준이란 :

웹표준이란 극히 어렵게 생각할 필요는 없습니다
서울 사람은 서울사투리를 전라도 사람은 전라도 사투리를 충청도 사람은 충청도
사투리를 경상도 사람은 경상도 사투리를 쓰고 있습니다

이는 지역에서 생활하는 이라면 아주 친근하며 또한 당연한 일입니다
하지만 타지역에서 온 사람이 그 지역의 사투리를 알아 듣기엔 다소 긴장을
해야할 때가 있습니다 쓰는 표현법과 억양이 틀리기에 언어 소통에 일시적
장애를 가질 수 있기 때문입니다

그래서 현재 수도인 서울을 기점으로 교양있는(?) 사람들이 쓰는 일반적인
언어를 표준어로 사용 그 표준어를 이용하면 의사전달에 큰 불편함 없이
서로의 의견을 대화할 수 있습니다

이와 마찬가지로 웹에도 여러 종류의 브라우져들이 있습니다
우리가 흔히 쓰는 익스 플러러와 함께 요즘 다시 부활을 꿈꾸는
네스케이프 네스케이프의 오픈소스를 이용 열린 유저들의 참여로 탄생한
오픈소스인 불여우 오페라사의 오페라브라우져등 주위를 조금만 둘러보면
참 많은 브라우져들이 존재합니다
물론 이외에도 다른 부라우져들이 많이 있습니다만 현재 익스 외에 사용되어지는
타 브라우져의 점유율에서 위의 네스케이프 불여우 오페라등이 많은 부분을
찾이하는 대표적인 브라우져입니다

위에서 지방에 따라 각기 다른 사투리를 구사한다고 했듯이
이들 브라우저들은 각기 자신의 부라우져에 맞는 환경을 제공하기에
익스에서 보는 모습과 불여우에서 보는 모습 오페라에서 보는 모습등이
약간의 차이들이 있으며 또는 지원되지 않는 기능들이 다소 존재합니다
대표적인 예로 익스에서의 스크롤바 색상지원은 타브라우져에선 되지 않습니다

세상에는 많은 사람들이 있습니다
이들은 저마다 편한 웹브라우져로 웹서핑을 즐기고 있으며
또한 각기 다른 운영체제와 컴퓨터 사양 그리고 컴퓨터를 사용하는 이의
건강성 또한 서로 틀립니다

웹써핑을 하는 사람중엔 시력이 좋지 않거나 혹은 아예 볼수 없는 장애인들도
있을것이며 색약 혹은 손이 불편해서 마우스를 사용할 수 없는 사람들도
있을것입니다

만약 웹프로그래머가 혹은 홈페이지의 제조자가 익스환경만을 고려해
콘텐츠를 제작하게 된다면 타 환경인 모질라 계열(불여우 네스케이프)등에서는
자신이 의도한 바를 전달할 수 없는 상태가 될수도 있습니다
그 예로 현재 모 커뮤니티는 익스외에는 접근허용을 하지 않도록 (엑티브 엑스의 사용상 문제 -엑티브 액스는 익스플러러의 기능성중 제일 오남용되는 부분입니다 -) 세팅이 되어 있습니다
이는 결국 차별일 수 밖에 없습니다

표준말을 쓰면 큰 불편없이 서로의 의견을 전달할 수 있듯이
웹에도 웹표준이 있습니다

웹표준을 거쳐 나온 권고안을 기초로 소스를 만들게 되면 각기 다른 환경에서도
최소한의 의사전달은 명확히 할수 있으며 css(캐스캐이드 스타일 시트)를
통해 레이아웃의 틀어짐을 조절하여 각 브라우져에서 보여지는 모습 또한
비슷하게 맞출수가 있습니다

웹표준에서 지향하는 것은 간단 명료합니다
첫째 불필요한 태그의 오남용을 막고 표준화(권고안에 의한)된 태그들을
제때 제곳에 의미 적절하게 사용할 것
시작 태그가 있으면 닫음 태그가 있을것

둘째 모든 요소를 제외한 상황에서도 그 문서의 의미전달이 확실할 수 있도록
마크업을 통한 배열을 잘할 것
- 스크립트의 작동 중지 혹은 이미지의표현을 사용하지 않고 접근했을때
스타일 시트를 꺼놓고 봤을때 등 기타 외부적인 요소를 통해서도
해당 문서의 마크업이 잘되었다면 읽기 편한 구조적인 배열로 보여서
의미 전달엔 이상이 없습니다 -

세째 되도록 표현 기법들은 스타일 시트에서 정의해서 쓸수 있도록하며
내부적인 자바 스크립트 또한 되도록 문서의 헤드 부분에 기술해서 쓸수 있도록
할것 이는 문서의 간결성외에도

이를 이용하는 사람이 시력을 잃은 장애인일
경우 도움이 될수 있습니다

시력을 잃은 장애인들이 흔히 웹써핑을 할수 있도록
도움을 주는 것이 스크린리더란 장치입니다

문서를 스크린 리더가 읽어서 말을 해주는 장치입니다
만약 중간 중간 군더더기가 많이 들어 있거나 혹은 잘못된 표현

또는

잘못된 표기등이 있을 경우 스크린 리더기는 엉뚱한 정보를 사용자에게
말해줄 수 도 있으며 필요없는 부분을 읽음으로서 사용자에게 혼란을 가중
시키며 포인터 부분이 원하는 곳에서 벗어날 수도 있습니다
( 문서 중간에 쓰인 자바 스크립트의 잘못된 방법에 의해 )
눈이 보이는 이는 별 상관 없겠지만 안보이는 이들에겐
처음부터 다시 읽거나 해야 하는 부담감이 있을수 있습니다

위에서 열거한 세가지가 현재 웹표준기관인 http://www.w3.org/
에서 대체적으로(?) 원하는 기준안들입니다

아래 링크로 들어가보십시오.
http://forums.mozilla.or.kr/viewtopic.php?t=3960
시각장애인 1급 판정을 받은 분이 웹표준에 대해 작성하신 글입니다.

이런 분들을 위해서라도 웹표준을 지켜야 할거 같습니다.
 
출처 : 예뜨락님 http://repter.ddam119.com/

작성자: 시간: 댓글 없음:
라벨: , , , , , ,

2007년 3월 3일 토요일

[잡담]daum 웹인사이드 시스템 환경

다음 웹인사이드의 시스템 환경 분석을 해보았다.
기간 : 2007.2.25 ~ 2007.3.2     최종로그분석 : 2007.03.02. 01:33:52
사용자 삽입 이미지

운영체제

사용자 삽입 이미지

이미지로 보듯이 window xp가 84.6%를 차지하고 있었다. windows vista 2.3% 아직까지 비스타 사용자는 적음을 할수 있었다. (비스타가 50%이상을 차지 하기 까지 몇년은 걸릴거 같다는 생각이 든다.)

이유인즉 비스타는 현재로서 고사양 컴퓨터를 요구 하기때문에 50%이상의 사용자가 나오기 까지는 얼만큼 사용자들이 컴퓨터 업그레이드를 빨리하는냐에 따라 그시기와 비례한다고 생각을 감히 해본다.


해상도

사용자 삽입 이미지

불과 얼마전까지만해도 1024 사용자들이 더 많았는데 1280 해상도의 사용자들이 많아지는걸 알수 있다.
사이트를 만들때 1024 (17인치 모니터 기준) 전에는 15인치 모니터 사용자들이 많아서 800에 사이트 해상도를 맞춰서 작업을 했었는데 이제는 1024 에서 1280 까지 점점 해상도가 높아짐을 알수 있다.

하지만 아직까지 1024 * 768 사용자들이 비중이 적지 않기 때문에 사이트 제작시 1024에 최적화해서 작업해야 됨을 알수 있다.

이것을 보았을때 추리 할수 있는것이 CRT 모니터 사용자에서 LCD 모니터 사용자로 서서히 변해감을 알수 있다. 디자이너는 무조건 CRT 로 작업해야하는 시대도 서서히 넘어간다. 이유인즉 LCD 모니터 사용자가 적지 않기 때문이다.

그리고 삼성이나 엘지 또한 CRT는 PC방용으로만 제품을 생산한다고 한다. 두업체 모두 LCD에 중점을 두고 있기에 대체적으로 CRT 모니터는 색상과 화질이 PC방 게임용이기에 디자인하기에는 좋지않다.

위에 글은 몇달전 엘지 CRT 모니터를 30만원정도에 구매했다가(PC방용 이므로 대체적으로 가격이 싸다.) 색상과 굴곡현상으로 인해 산지 3일만에 LCD로 교환한적이 있었는데 LG AS 직원이 직접해준 말이었다.

물론 CRT 모니터가 다 나쁜건 아니며 가격이 비싼 CRT는 괜찮다는건 의심할 필요가없다.


웹브라우저

사용자 삽입 이미지

Internet Explore 7.0 사용자는 15.9% 밖에 없었다. 아직까지는 그이하 버전이 대부분을 차지했고, 파이어폭스가 그뒤를 이었다. Firefox 가 점점 비중이 높아짐을 짐작해서 웹표준에 맞춰 코딩작업을 해야 할것을 알아야한다.

하지만 이분석은 blog.webmini.net 에 몇일간의 분석이기 때문에 비중이 상당히 차이가 있다는것을 알고 넘어가자.

방문자 수가 많은 타 사이트를 분석했을경우 Internet Explor 6.0 이 90% 이상의 점유률을 차지하고 있었다.
Internet Explor 6.0 이 아직 까지는 비중이 엄청크다.
작성자: 시간: 댓글 5개:
라벨: , , , , , , , , , ,

2007년 3월 1일 목요일

[도서]css 마스터 전략

최신 CSS 기법을 다루는 CSS 마스터가 되기 위한 필독서!
2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러 2위!

가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다.

이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자.

최신 CSS 기법 및 활용팁 총정리
놓치고 있었던 CSS 기본 개념 다시 다지기
브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법
유명 CSS 전문가가 직접 만든 실전사례 및 예제

사용자 삽입 이미지
이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다.
기본 사항을 살펴본 후, 각 장에서는 CSS 기반 디자인에서 사용되는 특징을 다룹니다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 독자들이 수행하고 있는 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것입니다.

여러 브라우저 간에 다르게 동작하는 현상 때문에 CSS 작업을 하는 사람들이 많은 고생을 합니다. 이 책에서는 이런 문제를 해결할 수 있는 CSS 핵, 필터, 버그 해결방법을 설명합니다. 또한 이미지 대치 기법, 링크 스타일 만들기, 폼과 리스트 모양 꾸미기, 순수하게 CSS만으로 만드는 레이아웃을 비롯한 많은 정보를 제공하고 있습니다. 이렇게 다룬 모든 기법을 종합해서 CSS 디자이너로 유명한 사이먼 콜리슨과 캐머론 몰이 직접 작성한 2개의 실전사례 예제를 부록에 포함했습니다.

출처 : 네이버

앤디 버드 (Andy Budd)

앤디는 영국 브리틍에 거주하는 사용자 경험 디자이너이자 웹 표준 개발자입니다. 웹 디자인 컨설팅 회사인 클리어레프트 (http://www.clearleft.com) 사의 크리에이티브 디렉터로서, 매력적이고 접근성 높은 웹 표준 호환 웹 사이트 구축 작업을 즐기고 있습니다. 그의 홈페이지는 www.andybudd.com 이며 최근 웹 디자인 관련 이슈에 대해서 지속적으로 글을 올리고 있습니다.

사용자 삽입 이미지

www.clearleft.com


사용자 삽입 이미지

www.andybudd.com


앤디는 국제 디자인 컨퍼런스, 워크샵, 교욱 강사로 활동하고 있으며 영국의 첫 번째 웹2.0 컨퍼런스를 진행하기도 했습니다. (http://www.dconstruct.org), 업계에 필요한 수준 높은 교육에 대한 열의 때문에 스킬스왑 (http://skillswap.org)이라는 교육/네트워킹 커뮤니티를 운영하고 있기도 합니다. 또한 웹 표준에 대한 인식을 넓히고 장려하기 위한 웹 표준어워드 (http://www.webstandardaswards.com) 준비를 돕고 있습니다.

사용자 삽입 이미지

www.dconstruct.org

사용자 삽입 이미지

www.webstandardsawards.com


웹 사이트 구축 업무 외에 여행 사진 촬영을 즐기고, 열대 해변에서 다이빙하는 것을 가장 좋아해서 PADI 다이빙 교육 자격증을 보유하고 있으며, 상어 조련사 경험도 있다고 합니다.

캐머론 몰 (Cameron Moll)

캐머론은 업계에 가장 많이 알려진 뉴 미디어 디자이너 중 한 명으로 다양한 웹 디자인, 우아한 인터페이스, 깔끔한 마크업 작성에 뛰어난 실력을 지니고 있습니다. 수많은 웹 사이트의 디자인과 리뉴얼에 참여하면서 보여준 다양한 기법은 많은 사이트에 영향을 줬습니다. 캐머론이 지닌 마케팅 경험 배경과 디자인 감각은 새로운 비주얼 경험을 제시할 수 있는 역량이기도 합니다.

사용자 삽입 이미지

cameronmoll.com


NPR (National Public Radio), 커뮤니케이션 아트, 비어 등 유명한 웹 사이트 작업을 통해 인정을 받았습니다.
그의 개인 사이트인 cameronmoll.com 은 관계 깊은 대화를 통해 디자인 방법을 제공하고 있으며 그의 작업 소스 파일을 다운로드 받을 수 있습니다.

사이먼 콜리슨 (Simon Collison)

사이먼은 Agenzia(http://www.agenzia.co.uk)의 리드 웹 개발자 입니다. 그는 레코드 회사, 유명 음악 아티스트, 비주얼 아티스트, 일러스트레이터를 위한 수많은 웹 프로젝트를 수행했습니다. 사이먼은 이런 작업을 하면서 모든 웹 사이트에서 웹 표준에 기반한 접근성과 사용성을 중시한 제작방법이 중요해 질 것을 예견했습니다. 사이먼은 CSS 기반의 웹 사이트인 스타일갈라에 주기적으로 리뷰를 올리고, 그의 개인 블로그인 www.collylogic.com에 웹 표준, 음악, 영화, 여행과 같은 다양한 이야기를 올리고 있습니다.

사용자 삽입 이미지

www.agenzia.co.uk

사용자 삽입 이미지

www.collylogic.com


컴퓨터 작업을 하지 않을 경우에는 펍이나 무료 공연에 가는 걸 즐깁니다. 음악을 매우 좋아해서 최신 음악 100곡 이야기를 끊임없이 하거나 1979년부터 지금까지의 영국 인디 음악역사에 대해 이야기를 들려줄지도 모릅니다. 런던을 비롯한 다양한 곳에서 생활했으며 현재는 노팅검에서 엠마와 지기라는 고양이와 함께 살고 있습니다.

-책 내용 저자소개 일부-

정리도 잘되어있고, 요즘 웹 표준에 맞는 CSS 사용법에 대해 자세히 나와있다는 생각을 합니다.
작성자: 시간: 댓글 2개:
라벨: , , , , , , ,

2007년 2월 28일 수요일

[웹표준]DIV와 CSS를 이용한 웹 표준코딩의 장점

이글은 nhn 정찬명님의 글을 옮겨 싫은 자료입니다.

table_div.zip


웹 표준코딩을 준수 했을때 어떤 가시적인 효과가 있는지 직접 검증하기 위하여 한가지 실험을 하였습니다. 첨부된 파일은 동일한 화면을 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://naradesign.net/wp/2007/02/03/113/

작성자: 시간: 댓글 2개:
라벨: , , , , ,
피드 구독하기: 글 (Atom)