본문 바로가기
반응형

IT944

HTML5 & CSS3 - 웹표준 이미지의 대체텍스트 넣기 IR 기법 웹접근성을 고려하기 위해 이미지에 대체 텍스트을 넣어야 한다. 개발의 편의성과 효율성을 위해 CSS에서 background ( url '' ) 로 이미지를 넣는다. background 로 이미지를 넣을 경우 html 의 img 태그와 다르게 대체 텍스트를 넣어줄 수 없어, 다른 방법으로 대체 텍스트를 넣어준다. 다음의 다룸이라는 페이지에서 웹표준에 대해 자세한 설명을 확인할 수 있다. http://darum.daum.net/convention/css/css_ir 다룸, Darum 웹표준을 다루다 HTML&CSS 본문 IR 기법 IR 기법 IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고.. IT/Web 2019. 7. 25.
HTML5 & CSS3 - 웹접근성 스킵 메뉴 만들기 스킵 메뉴란 위 사진은 네이버의 스킵 매뉴입니다. 키보드의 TAB 키를 눌렀을 때 해당 영역으로 즉시 갈 수 있는 매뉴 바로가기를 나타납니다. 스킵 메뉴가 없으면, 연합뉴스 영역으로 바로가기 위해 TAB 키를 수 없이 눌러야 한다. 그럼 왜 이걸 만들어야 할까? 우리는 웹을 만들 때 웹표준과 접근성에 대해 생각하고 만들어야 합니다. 웹 창시자인 팀 버너스는 웹을 다음과 같이 정의하고 있습니다. "어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것" 웹접근성에 대한 내용은 아래 사이트에서 확인 가능합니다. 방문하셔서 지침 및 가이드 라인을 확인하시는 것도 도움이 됩니다. https://www.wah.or.k.. IT/Web 2019. 7. 24.
HTML5 - 기본 레이아웃 만들기 레이아웃 1 전체 소스 보기 더보기 HEADER NAV SIDE CONTENTS FOOTER 레이아웃 2 전체 소스 보기 더보기 HEADER NAV SIDE_LEFT CONTENTS SIDE_RIGHT FOOTER 레이아웃 3 전체 소스 보기 더보기 side header contents footer 레이아웃 4 전체 소스 보기 더보기 header nav side content1 content2 footer 레이아웃 5 전체 소스 보기 더보기 header banner content footer 레이아웃 6 전체 소스 보기 더보기 header banner contents footer 레이아웃 7 전체 소스 보기 더보기 header-top header-nav banner content1 content2 con.. IT/Web 2019. 7. 23.
CSS3 - 반응형 웹 만들기 @media @media 속성을 이용한 화면 크기에 따른 css 적용 screen width 값에 따른 속성을 정의해서 스마트폰, 태블릿, PC 화면 등을 구별하여 정의한다. 사용법 모바일 환경: @media screen and (max-width:767px) { ... } /* 최대 크기가 767 인 것 */ 태블릿 환경: @media screen and (min-width:767px) and (max-width:959) { ... } 컴퓨터 환경: @media screen and (min-width:960) { ... } /* 최소 크기가 960 인 것, 즉 960 이상인 것 */ max-width 에 따라서 적용되게끔 작성한다. 아래 예시 HEADER menu1 menu2 menu3 menu4 menu5 Nye.. IT/Web 2019. 7. 18.
CSS3 - 반응형 웹 만들기 @media 규칙 @media media 환경에 따라서 상황에 따른 CSS를 적용할 수 있다. link 태그에 media 속성을 이용한다. 미디어 종류 all 모든 미디어 타입 aural 음성 합성 장치 braille 점자 표시 장치 handheld 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도 print 인쇄 용도 projection 프로텍터 표현 용도 screen 컴퓨터 스크린을 위한 용도 tv 음성과 영상이 동시 출력되는 TV와 같은 장치 embossed 페이지에 인쇄된 점자 표지 장치 NOTICE Nye 의 IT 세상 2019. 07. 18 write by Nye media="screen" 로 선언된 content_pc.css 파일 내용 #wrap .content { background-color:.. IT/Web 2019. 7. 18.
반응형

티스토리툴바