웹접근성 skip navi

skip navi란? 사용자 편의 및 웹 접근성향상을 위한 skip navi를 body 최상단에 넣어준다. 마우스나 키보드를 사용하지 못해 tab키를 사용해야 하는 사용자에게 사이트 최상단에 바로가기를 만들어 줌으로써 원하는 영역에 바로 갈 수 있게 도와주는 기능을 한다. 사용예제 #skipNav{position:relative; width:100%; overflow:hidden;} #skipNav a{display:block; height:1px; margin-bottom:-1px; overflow:hidden; text-align:center;} #skipNav a:hover, #skipNav a:focus, #skipNav a:active{height:auto; padding:5px 0; backg..

2021.11.19

CSS3 animation

CSS3 animation CSS의 속성을 이용하여 애니메이션을 표현 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 다음 세가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. 자바스크립으를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못했다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다. 브라우저는 애니메이션의 성능을 효율적으로 최적화 할 수 있다. 예를 들어 현재 안보..

2021.11.18

벤더 프리픽스 (Vendor Prefix)

Vendor Prefix? 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다. 벤더프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 버전의 웹 즈라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 즉, 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있다. 주요 웹 브라우저의 벤더 프리픽스 (vendor prefix) 주요 웹 브라우저가 사용하고 있는 벤..

2021.11.17

CSS3 Color (feat. alpha)

CSS3 COLOR CSS3에서는 컬러값을 rgba, hsla로 사용할 수 있다. 마지막 값인 alpha로 투명도 조절까지 가능해졌다. 또한 단계적 색 적용을 위한 그라디언트 속성이 추가되었다. 배경색 뿐 아니라 모든 색상의 속성을 지정하는 곳이면 사용 가능하다. 1. rgba([r],[g],[b],[a]); .rgbBox{ background:rgba(0,255,0,0.3); } r: 빨간색의 수치 0~255 g: 녹색의 수치 0~255 b: 파란색의 수치 0~255 a: 투명도 0~1 2. hsla([h],[s],[l],[a]); .hsla_box{ background:hsla(0,100%,60%,0.4); } h: 색상 값 0~360 s: 채도 0~100% l: 명도 0~100% a: 투명도 0~1..

2021.11.12

CSS3 선택자(Selector), 가상선택자(Virtual selector)

CSS Selector CSS3에서는 선택자 속성이 새롭게 추가되었다. selector를 사용하게 되면 id나 class를 대폭 줄일 수 있는 장점이 있다. 배분 대표사업의 핵심 브랜드화 창의적 배분구조/사업/플랫폼의 인큐베이팅 공익단체 역량의 집중 강화(교육,컨설팅) 사회이슈에 대한 전자구적 인식과 대응 창의적 참여적 시민기부모델 개발 창립 10주년 기념 사이트 "나눔으로 함께 만든 10년"사이트 오픈 서울시 강남구 역삼동 000-000번지 tel:00-000-0000 유사클래스 네임 (해당 문자를 포함하는 클래스 명) li[class^=yul] class 이름이 yul로 시작되는 li 요소 li[class$=seot] class 이름이 seot로 끝나는 li 요소 li[class*=hana] clas..

2021.11.12

HTML5 새로운 폼 요소

1. input 요소 HTML5 에서는 강력한 form 속성을 지원한다. 때문에 어려운 스크립트 없이도 다양한 ui를 표현할 수 있다. 이메일 입력을 위한 email 리소스 주소 입력을 위한 url 일정한 범위의 숫자를 입력받기 위한 number * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 일정한 범위의 숫자를 입력받기 위한 range * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 날짜를 입력받기 위한 date 검색을 위한 search 전화번호 입력을 위한 tel 색상 입력을 위한 color 2. output요소 output 요소는 사용자가 입력을 받기 위한 요소가 아니라 서식에서 출역용으로 사용하는 요소이..

2021.11.11