본문 바로가기
반응형

분류 전체보기256

웹 접근성 지침 소개 WCAG (Web Content Accessibility Guidelines) W3C에서 발표한 웹 콘텐츠 접근성 지침. 1990년대부터 영국 · 호주 · 미국 · 일본 등이 장애인 차별 금지 관련법에 따라 모든 이의 웹 접근성을 높였으며, 1997년 5월 W3C가 '웹 콘텐츠 접근성 지침(WCAG)'를 내놓아 제도 확산에 속도를 더했습니다. KWCAG (Korean Web Content Accessibility Guidelines) 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침. 원칙 4개, 지침 13개, 항목 24개로 구성. 한국도 2009년 5월 '국가 정보화 기본법'을 개정해 '장애인 · 고령자 등의 정보 접근 및 이용 보장'을 명시했으며, 2015년까지.. 2020. 3. 31.
웹 접근성_장애환경 팀 버너스리 " 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든사람이 접근할 수 있도록 하는 것이 웹의 필수 요소이다. " 장애란? 어떤 사물의 진행을 가로막아 거치적거리게 하거나 충분한 기능을 하지 못하게 함. 또는 그런 일 두 번째 신체 기관이 본래의 제 기능을 하지 못하거나 정신 능력에 결함이 있는 상태. 즉, 신체적 또는 정신적 결함이 있는 것 뿐만 아니라 정보를 얻지 못하도록 방해하는 것도 장애가 된다는 말입니다.이런 장애 환경에는 여러 장애들과 노안, 운전 중일 때 소음이 심할 때 스피커가 없어서 소리를 듣지 못할 때 소프트웨어가 지원되지 않거나 네트워크가 접속되지 않는 경우들도 있습니다. 장애 환경 1. 전맹 시각 장애 시력이 전혀, 거의 없어 앞을 볼 수 없습니다. 이분들은 더욱 발달된 .. 2020. 3. 31.
웹 접근성이란? 우리는 웹 페이지를 통해 유용하고 필요한 정보들을 얻습니다. 이런 웹 페이지에 잘 접근할 수 있는지 없는지의 정도를 웹 접근성이라고 합니다. 웹 접근성이란 무엇이고 이를 지켜야 하는 법적인 이유를 자세히 살펴보도록 하겠습니다. 접근성이란? 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻합니다. 웹 접근성이란? 어떠한 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것. 간단히 정리하면 '모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것'입니다. 웹 접근성을 지켜야 하는 첫 번째 이유 장애인 차별 금지법(장차법) 장애인 차별을 금지하는 법으로 장차법에서는 2013년 4월 11일부터 장.. 2020. 3. 31.
Viewport의 이해 스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서 모바일 웹 제작에 대한 이해가 아주 중요해졌습니다. 뷰포트는 미디어 쿼리 수업의 범위에서 벗어나기에 수업 영상에서 다루지 않았지만, 모바일 웹 사이트를 제작하기 위해 반드시 이해하고 있어야 하는 개념입니다. 스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다. 그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다. (기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.) 여기에서 실제 우리가.. 2020. 3. 31.
미디어쿼리 실습예제 (Media Queries) 실습 1. 디스플레이 크기에 따른 body요소의 background-color 변경 세부 조건 - width 0~767px 이면(주로 mobile) : gold 768px~1024px 이면(주로 tablet) : lightblue 1025px~ 이면(주로 desktop) : lightpink width 미디어 특성을 이용해서 뷰포트 가로 크기에 따라 배경 색상이 변경되는 예제를 만들어봅니다. ex: @media scrreen and (min-width:768px) and (max-width:1024px) { body { background-color : blue; } } 위 코드의 경우, 3개의 조건을 만족하기 위해 3개의 미디어 쿼리를 작성했습니다. 위 코드도 우리가 의도한 대로 정상적으로 잘 동작하지.. 2020. 3. 31.
미디어 쿼리(Media Queries) Syntax 미디어 쿼리 기호 [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다. a | b : a 또는 b 둘 중에 하나를 선택합니다. "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. a? : a가 0번 나오거나 1번만 나올 수 있음 a* : a가 0번 나오거나 그 이상 계속 나올 수 있음 media_type : all, screen, print 등 명세에 정의된 미디어 타입 media_feature : width, orientation 등 명세에 정의된 미디어 특성 Syntax를 요약하면 media_query_list (미디어 쿼리 리스트) : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다. media_quer.. 2020. 3. 31.
미디어 쿼리 소개/미디어 타입(Media types)&미디어 특성(Media Features) 미디어 쿼리 (Media Queries) : 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것. 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는.. 2020. 3. 30.
HTML / CSS유효성 검사 https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 합니다. 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됩니다. 첨부한 링크는 유효성 검사를 할 수 있는 주.. 2020. 3. 30.
CSS속성_z-index 요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다. 결국, 둘 중 하나는 다른 요소로 인해 덮어쓰게 됩니다. 이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다. 이것을 정하는 것이 바로 z-index의 역할입니다. 쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있습니다. z-index 속성 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다. position 값이 static이 아닌 경우에 지정 가능한 속성입니다. 순서 값이 없을 경우 생성 순서(코드상 순서)에 따라 쌓이고 number로 속성값 선언 시 큰 값이 가장 위쪽에 쌓여집니다. 부모가 z-index 값이 있을 경우 부모 안에서만 의미.. 2020. 3. 30.
CSS속성_position 요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다. position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다. position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다. position과 offset 속성을 잘 활용하면 더 다양하고 화려한 레이아웃을 구현할 수 있습니다. position 속성 요소의 위치를 정하는 방법을 지정하는 속성입니다. 속성값(static) 1. static : 다른 태그와의 관계에 의해 자동으로 배치 되며 위치를 임의로 설정할 수 없습니다. 2. absolute : 부모요소의 위치를 기준으로 offset에 따라 배치된다.(절대 위치) - 부모가 position 값(static 제외)을 가지면 off.. 2020. 3. 30.
반응형

티스토리툴바