본문 바로가기
반응형

IT/Web106

HTML5 & CSS3 - 이미지 스프라이트 기법 ■ 이미지 스프라이트(Image Sprite)란? - 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법 - 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭이 절약됩니다. 네이버의 경우에 메인화면에서 다음과 같은 Image Sprite를 사용하고 있고, 다음의 경우에는 다음과 같은 Image Sprite를 사용하고 있답니다. (여러개로 쪼개져 있는데 그 중 하나에요^^) 전 메뉴바를 이미지 스프라이트를 이용해서 만들어 보겠습니다. 기본 상태와.. IT/Web 2019. 7. 25.
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.
반응형

티스토리툴바