HTMLㆍ웹표준ㆍ 웹접근성 검색 결과

해당 글 27건

웹표준의 이해

웹표준으로의 접근 표준을 준수하는 웹의 움직임은 Web Standards Project(또는 WaSP)의 공이 크다고 할 수 있습니다. 90년대 후반, 익스플로러와 네스케이프의 두 브라우저사들은 웹의 패권을 장악하기 위해 이름하여 “브라우저 전쟁”이라 불리우는 시대에 치열한 경쟁을 하고 있었고 아주 끔찍한 시기였습니다. 두 브라우저사는 셀 수도 없는 그리고 호환이 불가능한 새로운 요소들을 마구 쏟아내면서 더 많은 user들을 얻으려 했습니다. 그 결과는 오직 하나의 브라우저에서만 작동하거나 아니면 각각 두 브라우저에 적용될 수 있는 다른 두 버젼의 웹사이트를 만들어야만 했습니다. 이것은 웹 개발자에게 악몽과 같은 것이었고 사용자들에게는 오히려 해가 되었습니다. 1998년에 창설된 WaSP는 모든 브라우저..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 6. 16:19

시멘틱 마크업이란?

Semantic Markup Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 말 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱 마크업은 중요하다 HTML은 디자인 요소이고, 기본적인 마크업에 가치를 더 높여 주는 시각적인 효과를 추가하기 전에 잘 구조화된 컨텐츠의 견실한 기초를 다지는 일은 매우 중요할 것입니다. 시멘틱 마크업은 적절한 HTML요소를 올바르게 사용하는 것에서 시작합니다. 예를 하나 들어서, 많은 사람들이 제목을 아래와 같이 마크업을 한다고 가정해 봅니다. html 시멘틱 마크업이란? 위의 마크업은 확실히 제목같아 보이지만 의미와 용도면에서 제목으로서의 기능은 없습니다. 이것은 검색엔진의 최적화, 접근성, 그리고 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 6. 16:05

Semantic Markup #2

의미론적인 마크업을 위한 접근법 Ⅱ 지난 포스팅에서 언급하였듯이, HTML4의 프리젠테이션용 요소, b, hr, i, s, small, 그리고 u 요소들은 전형적인 용도에 관련되어 진다는 미디어 독립이라는 유용한 의미론과 함께 HTML5에서는 비 프리젠테이션용으로 재정의 되었습니다. 이용 가치가 떨어지고 또 상실된 basefont, big, font, tt, 그리고 strike와 같은 다른 프리젠테이션용 요소들은 HTML5에서는 더 이상 쓸모없게 되어 사라졌습니다. 대신 이 요소들과 같은 비주얼 효과를 보려면 CSS를 사용하도록 합니다. a 요소로 구성된 블럭 레벨 링크 하이퍼링크는 HTML의 오리지널 킬러 앱(새로운 테크놀로지의 보급에 결정적 계기가 되는 어플리케이션)입니다. 그러나, 역사적으로 보다 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 6. 10:19

Semantic Markup #1

시맨틱(의미론적인) 마크업을 위한 접근법Ⅰ 웹 사이트를 만드는 일은 손으로 직접 웹페이지를 작성하는 기술도 포함하고 있으며, 이러한 기술 중 커다란 부분은 HTML에 포함된 마크업 툴들을 어떻게 사용하는지를 알아야 하는 것입니다. 즉, HTML은 웹의 사소한 작업(web trifle)들의 기초이므로, 사소한 작업에 친숙해 져야 하는 일은 중요하다라는 의미일 것입니다. 나 같은 시멘틱 요소들은 많은 주목을 받고 있지만, HTML5는 또한 약간의 추가 항목과 변화한 것들을 제공하고 있습니다. 그다지 흥미롭게 들리진 않겠지만, 이러한 것들은 작업의 흐름을 순조롭게 만들어 줄 것이고 추가된 항목과 변화된 것들은 우리가 앞으로 항상 사용하게 될 요소들과 특정한 종류의 콘텐츠만을 위한 새로운 요소들을 포함하게 될 ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 6. 08:55

Polyfill(폴리필) - 대체 방안

Polyfill : 충전솜폴리필의 사전적 의미는 충전솜입니다. 예를 들어 베개의 솜이 꺼졌을 때 다시 솜을 살리기 위해 넣는 충전솜처럼 대체 방안을 강구한다는 의미로 해석될 수 있습니다.Polyfill, Shims, Fallback이란 것들은 용어는 달라도 각각의 목적은 브라우저별로 다름(차이)없는 기능 구현이 목적입니다. 즉, 크로스 브라우징을 염두한 것입니다. Polyfill 이란?폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말합니다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당하고 있습니다. HTML5 Cross Browser PolyfillsModernizr 에서 정리하여 제공하고 있..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 5. 21:16

UX 측면의 한국형 웹 콘텐츠 지침

사용자 측면의 웹 콘텐츠 지침 국내 환경의 웹 접근성 지침과 변경 사항에 대해 알아봅니다. 사용성 측면의 접근성 지침 자료 [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침 from Nts Nuli KWCAG 2.1 기존 항목 + 추가된 항목(2개) 1. 적절한 대체 텍스트 제공 2. 자막 제공 3. 색에 무관한 콘텐츠 인식 4. 명확한 지시사항 제공 5. 텍스트 콘텐츠의 명도 대비 6. 자동 재생 금지 7. 콘텐츠 간의 구분 8. 키보드 사용 보장 9. 초점 이동 10. 조작 가능 11. 응답시간 조절 12. 정지 기능 제공 13. 깜빡임과 번쩍임 사용 제한 14. 반복 영역 건너뛰기 15. 제목 제공 16. 적절한 링크 텍스트 17. 기본 언어 표시 18. 사용자 요구에 따른 실행 19...
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 5. 17:39

HTML5 요소 - header, hgroup, footer

HTML5의 구조적인 요소 살펴보기 ,, 그리고 에 대해 알아봅니다. 섹셔닝 요소(sectioning elements)는 , , 그리고 를 포함한다. 또한 , , , 그리고 까지도 포함한다. Headings(header, hgroup, h1~h6)와 footer : 이 요소는 섹셔닝 요소에서 그 도입부와 네비게이션 컨텐츠에 사용됩니다. 일반적으로 headings(h1~h6 또는 hgroup) 요소를 포함하지만, 또한 관련 로고, 검색 폼, 테이블 컨텐츠, 링크 항목, 또는 nav 요소와 같은 다른 컨텐츠도 담을 수 있습니다. 그러나 footer 또는 또 다른 header를 담을 수는 없습니다. : 페이지의 top 링크, copyright 데이터, 관련 문서로의 링크 항목, 그리고 누가 이 글을 썼는지 등..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 5. 17:15

HTML5 "loose" & "strick"

HTML5 그리고 "loose", "strick" 어떤 HTML을 사용하느냐에 따라 무엇이 달라지는지, 그리고 HTML5으로의 전환은 진화 발전의 관점에서 이전의 관례를 어떻게 반영하는지를 보여주기 위해 “Hello World”라는 타이틀을 가진 웹 페이지를 빠르게 살펴보고 HTML5는 다양한 마크업 스타일을 선택할 수 있게 한다는 사실에 대해 알아봅니다. 또한 우리가 생각하는 마크업 스타일!! 즉, 더 엄격하지만 배우기 쉬운 XHTML과 진보적이고 풍부한 의미론적인 색깔을 가진 HTML5의 좋은 측면들만 병합시키는 일이 최선인지를 알아봅니다. Strict DOCTYPE의 XHTML 1.0과 HTML4 첫번째 예제는 Strict DOCTYPE을 사용하는 XHTML 1.0 버전의 스타일로 유효한 것이며, ..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 5. 12:36

웹 접근성을 고려한 UI 컴포넌트 - 캐로셀(carousel) 편

웹 접근성 UI Component Carousel 웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편 from yamoo9 주의사항 http://www.w3.org/WAI/tutorials/carousels/ http://www.w3.org/WAI/tutorials/carousels/animations/ Jaehee's WebClub
HTMLㆍ웹표준ㆍ 웹접근성 2015. 11. 25. 11:02