CSS
CSS
CSS - 가상 선택자 ':', '::' 종류, 차이
가상 선택자 가상 클래스(pseudo class) 미리 정의되어있고 눈에 보이지 않음 :link :visited :focus :hover :active :checked :enabled :disabled :empty :first-child :last-child :nth-child() // even, odd, 1,2,3,... :first-of-type :last-of-type :nth-of-type() :nth-last-of-type() :not(선택자) 가상 요소(pseudo element) css로 element를 추가 - 렌더링 후 개발자모드를 통해 확인할 수 있지만 실제로 문서에 존재하지 않음 ::before ::after ::first-letter ::first-line ::selection 업뎃예정
웹접근성 - caption css 처리
웹접근성 table 요소의 caption은 display:none하면 안된다. 코드 caption { overflow:hidden !important; position:relative; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; border:0 !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
100% 레이아웃 잡는 방법
100% 레이아웃 기본적으로 제일 많이 사용하고 있는, 컨텐츠가 없어도 푸터가 하단에 고정되는 100% 레이아웃 잡는 방법 스크린샷 코드보기 css html, body { width:100%; height:100%; margin:0; padding:0; } header { position:relative; z-index:2; width:100%; height:80px; } .container { position:relative; z-index:1; min-height:100%; margin:-80px auto -200px; padding:80px 0 200px; } footer { clear:both; position:relative; z-index:2; width:100%; height:200px; }..
