Jessi :D

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; }..

양쪽정렬 하는 방법

단어 양쪽 정렬 단어를 영역안에서 양쪽 정렬 하는 방법 스크린샷 코드보기 css span { display:inline-block; width:60px; text-align:justify; vertical-align:middle; } span:after { content:''; display:inline-block; width:100%; } html 이 름 : 만쥬 사 는 곳 : 서울 직 업 : 웹퍼블리셔