가상 선택자 :after 의미를 모르겟어여..
.container:after { content:""; clear:both; display:block; }
가상 선택자란 실제로는 존재하지 않는 요소나 특수한 상황에서만 발생하는 동적인 요소를 CSS 명령으로 제어하는 기법 입니다. 가상 선택자는 다시 '가상 클래스 선택자'와 '가상 요소 선택자'로 구분할 수 있는데요. 가상 클래스 선택자(:link, :visited, :hover,:active, :focus, :first-child)는 특정 요소에 마치 동적으로 class를 부여한 것과 같은 이치로 이용할 수 있습니다. 가상 요소 선택자(:first-line, :first-letter, :before, :after)는 실제로 존재하지 않는 요소를 마치 존재하는 것처럼 이용하는 기법 입니다. :after라는 가상 요소 선택자는 content 라는 속성을 이용해서 .container 블럭이 끝나기 직전 content 속성의 값 "*" 을 화면에 출력할 수 있습니다. 이렇게 생성된 요소에 clear:both 속성을 부여하면 자식의 높이를 부모에게 전달할 수 있는데 실제로 HTML 코드에는 빈 요소가 존재하지 않기 때문에 가장 이상적인 방법이라고 할 수 있습니다. 그러나 IE 6~7 브라우저는 가상 요소 선택자를 지원하지 않습니다.
이게 무슨말인지 쉽게 설명좀 부탁드립니다 ㅜㅜ
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 7개
물+컵 = 물컵 이런식으로 사용하는것처럼요 .
라고 하면
<div class="container">aaa</div>
aaa 다음에 bbb 가 나옵니다.
즉..
코드에는 없지만 가상으로 있는거 처럼 꾸며준다는 얘기죠...
특히나 오토 넘버링도 돼서 챕터나 세부 카테고리를 작성할 때에는 counter-increment를 사용하는 편입니다.
보통들 기본 inline 요소로 만들어진 가상요소를 CSS에서 display:block 처리해주어서 블록요소로 만든다음에 사용하죠.
div:after -> HTML로 따지자면 종료태그의 바로 전라인에 content:"" 에 입력한 텍스트를 텍스트노드로 가상으로 삽입해주게됩니다.
:before 시작태그가 열린 바로다음줄에 (제일 첫번째 자식컨텐츠) content 로 입력해준 텍스트노드를 마찬가지로.. 가상으로 만들어줍니다 :) ㅎㅎ