오늘은 메일 페이지 작업하실 때 도움될 만한 Plugin이 있어 소개하고자 합니다.

메일 페이지를 작업할때의 유의할 점은 어떤 메일 플랫폼에서건 레이아웃이 깨지지 않아야 한다는 것인데요,

아웃룩 2007이 워드2007의 렌더링 엔진을 사용하여 이전보다 까다로운 정책을 가지고 출시를 했기 때문에 2003버전 보다도 표현할 수 있는 기능이 제한 적이게 되었습니다.

• no support for background images (HTML or CSS)
• no support for forms
• no support for Flash, or other plugins
• no support for CSS floats
• no support for replacing bullets with images in unordered lists
• no support for CSS positioning
• no support for animated GIFs

안녕하세요. 웹표준화팀 한혜진 입니다.

팀내에서는 오래 전부터 웹접근성TF를 진행하고 있습니다.
각자 여러가지 주제를 가지고 연구를 하고 있는데요. 저는 스크린리더에 대해 연구하고 있습니다.

말로만 들어봤지 실제로 어떻게 읽어주는지 시각장애인들은 주로 어떤식으로 사용하는지 궁금한게 너무 많았습니다.
그래서 스크린리더중에 센스리더라는 제품을 PC에 설치해놓고 이것 저것 읽어보기도 하고
우리가 개선해야 할 점, 센스리더에서 개선해야 할 점 등에 대해 팀원들과 센스리더 측에 제안을 하기도 하고  제안을 받기도 합니다. 

스크린리더는 화면의 내용, 자신이 입력한 키보드 정보, 마우스좌표 등을 음성으로 알려주어
시각장애인이 컴퓨터를 사용할 수 있도록 도와주는 프로그램입니다. 

얼마전에 센스리더 프로페셔널 버전이 발표 되었습니다.

곧 파워버전도 최신버전인 v1.5로 자동 업그레이드 된다고 하네요.
프로페셔널 버전과 파워v1.5의 인터넷사용기능은 동일하고, 다만 프로페셔널 버전은 응용프로그램을 더 잘 이용할 수 있도록 많은 부분이 업그레이드되었다고 합니다.

예전버전에서는 플래시도 읽어주지 않았고, display:none으로 숨겨놓은 UI를 읽어주는 등 불편한 점이 많았는데요.
프로버전과 파워v1.5 에서는 정말 많은 부분이 개선되었습니다.

그래서 아래 내용들을 어떻게 읽어주는 지 테스트하고 정리해보았습니다.

1. 헤딩간이동
2. 테이블
3. 리스트
4. 인풋박스 등의 폼콘트롤
5. label이 있을 때와 없을 때의 차이
6. display:none으로 숨겨둔 오브젝트
7. longdesc
8. 이미지맵
9. iframe
10. flash
11. flash에서 대체텍스트 적용방법
12. accesskey
13. skip네비게이션
14. 롤링리스트
15. 변하는 콘텐츠
16. 앞으로 센스리더에서 수정될 내용

 내용이 너무 길어 다른 페이지에 올려놓았습니다. 아래 URL로 들어가시면 보실 수 있습니다.

센스리더 최신 버전 리뷰 
http://html.nhndesign.com/?guidelines/accessibility/ssreader

팀내 공유를 목적으로 작성한 문서로 오류나 기타 문제점들에 대한 수정이 다소 미흡할 수 있으나,
센스리더를 잘 모르시거나 웹접근성을 향상시키기 위해 페이지 제작을 하는 분들을 위해 도움이 될만한 문서라고 판단하여
외부에 공개하는 것입니다.
다소 부족한 점이 있더라도 양해해주시면 감사하겠습니다.

그럼 행복한 하루 보내세요.

감사합니다.

엑스비전 테크놀러지에서 6월 30일날 센스리더 프로페셔널을 출시했다고 합니다. 이번 글은 센스리더의 새로운 버전으로 인해 수정 및 개선되는 사항에 대해 정리 하려고 합니다.

먼저 지난 이야기를 조금 하자면 이미지의 alt 텍스트가 비어있을경우 센스리더는 파일명 읽어주는 문제가 있었습니다. 이 때문에 엑스비전테크놀러지에 제작 의도에 대한 문의를 한적이 있었는데 그 당시에는 웹사이트 대부분이 대형 사이즈의 이미지를 4등분 또는 조각조각 잘라서 페이지를 만드는 사이트가 대부분이였고 기타 이미지의 활용도가 지금과 같지 않았을 뿐만아니라 alt 속성에 대한 인식이 거의 전무한 상황에서 당시 많은 이용층이 있었던 나모웹에디터 에서 img 태그를 생성하면 alt 속성이 자동으로 생성되기 때문에 거의 빈 속성으로 남겨두고 사이트를 오픈하는 경우가 많았다고 합니다.
그렇게 제작된 사이트를 정상적인 방식으로 센스리더를 이용하면 심할경우 센스리더가 아무것도 읽지 못하는 경우를 격게 된다고 합니다. 그러니 울며 겨자먹기로 파일명으라도 읽게해서 이미지라는 정보라도 전달하게 하려는 의도로 어렴풋 기억이 납니다.
하지만 이제는 많이 달라졌지 않을까요? 웹표준 마크업은 왠만한 웹사이트를 제작하는 곳에서는 모르는 사람이 거의 없을거라 생각하고 접근성을 높이기위해 대체콘텐트에 관심을 가지는 이들도 꾀 많다고 생각합니다.
그래서 이번에 출시한 센스리더 프로페셔널 버전은 alt 속성에 대한 정확한 인식은 물론이고 우리가 생각했던 표준코드에 대한 올바른 인식까지도 많이 개선 되었다고 합니다.

세부 개선사항

그동안 표준코드를 제대로 해석하지 못해 아쉬움이 많았던 센스리더, 이번 업그레이드에서 개선되는 개선사항은 다음과 같습니다.(아래 정보는 엑스비전테크놀러지 개발팀에 문의해서 얻은 정보 입니다.)

• 이미지에 longdesc 속성이 있는 경우 읽어주도록 수정.
  이번 수정으로 인해 애매했던 이미지에 longdesc설정이 정상적으로 url로 연결이 되어 있으면 alt+엔터키를 이용해서 해당 설명 url을 새로운창으로 열어줄 수 있게 됐었습니다.
• 테이블에 summary 속성이 있는 경우 음성출력이 되도록 수정.
  summary 속성이 있으면 테이블이라는 표시 다음줄에 summary내용을 알려주도록 개선 되었습니다.
• ul, ol, dl태그 지원. 목록 항목으로 음성이 출력가능
  ol, ul, dl 태그가 있으면 목록시작과 끝을 알려주며 목록이 몇개인지 목록시작시 나타나고 목록안에 또 목록이 있으면 목록 단계를 알려줌으로 서브 목록임을 나타낼 수 있게 되었습니다.
  위 개선으로 리스트 태그의 사용구분을 명확하게 할 수 있게 되었지 않았나 생각됩니다.
• accessibility를 적용한 플래시 지원.(예: 네이버 로그인 보안 2단계)
  accessibility를 적용한 플래시를 지원하도록 추가된 기능입니다. 요즘은 플래시 제작시 accessibility에 콘텐트를 작성하는 분들이 많고 혹시 모르시는 분은 플래를 accessibility 지원할 수 있도록 개발하는 방법을 adobe 접근성 리소스 센터 에서 참고할 수 있습니다.
• id를 통한 스킵 네비게이션 처리 지원
  스킵네비게이션이 ID를 인식하지 못하고 name으로만 이동이 가는한 것을 ID도 인식할 수 있도록 수정되었습니다. 예전 이 문제로 인해 ID와 name을 모두 선언했어야 했지만 그부분이 개선되었다고 할 수 있습니다. 하지만 당분간은 계속 지금과 같이 설정해야 하지 않을까 생각됩니다.
• 이미지의 alt에 내용이 없을 경우 처리하지 않도록 변경
  alt="" 으로 설정된것은 파일명을 나타내지않도록 수정한 것입니다. 이제 의미없는 이미지 태그를 사용할 경우 빈 alt텍스트를 기입해도 파일명을 읽어주지 않습니다.
• 편집창의 이름이 웹표준에 맞게 작성되어도 적용되지 않던 문제 개선
  이 말은 label 태그를 인식하게 했다는 뜻입니다. 단, 편집창 외에 체크박스, 라디오버튼 등은 아직 인식되지 않는다고 합니다.

이외에도 테이블을 좀더 잘 읽어줄 수 있도록 테이블 모드기능과 fieldset, abbr, acronym 태그를 인식할 수 있도록 수정되었으며 accesskey가 있으면 바로 정보를 알려 줄 수 있도록 수정되었다고 합니다.
위에 설명한 개선사항은 프로페셔널과 기존에 사용하던 파워버전도 동일하게 적용된다고(Power 1.5v 부터) 하니 기존에 파워버전을 사용하시던 분은 업그레이드를 통해서 이용이 가능하며 신규로 구매하시거나 윈도우 비스타 환경에서 사용해야 하는분은 프로페셔널 버전을 구매하면 된다고 합니다.
(기존 파워버전은 윈도우 비스타에서 작동하지 않는 문제가 있고, 프로페셔널은 가능합니다.)

보편화 기간

문제는 언제쯤 보편화가 될 것인가 인데 이렇게 센스리더가 기존버전의 업그레이드와 신규빌드가 출시 됐다고 하지만 이용자들에게 보편화 되려면 시간이 꽤 걸리지 않을까 생각됩니다.
왜냐하면 현재 센스리더의 구입 비용이 만만치 않고 구입비용 지원이 된다고 하지만 그 시기가 항상 인것은 아니기 때문입니다.
참고로 시각장애인들이 센스리더와 같은 보조장비를 구입하는 경로는 다음과 같다고 합니다.
(한국시각장애인복지관 도움)

• 개인구입(100% 비용지급)
• 정보문화진흥원에서 1년에 1회 시행하는 장애인 정보보조기기 보급사업에서 장비에 따라 본인부담 10~20%가격으로 구입할 수 있도록 지원
• 장애인고용촉진공단에서 시행하는 취업장애인을 대상으로 1인당 1천만원까지 보조기기구입금 지원

다만 이번 파워버전 업그레이드와 프로페셔널 버전 출시로 인해 웹사이트쪽의 개선도 있었지만 기타 환경과 응용프로그램 쪽에서도 개선사항이 많아(특히 오피스와 한글워드프로세서 지원강화) 빨리 변경을 원하시는 분들도 있지 않을까 생각됩니다.

끝으로

이번 개선사항으로 인해 접근성을 고려해서 웹사이트를 제작하는 분들이나 직장에서 센스리더를 이용해 업무를 보시는 시각장애인 분들에게 많은 희소식이 될 수 있을 것 같습니다.
개인적인 아쉬운 부분이 있다면 엑스비전테크놀러지 공식사이트를 좀 고쳤으면 좋겠다는 생각이 드는데 이런 소식들이나 자료이용을 사이트에서 얻을 수 있으면 좋지 않을까 생각합니다.
브라우저 개선사항 외 기타 세부 개선사항에 대한 정보는 아래 링크에서 확인하실 수 있습니다.
센스리더 프로페셔널 세부정보

여러분은 대학시절 어떤 동아리 활동을 하셨나요? 저는 생긴것 답게 ‘독서토론동아리’에서 활동했었습니다. 작년 연말 팀 내에서 ‘가장 책을 많이 읽을 것 같은 사람’으로 지목되기도 했었는데 이것이 ‘생긴것 답게’의 증거라고 치죠.(주의:생긴것과 실제 다독률에는 현저한 차이가 있음) 대학시절에는 책이 너무 좋아서 동아리에 가입했다기 보다는 ‘이제 대학생도 되었으니 책도 좀 읽자’라는 의지가 있었는데요. 기대만큼 그 의지는 따라주지 못했지만 그 때 읽은 책들이 인생관에 적지않은 영향을 주었던것 같습니다. 제가 가입한 동아리에서는 ‘사회과학’서적을 주로 읽었습니다. 특히 유물론을 알기 쉽게 풀어쓴 책들을 재미있게 읽었죠. 저는 오늘의 포스팅을 위하여 다시 유물론 책을 뒤적거렸고 ‘양질전환의 법칙’이라는 말을 찾아 냈습니다. ‘질적인 변화는 양적인 변화에 의해서만 일어난다’ 라는 것이 바로 ‘양질전환의 법칙’이고 오늘의 팁은 여기서 부터 시작하겠습니다.

저희와 같은 직군에서 근무하시는 분들은 HTML/CSS 편집도구(드림위버, 에디트플러스…)를 하루중 얼마나 다루실까요? 하루종일 옆에서 시간을 측정하면서 지켜본 적이 없으니 정확히 알 수는 없지만 추측해 보면 하루중 절반이 넘지 않을꺼라고 생각합니다. 메일 읽어야죠. 성실하게 답장 해야죠. 구두로 대화를 하거나 회의에도 참석 해야죠. 포토샵도 다뤄야 하구요. 어떤 HTML 엘리먼트와 CSS 기법을 사용해야 하는지 창의적인 고민도 해야하고. 4대 브라우저에서 렌더링 테스트도 해야하고. 렌더링된 화면은 디자이너의 시안과 일치하는지 일일이 대조도 해야 하구요. 커피 마시고 담배 태우고 밥도 먹어야죠. 이런 시간들을 제외하고 남는 시간이 편집기를 다루는 시간이 되겠죠. 따라서 저는 하루중 8시간을 근무하지만 실제로 편집툴을 다루는 시간은 4시간 미만일 것으로 추정 하고 있습니다. 이 4시간동안 편집툴을 사용하는 개발자들의 작업 효율은 과연 비슷할까요?

제가 처음 드림위버의 단축키를 과도하게(?) 사용하기 시작한 계기는 위와같은 질문으로부터 시작되었습니다. ‘단순한 작업을 빠르게 처리하면 보다 창의적인 일에 시간을 소비할 수 있다’는 생각이었고 소규모 에이젼시에 근무하던 시절에는 정말로 대부분의 일정을 앞질러 나아갔습니다. 남는 시간에는 관련분야의 전문지식을 읽거나 습득한 지식을 블로그에 포스팅 하는 등 ‘생각대로’하면 되었습니다. 지금은 뭐 남는 시간에는 주로 매일같이 올라오는 ‘BTS’를 해결하고 있습니다만. ㅜㅜ (BTS : Bug Tracking System) BTS는 아무리 해치워도 끝이 없네요.(이게 다 IE 때문이야!) 제가 하고싶은 이야기는 여러분이 ‘질적으로 달라지기 위해서는 반드시 양적인 변화가 필요하다’라는 것이고 하찮아 보이는 드림위버의 단축키 활용은 여러분의 성장에 도움이 된다는 겁니다. 드림위버 단축키 활용법 소개하는데 ‘양질전환의 법칙’까지 들먹거리는건 제가 생각해도 참 유별나다 싶지만 제가 도구 사용법만 알려드리면 별로 재미가 없지 않나요?

이제 시작 할께요! 제가 즐겨 사용하는 단축키를 모두 소개해 드릴텐데요. 이러한 단축키들은 드림위버에서 기본적으로 제공하는 것도 있고 제가 만들어 사용하는 것도 있습니다. 제가 만들어 사용하는 단축키는 우측에 ‘사용자 정의’라고 적어두겠습니다.

• 엘리먼트 삽입
• div : Ctrl+Alt+D (사용자 정의)
• h1~h6 : ‘Ctrl+1′ ~ ‘Ctrl+6′
• ul : Ctrl+Alt+Shift+U (사용자 정의)
• ol : Ctrl+Alt+Shift+O (사용자 정의)
• li : Ctrl+Alt+Shift+L (사용자 정의)
• dl : Ctrl+Alt+Shift+F (사용자 정의)
• dt : Ctrl+Alt+Shift+T (사용자 정의)
• dd : Ctrl+Alt+Shift+D (사용자 정의)
• a : Ctrl+Alt+A (사용자 정의)
• p : Ctrl+Shift+P
• img : Ctrl+Alt+I
• strong : Ctrl+B
• em : Ctrl+I
• table : Ctrl+Alt+T
• form : Ctrl+Alt+F (사용자 정의)
• fieldset : Ctrl+Alt+S (사용자 정의)
• 테이블 편집
• 테이블 셀 합치기 : Ctrl+Alt+M
• 테이블 열 삭제 : Ctrl+Shift+’-’
• 테이블 행 삭제 : Ctrl+Shift+M
• 빠른 이동/선택/삭제
• 단어 단위로 이동 : Ctrl+방향키
• 단어 단위로 선택 : Ctrl+Shift+방향키
• 단어 단위로 삭제 : Ctrl+BackSpace, Ctrl+Del
• 주석 삽입
• HTML 주석 삽입 : Ctrl+Alt+C (사용자 정의)
• CSS/JS 주석 삽입 : Ctrl+Alt+Shift+C (사용자 정의)
• 코드 접기/펼치기
• 코드 짝 맞추어 접기 : Ctrl+Shift+C (사용자 정의)
• 선택한 코드 펼치기 : Ctrl+Shift+E
• 코드 자동완성 : Space, Ctrl+Space
• HTML Validation 검사 : Shift+F6
• 디자인뷰/코드뷰 전환 : Ctrl+`
• 열린 탭간 이동 : Ctrl+Tab

제가 즐겨쓰는 단축키는 모두 30개 정도이고 직접 만들어서 활용하는 ‘사용자 정의 키’는 13개 로군요. 보시면 아시겠지만 빈도 수가 높은 엘리먼트는 모두 단축키를 할당해서 삽입하고 있으며 직접 타이핑 하는 것은 거의 속성 뿐인데 이마저도 자동완성 기능을 사용합니다. 이것이 바로 제가 현재의 콘텐츠를 마크업하기 위한 최적의 구조를 고민하고 창의적인 CSS 기법에 보다 많은 생각의 에너지를 투자할 수 있는 비법 입니다. 한 순간에 모두 외우려고 하기보다는 필요할 때 마다 하나씩 순차적으로 셋팅하면서 머리보다 손으로 익히시는 것이 효과적 입니다.

사용자 정의 단축키 셋팅은 이렇게 하세요!

File > Keyboard Shortcuts. 키보드 단축키 대화상자를 엽니다. 

Current set > Duplicate set. 드림위버의 기본 단축키 셋에 대한 사본을 만듭니다. 

Name of duplicate set. 단축키 사본의 이름을 작성 하시구요. 

Commands. 단축키를 설정하고 싶은 명령을 찾아낸 다음 나만의 단축키를 만듭니다. 

만약 원하는 명령이 어디 숨어 있는지 찾기 어렵다면 Export set as HTML 명령으로 현재 설정된 기본 단축키 목록을 HTML 파일로 내보내기 하세요. 

누구나 쉽게 따라할 수 있고 매우 적은 노력으로도 ‘양질전환의 법칙’을 실천할 수 있는 팁이 아닐까요?(자뻑ㅡㅡ;)
감사합니다.

저희 웹표준화팀에는 들여쓰기 규칙이 있습니다.
그리고 드림위버는 생성되는 모든 엘리먼트의 들여쓰기와 줄 바꿈 설정을 사용자 정의 할 수 있습니다.

모든 코드의 들여쓰기를 일일이 Tab으로 결정하신다면 사실 이런 기능은 그다지 유용하지 않다고 생각하실 수 있습니다.
하지만 외주작업된 문서나 오래전에 작업된 여러사람의 손을 거친 헝클어진 코드를 ‘단 한 순간에 제자리로’ 돌려놓을 수 있다면 얼마나 좋을까요?

우선 코드를 자동으로 정렬시켜주는 단축키를 소개 드립니다.
모든 코드의 줄 바꿈과 들여쓰기는 코드 중첩에 따라 가지런히 자기 자리를 찾을 것입니다.

코드 자동 정렬 단축키 Alt+(C-A)
콘텍스트 메뉴 명령으로는 ‘Commands > Apply Source Formatting’ 입니다.

하지만 저희 팀 공식 가이드에 맞추어 드림위버를 미리 셋팅하지 않았다면 모든 엘리먼트의 들여쓰기와 줄바꿈은 드림위버 초기값에 의하여 결정될 것입니다.(자식이면 무조건 1Tab 들여쓰기 됨)

저희 팀 가이드에 의하면 기본적으로 부모와 자식간에 1Tab 들여쓰기 하지만 thead, tbody, tfoot, tr, li, dt, dd 와 같은 엘리먼트들은 예외처리를 두어서 들여쓰기를 하지 않도록 하고 있습니다. 이런 규칙들은 여러분들이 속한 조직에서 얼마든지 만드실 수 있죠.^^

따라서 팀내 가이드에 맞게 드림위버를 셋팅하는 방법을 설명해 드리겠습니다.
일단 엘리먼트들의 들여쓰기나 줄바꿈을 어느곳에서 설정하는지 아셔야 겠죠?

콘텍스트 메뉴 ‘Edit > Tag Libraries’ 에 위치해 있습니다.
이곳에서는 모든 엘리먼트의 ‘줄바꿈, 들여쓰기, 대소문자 설정’을 미리 셋팅할 수 있습니다.

우선 li 엘리먼트의 들여쓰기를 제거해 보도록 하겠습니다. Tag Library Editor 대화상자를 열었습니다.
li 엘리먼트의 부모는 ol, ul 이므로 li 엘리먼트를 직접 수정하지 않고 부모 엘리먼트인 ol, ul 엘리먼트를 찾아서 자식의 들여쓰기를 제어해야 합니다.

상기 대화상자를 보면 ol 의 Contents 항목에 대하여 Formatted But Not Indented 라고 옵션을 변경한 것을 볼 수 있습니다.
Formatted But Not Indented 라는 것은 ol 엘리먼트의 자식 엘리먼트(또는 텍스트)인 li 가 li에 지정된 코드포멧(줄바꿈, 대소문자)에 따르도록 하지만 ‘들여쓰기만은 따르지 말라는 명령’ 입니다.

따라서 ol의 자식들인 li 엘리먼트는 줄바꿈은 되지만 들여쓰기는 더이상 생기지 않을 것입니다.
이와 같은 원리로 table, thead, tbody, tfoot, ol, ul, dl 엘리먼트의 자식들에 대하여 들여쓰기 되지 않도록 팀내 가이드에 맞게 변경해 보세요.

이렇게 셋팅해 놓고 기존의 코드를 마구~마구~ 헝클어 놓은 다음 Alt+(C-A) 해보세요.
모든 코드가 다시 제 자리로 돌아와 있을 것입니다 ^^;

잘 안되시는분 손 드시면 자리로 가서 친절하게 개인지도 해드리겠습니다. ^^
감사합니다.

지난 18일 여러가지 향상된 기능(자바스크립트의 구동속도 향상, 스마트 주소창, 피싱보호 기능 추가….)들을 갖추고 FF3의 정식버전이 릴리즈 되었습니다. 

 아래는 float속성을 지닌 div의 하위에 float속성을 가진 div가 위치하였을 경우 FF3와 FF2의 차이점에 대하여 정리하였습니다.

위의 소스를 보시면 parent의 div안에 child div가 양쪽 으로 float 속성을 가지며 놓여 있을 경우 parent부모의 표현이 FF2와 FF3에 차이점이 생겼더군요

아래와 같이 표현 되는 브라우저는 저희가 지원하고 있는 IE계열 모든 버전의 브라우저(5.5, 6.0, 7.0)와 FF2에서 아래와 같이 보여지게 됩니다.

그리고 아래와 같이 표현 되는 브라우저는 FF3와 Opera(test version 9.27), safari(test version 3.0.4)에서 아래와 같이 보여지고 있습니다.

FF2와는 달리 FF3에서는  parent div의 width를 auto로 인식하고 줄어 들어 보입니다.

위의 이슈는 parent div에 width값을 부여해 주시면 간단하게 FF2와 FF3의 View를 동일하게 맞출 수 있습니다.

그럼 즐거운 좋은 하루 되세요

포토샵으로 만든 디자인 파일에 시스템 폰트가 사용된 경우, 실제 HTML 화면에 보여지는 내용과 다른 경우가 있습니다.
어떤 경우에 다르게 보여지는지, 어떻게 하면 포토샵에서 HTML과 유사하게 제작할 수 있는지 알아보도록 하겠습니다.

포토샵에서 시스템폰트와 유사한 bold체 적용하는 방법

돋움, 굴림

Character패널의 [T]버튼을 클릭합니다.

※ 글자 크기가 17px 이상이 되면 HTML 서체와 포토샵 서체 모양이 달라집니다.

Arial, Verdana, Tahoma

서체 종류에서 Bold를 선택합니다.

HTML 서체와 포토샵(psd) 서체 비교

※ ‘모양비교’는 IE6 기준으로 작성되었습니다.

감사합니다.^^

오늘의 팁은 ‘참조된 리소스 즉시 열기’ 입니다.
HTML/CSS 코드 안에는 다른 곳의 자원을 참조하는 속성으로서 ‘href, src, url’ 속성이 존재합니다.
예를 들어 HTML 문서에서 다음과 같이 링크되어 있는 CSS 문서를 열고자 할 때 여러분은 어떤 과정으로 CSS 문서를 열게 되나요?

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

아래와 같이 img 엘리먼트가 있고 이것을 포토샵에서 열거나 브라우저로 확인해야 할 때 여러분은 어떤 과정을 …?

<img width="85" height="25" alt="NAVER" src="../img/naver.gif"/>

아래와 같이 CSS 코드 속에서 참조하고 있는 @import 된 파일을 열어야 할때는 …?
CSS 코드의 background-image를 포토샵에서 열거나 브라우저로 확인해야 할때는 …?

@import url("default.css");
.blog_header{ background-image:url(../img/line_lnb.gif);}

참조하고 있는 URI 경로에 입력커서를 위치시킨 다음  ‘Ctrl+D‘ 키를 눌러보세요.
해당 자원의 기본 편집기(또는 뷰어)로 파일이 열립니다.

html/css/js 파일의 경로에서 이것을 시도하는 경우 드림위버(또는 기본 편집기)로 열어주고요,
gif, jpg, png 파일의 경로에서 이것을 시도하는 경우 포토샵(또는 기본 뷰어)에서 열어줍니다.
알씨 같은 것으로 열리는게 편하다고 생각하는 분도 있을꺼에요. 요건 아래 보기와 같이 환경 설정을 바꾸셔야 해요.

image 파일의 주소가 절대경로로 잡혀있는 경우는 포토샵으로 열리지 않고 기본 브라우저로 열어줍니다.

제가 ‘드림위버 팁 공유’ 메일을 보내드릴 때마다 한 번씩은 꼭 사용해 보실것을 거듭 권장 드립니다.
그렇게만 해주시면 제 메일 한통에 여러분들의 내공 1%씩 상승 보장 한다니깐요~!
오늘에 세 번째 메일이니 오늘쯤이면 약 3%쯤은 올라가 있어야 해요~ ㅎㅎㅎ.

이 팁 공유 메일은 앞으로 22통 정도 더 보낼 예정입니다.
그래야만 처음 목표했던 업무효율 125%를 달성할 수 있거든요. ^___^

감사합니다.

Firefox 3가 정식출시 되면서 당일 다운로드 횟수가 약800만여건이 넘었다고 합니다.
아직 Firefox 2에 미련을 버리지 못해 업데이트 하지 않은 분들도 있을텐데 이렇게 많은 분들이 기다리고 있었다는걸 보면
대단하지 않을수 없다고 생각하는데요..
이번 글에서는 Firefox 3로 업데이트 하고나서 사이트를 점검중에 발견되는 달라지는 점들을 정리할까 합니다.

그 첫번째로 Form 요소들에 대한 달라진 점입니다.
많은 부분에서 이미지나 form 요소와 텍스트를 함께 사용할때 수평이 맞지 않아 vertical-align을 설정하거나 임의로 높이를 맞추는 경우가 있는데
Firefox 2에서는 기존 다른 브라우저들과 다른 부분이 많지 않았기때문에 별다른 설정없이도 사용이 가능했었던 부분이 있었던 반면
아마 이번 Firefox 3의 달라지는 부분때문에 이런 대비를 해야 할 것 같다는 생각이 듭니다.

가장 많이 차이가 난다고 느끼는 부분은 checkbox 와 텍스트가 같이 사용된 부분의 높이 차이인데요.
네이버 검색 뉴스텝에서 My 언론사 설정과 같은 부분이 있는경우 IE와 Firefox 2 에서 별다른 문제가 없었던 문제가 Firefox 3에서는 좀 많이 차이가 나 보이는걸 알 수 있습니다.

Firefox 3	Firefox 2

다른 요소들도 조금씩 차이가 있는데요 form 요소들의 여백차이를 Firebug를 이용해서 체크해 봤습니다.
기본 마크업에 DTD는 관계가 없었음을 참고하시기 바랍니다.
캡쳐 이미지 사이즈는 생각하지 마시고 수치를 비교해 보시면 차이점을 알 수 있습니다.

차이를 정리해 보면 radio, checkbox 는 동일하게 높이가 달라진게 보이며, textarea는 동일한 cols, rows 값이라도 다르게 해석하는 것을 알 수 있습니다.
이런 차이는 기존 Firefox 2가 잘못 된 렌더링을 가지고 있었다고 말하기는 힘들지만
Firefox 3가 보다 향상된 웹표준 렌더링을 지키고 있다고 말하고 있으니 Firefox 3에 맞춰야 겠다는 생각이 듭니다.

이번 Form 같은 경우는 Firefox 2, 3의 차이를 약간은 줄 일 수 있는데요.
radio나 checkbox 같은 경우는 vertical-align 으로 조절이 가능하고
selectbox 나 textarea 의 차이는 width, height 값으로 동일하게 조정이 가능했습니다.
다른 부분에 대해서도 테스트 해보고 발견된다면 정리하도록 하겠습니다.
기존 Firefox 가 표준 렌더링을 나름대로 잘 준수한 브라우저기 때문에 별 다르게 문제 될 만한 부분이 없다고 생각되고,
올바른 코드를 잘 사용 했다면 큰 문제는 없을 거라고 생각됩니다.

IE의 Quirks Mode에서 italic체의 띄어쓰기를 width값 계산에 포함하지 않아
내부 영역이 띄어쓰기만큼 넓어지는 문제가 있습니다.

해결 방법은,

방법1. width와 overflow:hidden; 또는 overflow:auto;를 줍니다.

overflow:auto를 해도 이 영역에 대해서는 가로스크롤이 생기지 않았습니다.
단점은, 해당 영역 밖으로 나가는 레이어가 있을 경우 사용할 수 없게 됩니다.

방법2. 안쪽에 띄어쓰기 값 만큼 작은 영역으로 태그를 한번 더 감싸줍니다.

더 좋은 해결 방법이 있다면 의견 부탁 드립니다.^^

감사합니다.