Blog 본문

공지사항

안녕하세요. 

웹표준을 다루다! Darum 담당자입니다.


HTML5 Elements CSS3 Properties의 문서 내용이 업데이트되어 알려드립니다.
(각 메뉴명이 CSS Attribute → CSS PropertiesCSS3 Attribute → CSS3 Properties 로 변경되었습니다.)


▶ HTML5 Elements 바로가기 : http://darum.daum.net/convention/html/html5_elements

▶ CSS3 Properties 바로가기 : http://darum.daum.net/convention/css/css3_properties



 HTML5 Elements 업데이트 사항


☞ 아래와 같이 HTML5 New Element 에 main 내용 추가 문서 하단에 HTML5 Changed Elements  HTML5 Obsolete Elements 내용이 추가되었습니다.

main
Category

Flow Content

의미
  • 문서나 애플리케이션의 body 영역의 주요 콘텐츠 영역
  • 접근성을 향상시키며, 검색엔진에서의 콘텐츠 가중치를 향상시킨다.
사용
  • 문서의 고유한 내용으로 페이지 내에서 단일 적용한다. (사이트 네비게이션 링크, 저작권 정보, 사이트의 로고 및 배너 등은 제외)
  • article, aside, footer, header, nav 의 하위 요소로 사용할 수 없다.
HTML5 Changed Elements
address, b, cite, dl, hr, i, label, noscript, s, small, strong, u, a, menu


HTML5 Obsolete Elements
시각적인 표현으로서 CSS로 처리할 수 있는 요소, 사용성과 접근성을 저해하는 요소, 지금까지 거의 사용되지 않았던 요소



 CSS3 Properties 업데이트 사항


☞ CSS3 브라우저 지원현황과 아래와 같이 CSS3 속성별로 구분하여 타이틀이 제공되었습니다.

        - Borders

      - Backgrounds

      - Gradients

      - Text Effect

      - Fonts, Transitions

      - Transforms

      - Animations

      - Multiple Columns

      - User Interface


☞ 각 CSS3 속성에 1. Summary 2. Syntax 3. Example 로 정리되어 이전보다 가독성이 높아졌습니다.


예시)

box-shadow

1. Summary

박스모델의 그림자 효과를 주는 속성

2. Syntax

box-shadow: (가로 오프셋 거리) (세로 오프셋 거리) (blur radius) (그림자 색상);

  • 가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정. (양수:오른쪽, 음수:왼쪽)
  • 세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
  • blur radius : 그림자의 번지는 정도(0:그림자 효과 X)

3. Example

  1. box-shadow:10px 10px 5px #888;


 - 업데이트된 문서의 자세한 사항은 HTML5 Elements 와 CSS3 Properties 에서 확인하실 수 있습니다.

감사합니다.


저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항

다룸에서 알려드립니다. - 모두의 더 나은 내일로 가기 위한 웹접근성




보조 공학 및 접근성 검사도구 iOS 접근성 손쉬운 사용 업데이트 - 보기지원, 듣기지원, 신체 및 동작 지원 기능



▶ iOS 접근성 바로가기 : http://darum.daum.net/accessibility/tools/ios


  아이폰 iOS가  iOS7 로 업데이트 됨에 따라 iOS 접근성 > 손쉬운 사용 기능에 대한 내용이 업데이트되어 알려드립니다.


※ "손쉬운 사용" 접근성 기능의 업데이트된 내용을 간략히 살펴보면 다음과 같습니다.


제한된 운동 능력을 가진 사용자도 이제 스위치 제어를 사용해 장비 제어 가능

ㆍ 청각 장애인용 자막 스타일 사용자화

ㆍ VoiceOver의 손글씨 입력 지원

ㆍ VoiceOver에서 Nemeth 점자를 사용하여 수학 입력 지원

ㆍ 선택 항목 말하기 및 VoiceOver를 위한 향상된 품질의 다수 음성 선택 가능

ㆍ iPhone용 보청기 및 iPhone 5 및 iPod touch(5세대)용 스테레오 오디오 지원



 업데이트 변경사항 비교

ㆍ 빨간박스 : 버전변화  (6.0, 6.0.1 → 7.0.2 버전 변화)

ㆍ 파란박스 : 기기변화 (4, 4s → 5 기기 변화)


1. 보기지원

보기지원 변경사항 화면


iPhone4, 4S 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 : 텍스트 설정 상세화됨. 


iPhone5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 : 텍스트 설정 상세화  

ㆍ 4, 4s → 5 기기 변화로 인한 메뉴 추가 : 동작 줄이기 



2. 듣기지원

듣기지원 변경사항 화면


iPhone4, 4S 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가  :  자막 및 청각 장애인용 자막 


iPhone5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가 :  자막 및 청각 장애인용 자막  

ㆍ 4, 4s → 5 기기 변화로 인한 메뉴 추가 :  전화 소음 차단 



3. 신체 및 동작지원

신체 및 동작지원 변경사항 화면


iPhone4, 4S, 5 변경사항 

ㆍ 6.0, 6.0.1 → 7.0.2 버전 변화로 인한 메뉴 추가  :  스위치 제어 , 손쉬운 사용 단축키 


  위와 같이 보기지원, 듣기지원, 신체 및 동작지원 기능이 새롭게 업데이트되어 설정화면의 상세화 및 새로운 기능의 메뉴추가로 보다 더 다양한 기능이 제공됨으로서 원하는 기능을 쉽고 빠르게 직관적으로 사용할 수 있게 되었습니다.


- 업데이트된 기능의 자세한 사항은 iOS 접근성 페이지에서 상세 내용을 확인하실 수 있습니다.



저작자 표시 비영리 변경 금지
신고
태그
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

공지사항

모두를 위한 즐거운 변화, 접근성. '모두 다른 우리'가 다 함께 즐거워지는 세상을 위한 Daum의 노력


▶ DevOn 2013, Daum 접근성 부스 프로그램 페이지 : http://devon.daum.net/2013/#!/program/booth/daum-a11y


국내 대표 기술 커뮤니티와 Daum이 함께 만들어가는 열린 콘퍼런스 DevOn 2013 행사에 Daum Service 접근성 컨설팅 부스가 함께 합니다.


그 동안 서비스를 운영하시면서, 접근성 테스트 진행에 어려움이 있으셨던 분은 이 기회에 무료 접근성 컨설팅을 신청해 보세요~

Daum Serivce 에서는 접수된 서비스를 사전에 진단하여, 행사 현장에서 진단보고서 전달 및 컨설팅을 통해 접근성 제고에 실질적인 도움을 드리고자 합니다.

접근성 테스트 실무자가 직접 참여하는, 접근성 컨설팅! 여러분을 맞을 준비에 기대가 됩니다.


모두를 위한 즐거운 변화를 함께 만들어 가보시는 건 어떨까요?


더불어 접근성 프로세스 소개와 그 동안의 경험을 나누고 소통하는 프로그램도 마련하고 있으니, 많은 관심과 참여 바랍니다.



이벤트를 통하여 소정의 상품도 받아가세요~

DevOn Daum 접근성 부스 프로그램 페이지에서 상세 내용을 확인하실 수 있습니다.


▶ DevOn 2013, Daum 접근성 부스 프로그램 페이지 : http://devon.daum.net/2013/#!/program/booth/daum-a11y



저작자 표시 비영리 변경 금지
신고
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

공지사항






- 경력직 0명 



- 웹 & 모바일 서비스의 웹표준 마크업 개발 진행



- 웹 표준에 대한 이해가 있는 자, 웹 및 모바일 UI에 관심이 있는 자

  (HTML5와 CSS3 등 최신 기술 트렌드에 관심있는 분)

- XTHML/HTML, CSS, CrossBrowsing, Semantic Markup, 웹표준, 웹접근성 관련 경험자 

- javascript 개발경력 및 웹개발 능력 보유자 우대



- 서울 가산동 or 제주특별자치도 제주시


◆ 다음서비스 안내 : http://daumservice.co.kr/




저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항






▶ 서비스 바로가기: http://troy.labs.daum.net


Troy는 국내외 주요 모바일 단말기에 탑재된 기본 브라우저의 실측 사이즈 화면을 통해

모바일 웹 또는 반응형 페이지의 인터페이스를 검증하는데 도움을 주는 개발 도구입니다.


누구나 빠르게 모바일 웹 페이지를 한 곳에서 테스트해 볼 수 있는 장점이 있으며,

화면 확대/축소 기능 및 맞춤형 크기 변경 기능 또한 제공합니다.

여기에 표시되는 화면 크기는 모바일 웹 개발 시 흔히 사용되는 medium-dpi 기준의 브라우저 크기로서, 

기기 또는 운영체제별 특성,버그는 실제 기기를 통해 확인하셔야 합니다.


앞으로 Troy는 새로운 단말기 추가 및 고급옵션 기능 등도 추가제공할 예정입니다. 

여러분의 사용 소감 및 개선 아이디어를 부탁 드립니다.

저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항

Dough (도)는 다음커뮤니케이션 웹표준기술팀에서 제작한 CSS 기반 UI Framework 입니다.



CSS 전문가와 비전문가 누구나 몇가지 규칙을 숙지하기만 하면 자유롭게 웹표준 기반 마크업을 개발할 수 있기 때문에 사용자들이 좀 더 쉽게 접근할 수 있습니다.


또한 오픈소스로 공개되어 있기 때문에 누구나 활용 및 참여가 가능합니다. (dough-0.2.0다운)

아직은 초기 버젼이나 꾸준히 업데이트를 통해 단점 개선과 사용 편의성과 확장성을 위해 개선되고 있는 중입니다.


이를 반영하듯 벌써 Dough(도우)의 오픈소스를 이용하는 이용자들이 나오고 있습니다.


도넛(Doughnut), 다음 Dough 기반 워드프레스 테마

 

Doughnut은 Sukjoon Kim님께서 다음 커뮤니케이션즈에서 공개한 오픈소스 CSS Library인 Dough에 기반한 워드프레스 테마입니다.

또한 Dough(도우)를 이용한 소감을 잘 정리해서 포스팅해주셨습니다. (관련링크)   github 바로가기


저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항

지난 3월 22일에 제주에서 진행된 "다룸(Darum) 오픈기념 웹표준 간담회"의 발제 자료와 동영상을 공유합니다. 일부 프로그램의 동영상은 참가자들의 요청에 의해 제공되지 않은 점 양해바랍니다.


1. Front-end 직군의 현재와 미래 (홍윤표.CSS Design Korea 리더)


2. 반응형 웹 디자인은 만능인가? (신현석.한국 모질라 커뮤니티 리더)


3. 웹 접근성과 장애인 차별 금지법 (장성민.한국 웹접근성 그룹 리더)

원고 파일(text 형식), 출처: http://www.cyworld.com/beaverland/9677445

 darum-web-accessibility.txt



4. HTML5와 웹 어플리케이션의 미래(전체 토론, 좌장: 윤석찬.Daum DNA Lab장)

(다음 tv팟 DNA 채널에서 보기)

※ 다룸(Darum) 오픈기념, 웹표준 간담회 동영상은 다음 tv팟 DNA 채널에서 모아 볼 수 있습니다.

저작자 표시 비영리 변경 금지
신고
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

공지사항

지난주 금요일에 "다룸(Darum) 오픈기념 웹표준 간담회"가 많은 분들의 관심과 참여로 성료했습니다.
항공사정으로 1시간 늦은 오후 2시부터 시작되어, 오후 7시에 종료됐습니다.


행사는 Daum 기술부문장인 신재홍님의 인사말로부터 시작했습니다. Daum의 웹표준과 웹접근성에 대한 노력들, 향후 N스크린 시대에 따른 웹기술의 전망 등에 대해 소개해주셨습니다. 

이후 Daum 웹표준 기술팀과 개발팀의 리더인 이원주님이 다룸(Darum) 사이트를 소개했습니다. Daum의 웹표준/웹접근성 Reference의 합성어로, HTML/CSS 사용 가이드, 웹접근성 가이드, 마크업 코드 Snippet 등의 콘텐츠 구성 및 향후 Daum의 웹표준/웹접근성 전략 등에 대해 소개해줬습니다.


"FT직군의 현재와 미래"에 대해 CSS Design Korea(CDK) 리더인 홍윤표님이 간단한 발제 후, 본격적인 프로그램 일정이 시작했습니다. 발제를 진행한 홍윤표님과 함께 정찬명(NHN), 이원주(Daum), 조현진(ACG)님이 토론에 참여해서, 웹표준을 다루는 직군의 현재와 미래에 대해서 때로는 날카롭게, 때로는 장미빛 전망과 함께 여러 논의를 진행했습니다.


2번째 세션은 "반응형 웹 디자인은 만능인가?"에 대해 신현석(한국모질라커뮤니티 리더)님의 발제로 시작했습니다. 웹과 단말의 다양성에 따라, 미디어 쿼리를 기반으로 한 반응형 디자인 기술에 대해서 소개했습니다. 이후 방미희(CDK), 전승엽(CSSNite Korea)님과 함께 반응형 디자인의 단점인 성능 문제를 해결하기 위한 다양한 해법을 논의하고, 이를 보완하기 위한 서버측 트래픽 최적화 방법 등에 대해서 살펴봤습니다.


3번째 세션은 "웹 접근성과 장애인 차별 금지법(이하 장차법)"이라는 주제로 장성민(KWAG 리더)님의 발제가 이어졌습니다. 다양한 웹접근성 인증마크를 소개했고, 장애인이 아닌 누구나 인권위 진정이 가능하다는 등의 정보를 공유해주셨습니다. 이후 강동욱(Daum), 김혜일(Emotion)님과 함께 토론을 진행했으며, 웹접근성 지침/가이드와 실무개선의 차이점 및 온라인 쇼핑몰과 홈쇼핑에서 웹접근성 개선 등에 대한 토론이 이어졌습니다.


마지막 세션으로, "HTML5와 웹어플리케이션의 미래"라는 주제로 윤석찬(Daum)님이 좌장을 맡아, 커뮤니티 리더들과 전체 토론이 이어졌습니다. 웹 기술의 가파른 발전에 따라, 해당 업무에 종사하는 분들의 꾸준한 자기계발을 요구했고, 한동한 침체된 국내 웹표준 관련 커뮤니티들의 재도약을 위한 화이팅을 외치는 시간이 이어졌습니다.


토론의 열기는 쉽게 사그러지지 않아, 결국 예정시간보다 30분 늦은 7시에 끝이 났구요.
행사장을 끝까지 지킨 참가자 분들과 토론자 분들이 단체 사진을 찍는 것으로 행사가 마무리됐습니다. 물론 준비된 기념품도 모두 제공했구요.

Ustream으로 제공된 생방송 중계에 1,010(UV)와 평균 300명, 최대 458명이 시청해주셨습니다. 예상보다 폭발적인 참여와 관심에 감사드립니다. 또한, 제주 다음 스페이스.1에서 진행된 이번 행사에 참석하기 위해 서울에서 제주까지 오신 분들도 계셨습니다. 멀리 와주신 분들, 그리고 보내주신 사장님. 모두모두 감사합니다. 

행사 전반적인 상황은 Daum 캠프(http://camp.daum.net/#71f)에서, 행사 사진은 Flickr(http://flic.kr/s/aHsjEtwhTL)에서 확인할 수 있습니다.

행사 발제 자료와 녹화 동영상은 취합/정리되는데로 공유드리겠습니다.

저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항

Daum의 웹표준 레퍼런스인 

다룸(Darum) 오픈 기념 웹표준 간담회에 여러분을 초대합니다.

 

국내 웹표준/접근성 관련 커뮤니티 리더들과 함께 하는 간담회에 여러분의 많은 관심과 참여 부탁드립니다.




행사 개요

- 일시: 2013년 3월 22일(금) 오후 1시~6시 30분

- 장소: 다음 스페이스.1 멀티홀

- 참여: 웹표준 및 접근성, FT 기술에 관심있는분 모두

- 이벤트: Daum 캠프에, 질문 글 또는 현장 사진을 올린 참석자 중 20명에게 Daum 뮤직 상품권을 드려요!

- 캠프: http://camp.daum.net/71f

- 본 행사는 유스트림(http://www.ustream.tv/)에서 생중계할 예정입니다.

 

 

* 본 행사의 프로그램은 사정에 의해 일부 변경될 수 있습니다. 변경시 사전에 공지하겠습니다.*

저작자 표시 비영리 변경 금지
신고
Posted by darum

Blog 본문

공지사항

안녕하세요 이원주 입니다.


다음커뮤니케이션 웹표준기술팀 & 다음서비스 웹표준개발팀은 다룸(Darum)을 통해 웹표준 기술에 대한 내용을 국내 웹 생태계에서 함께 하시는 모든 분들과 정보를 나누고자 합니다.


. Darum(다룸) : Daum + 레퍼런스(R) 의 합성어 ("다루다"의 사전적 의미)


현재 웹은 PC를 넘어 스마트폰, 스마트TV, 태블릿 등 다양한 디바이스에 대응하는 N스크린 시대로 넘어오며 User Interface 혁신이 일어나고 있는 지금.. 웹표준 기술의 중요성은 지속적으로 대두되어왔고 그 가이드 또한 환경에 맞게 변화 하였습니다.


이에 Daum 또한 사내 개발가이드로 구축되어 있는 웹표준가이드 및 웹접근성 가이드를 다룸(Darum)을 통해 세상 밖으로 나오게 하여, 여러분과 함께 소통하려 합니다.


다룸(Darum)의 주요 기능


1. 다룸(Darum)은 총 4개의 메뉴로 구성


1.1. HTML&CSS

웹표준기술의 출발점인 HTML & CSS에 대한 사용 가이드 입니다. 

다음의 제작 방식 뿐만 아니라, 기존에 조금은 놓치고 있었던 기본적인 스펙들에 대해서 자세히 확인 하실 수 있습니다.


1.2. Accessibility

웹 접근성 가이드 입니다. 

웹 접근성이란 무엇인가 부터 다양한 접근성 검사 도구, PC와 Mobile의 접근성 지침 및 다음의 평가방법을 각종 사례를 통해 소개하고 있습니다.

특히 Mobile Web , Mobile App 의 접근성 가이드는 국내 모바일 접근성은 평가방법에 대한 가이드가 부족한 가운데 내부 평가 프로세스 및 방법을 공유함을써 보다 나은 생태계를 함께 만들어 가고자 합니다.


1.3. Snippet

다음에서 사용하는 각종 마크업 데이터를 공유 합니다.

이와함께 CSS 기반 UI Framework 인 Dough 를 오픈소스화 하여 제공 합니다.


1.4. Blog

Daum 웹표준 기술팀과 웹표준 개발팀의 소식 및 팀내에서 공유되고 있는 지식들을 많은 분들과 나누기 위해 제작되었습니다. 



2. 접근성과 사용성에 도움을 주는 여러기능 제공


다룸을 제작하면서 가장 염두하고 작업한 부분이 바로 접근성입니다. 

저시력자, 색각이상자, 고령자 뿐만 아니라, 다룸을 방문하는 모든 분들이 정보를 접하는데 불편함이 없었으면 하는 마음으로 페이지 곳곳에 접근성에 도움이 되는 기능들을 구현하려고 노력했습니다. 




모든 페이지에 접근성을 위한 폰트 사이즈 조절 기능 및 고대비 스킨 작업을 적용하였습니다. 또한 바로가기 링크와 접근성 도구를 페이지 상단에 위치시켜 원하는 컨텐츠, 접근성 도구로 쉽게 이동할 수 있도록 했습니다.


* 고대비 적용 화면




접근성 뿐만 아니라, 사용성을 위해 간편 목차 보기, 프린트 모드, 왼쪽 메뉴 없이 컨텐츠만 보기, 상단으로 이동 버튼 등을 제공하고 있습니다.




3. 반응형 웹 구현


반응형 웹으로 구현되어 모든 플랫폼에서 접근가능하며 웹표준 & 웹접근성 가이드의 정보를 누구나 어떠한 환경에서든 접근 가능하게 제작 되어 있습니다.





Daum 웹표준 기술팀 & 웹표준개발팀은 앞으로 어떻게 세상을 즐겁게 바꿀까란 기분좋은 상상을 하며 더 많이 소통해 나가도록 하겠습니다~~


감사합니다.


- 웹표준 기술팀 & 웹표준 개발팀 일동 -

저작자 표시 비영리 변경 금지
신고