본문 바로가기

부스트코스25

[부스트코스] 웹 접근성 지침 정리 2 2. 웹 점근성 지침 7) 콘텐츠 간의 구분 이웃한 콘텐츠는 구별될 수 있어야 함 테두리 이용하여 구분 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분 서로 다른 무늬를 이용하여 구분 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분 줄 간격 및 글자 간격을 조절하여 구분 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분 8) 키보드 사용 보장 모든 기능은 키보드만으로도 사용할 수 있어야 함 태그 사용시 href 속성 9) 초점 이동 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 함 아래 사용 시 초점이 안 보임. 주의해야 함 hideFocus outline: none onfocus="this.blur();" 10) 조작 가능 사용자 입력 및 컨트롤은 조작 가능하도.. 2023. 1. 2.
[부스트코스] 웹 접근성 지침 정리 1 2. 웹 접근성 지침 0) 웹 접근성 지침 소개 WCAG (Web Content Accessibility Guidelines) - W3C KWCAG (Korea) 해외 웹표준기술 동향을 토대로 국내 실정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침 원칙 4개, 지침 13개, 검사항목 24개 인식의 용이성 대체텍스트 멀티미디어 대체 수단 명료성 운용의 용이성 입력장치 접근성 충분한 시간 제공 광과민성 발작 예방 쉬운 내비게이션 이해의 용이성 가독성 예측 가능성 콘텐츠의 논리성 입력 도움 견고성 문법 준수 웹 애플리케이션 접근성 1) 적절한 대체 텍스트 제공 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 함 텍스트 아닌 콘텐츠 = 이미지 alt로 대체 텍스트 제공 input.. 2022. 12. 28.
[부스트코스] 웹 접근성의 이해 1. 웹 접근성의 이해 1) 웹 접근성이란 웹에서의 '접근성'이란? 웹에 잘 접근할 수 있는지 없는지의 정도를 의미 어떠한 사용자(장애인, 노인 등)가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 모든 사용자가 모든 기기에 접근할 수 있도록 하는 것 왜 접근성을 지켜야 하는가? 장애인차별금지법 (장차법) 전자정보 및 비전자정보에 대하여 장애인이 비장애인과 동등하게 접근·이용할 수 있도록 수화, 문자 등 맆ㄹ요한 수단 제공 2) 장애 환경 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다. _ 팀 버너스 리 장애 어떤 사물의 진행을 가로 막아 거치적거리게 하거나 충분한 기능을 하지 못하게 함.. 2022. 12. 27.
[부스트코스] 8 미디어 쿼리 8. 미디어쿼리 1)미디어쿼리 소개 반응형 웹 사이트 제작에 반드시 필요한 기술 각 미디어 매체(screen, print)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 2) 미디어 타입 & 미디어 특성 @media(at media) 미디어 타입(Media Types) 미디어 특성(Media Features) @media mediaqueries { ... } /* 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됨 */ Media Types (미디어 타입) all, braille, embossed, handheld, print, projection, screen, speech, tty, tv all, print, screen 을 현업에서 많이 사용하.. 2022. 3. 22.
[부스트코스] 7 CSS 레이아웃 7. 레이아웃 1) 속성-display DISPLAY display: none; display: inline; display: block; display: inline-block; display: list-item; display: flex; display: inline-flex; display: table; display: table-cell; box box box inline-box는 배치는 인라인처럼 되고, 속성은 box 속성 2) 속성-visibility 요소를 어떻게 숨길 것인지 결정 visibility: visible|hidden|collapse|initial|inherit; visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박.. 2022. 3. 21.
[부스트코스] 6-2 CSS 폰트, 텍스트 6. 폰트, 텍스트 8) 속성-font font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; /* size | family */ font: 2em "돋움", dotum, sans-serif; /* style | size | family */ font: oblique 2em "돋움", dotum, sans-serif; /* style | variant | weight | size/line-height | family */ font: oblique small-caps bold 16px/1.5 '돋움'.. 2022. 3. 20.