중요 표시 버튼을 접근성 있게 만들기
아래와 같이 생긴 중요 표시 버튼, 많이들 보셨나요? 중요한 메일이나, 파일들을 표시하기 위해 사용하는 기본적인 UI 요소로 클릭을 하면 색깔이 진해지면서 중요한 아이템이라는 의미를 나타내고, 다시 클릭을 하면 해제가 됩니다. 오늘은 이 중요 표시 버튼을 접근성 있게 만드는 방법을 공유해보고자합니다. 먼저- '접근성이 있다' 라고 말할 수 있는 것은 아래 두 가지 항목을 만족시키기 때문입니다. 시각 장애환경에서 스크린리더로 의미 파악이 가능합니다. 키보드로 접근과 조작이 가능합니다. 체크박스를 이용하자! 중요 표시 버튼은 어떤 엘리먼트를 이용해서...
웹 표준 마크업 개발 프로세스
세미나명 : 웹표준 워크샵 2010 프로그램 : 웹표준 마크업 개발 프로세스 일시 : 2010.7.7(수) 10시 ~ 18시 장소 : 한국과학기술회관 B1F 대회의장 발표자 : 박태준팀장
버튼의 활성화 여부에 따른 커서 모양 적용하기
사용하기는 꽤나 번거롭지만 여기저기 많이 쓰이고 있는 아이가 바로 이미지 버튼입니다. 먼저, 오래 전에 폭폭이님이 이미지 버튼을 문제 없이 사용하는 방법에 대해 작성하신 글을 참고해주세요.^^ NULI - button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법 http://html.nhndesign.com/blog/2038 제가 오늘 이야기 하고 싶은 부분은 바로 버튼의 활성화 여부에 따른 커서 모양에 대한 부분입니다. 너무 간단해서 이미 잘 아시는 내용일까봐 살짝 걱정이 되기도 하네요. ^^; 경우에 따라서는 이미지 버튼을 사용할 때, 활성화 버튼, 비활성 화 버튼이 있기 ...
모바일 환경에서의 마크업 개발 이슈
세미나명 : 웹표준 워크샵 2010 프로그램 : 모바일 환경에서의 마크업 개발 이슈 일시 : 2010.7.7(수) 10시 ~ 18시 장소 : 한국과학기술회관 B1F 대회의장 발표자 : 문지애선임UI개발자
모바일 웹 브라우저
안녕하세요. 웹표준화팀 박상혁입니다. 이번주에는 단말에 탑재되어 있는 모바일 웹 브라우저에 관해 알아보겠습니다. 최근 모바일 웹이 모바일 웹 2.0 이라는 이름으로 이슈가 되고 있습니다. 그 배경에는 WIMAX, WLAN, WPAN, WIFI등 무선 네트워크의 진화가 기존 WAP 환경에서 mobile web browsing 서비스로 전환되며 좋은 환경을 제공하고 있고 단말로 유선 웹 서비스 이용이 가능해져 부족했던 컨텐츠를 기존 웹이 대신 할 수 있게 되었다는 점입니다. 여기에 발 맞춰 야후,구글등 인터넷 서비스 업체들도 모바일 관련 서비스를 경쟁적으로 개발 하고 있습...
CSS3 실전 예제
세미나명 : HTML5 오픈 컨퍼런스 프로그램 : CSS3 실전 예제 일시 : 2010.7.2(수) 13시 장소 : 강남구 학동 건설회관 발표자 : 정찬명 선임 UI개발자 발표자료보기
널리 웹표준 가이드를 개편했습니다!
안녕하세요. 기타도리입니다. 이번에 널리(NULI) 가이드라인 사이트를 개편하게 되었습니다. 업무 외 틈틈이 사이트를 운영하다 보니, 많이 신경을 못 썼던것이 사실인데요. 언젠가 팀원이 건네준 널리(NULI) 접속 통계를 보니, 부족한 사이트 임에도 많은 분들이 찾아주시고, 참고하고 계신것을 보고 좀 더 신경써야 겠다는 생각을 많이 했습니다. 그래서 그 첫걸음을 사이트에 대한 개편으로 시작합니다. ^^ 기존, 잘 참고가 되지 않는 항목들을 없애고, 또 많이 보시는 항목 들 중 업데이트가 부족했던 항목들을 새롭게 업데이트 하였습니다. (혹시 덜 된 부분이...
HTML마크업 구조 설계 템플릿
본 문서는 HTML 마크업을 시작하기 전에 구조를 설계하는데 도움을 주기 위한 템플릿입니다. 원 클릭 원 드래그로 구조를 쉽고 빠르게 설계할 수 있고, 각 태그 별 레이어에 고유한 색상을 지정하여 한 눈에 알아볼 수 있도록 제작되었습니다.제작된 HTML 마크업 구조설계도는 HTML 마크업 가이드 및 HTML 마크업 작업을 지시하기 위한 지시서로 활용 가능합니다.작성자 : 한혜진 작성일 : 2009.02.13 첨부파일을 참조하세요.첨부 파일HtmlMarkupDesignTemplate_WS_HHJ.pptx506.4KB
웹표준 개발자의 IE8 고려사항
IE8 출시와 관련하여 웹 개발자가 고려해야 할 대응 가이드 입니다. 낡은 브라우저에 최적화 된 웹 문서와 IE8 브라우저의 호환성 문제 해결.웹 표준에 따라잘 개발된 문서와 낡은 브라우저와의 호환성 문제 해결. 낡은 웹 페이지가 IE8에서 깨지지 않도록 호환성 유도 코드(meta element) 사용법을 제시하고 있으며 HTML 페이지에 개별 적용하는 방법과 서버측 응답 헤더에 일괄적용하는 방법을 소개하고 있습니다. 작성자 : 정찬명 작성일 : 2009.03.18 첨부파일을 참조하세요. 첨부 파일 IE8_WebDevelopeGuide_1in1.pdf631.9KB 웹표준 개발자의 IE8 고려사항
IE8 신규 기능 개발가이드
IE8 브라우저에서 지원하는 신규 기능 중 Web Slices와 Accelerator의 개발가이드를 예제코드와 함께 보실 수 있습니다.작성자 : 윤좌진 작성일 : 2008.10.10 첨부파일을 참조하세요. 첨부 파일IE8_NewFeature_DevelopmeGuide_WS_YJJ.pdf397.9KB
NULI 블로그입니다.