테스트 사이트 - 개발 중인 베타 버전입니다

가상 선택자 :after 의미를 모르겟어여..

· 11년 전 · 2427 · 7

 

.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 브라우저는 가상 요소 선택자를 지원하지 않습니다. 

 

이게 무슨말인지 쉽게 설명좀 부탁드립니다 ㅜㅜ

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 7개

쉽게 말하자면 내가 원할때 붙였다 뗐다 할수 있는 접미사 같은겁니다. 음.. 더 어려운가요 ;;;
물+컵 = 물컵 이런식으로 사용하는것처럼요 .
감사합니다. 쉽게 이해되었습니다!
.container:after { content:"bbb"; clear:both; display:block; }
라고 하면
<div class="container">aaa</div>
aaa 다음에 bbb 가 나옵니다.
즉..
코드에는 없지만 가상으로 있는거 처럼 꾸며준다는 얘기죠...
감사합니다. 구체적으로 예를 들어주시니 이해되네여 ^___^
11년 전
저는 :before / :after 가상 클래스를 많이 사용합니다.
특히나 오토 넘버링도 돼서 챕터나 세부 카테고리를 작성할 때에는 counter-increment를 사용하는 편입니다.
감사합니다 다음에 카운터인크리먼트도 공부해볼께여~
11년 전
:before / :after 의 기본 개념은 '가상 텍스트노드 생성' 입니다. 단순히 가상 요소- 라기보단 '텍스트'요소라는 정의가 붙어있습니다.
보통들 기본 inline 요소로 만들어진 가상요소를 CSS에서 display:block 처리해주어서 블록요소로 만든다음에 사용하죠.
div:after -> HTML로 따지자면 종료태그의 바로 전라인에 content:"" 에 입력한 텍스트를 텍스트노드로 가상으로 삽입해주게됩니다.
:before 시작태그가 열린 바로다음줄에 (제일 첫번째 자식컨텐츠) content 로 입력해준 텍스트노드를 마찬가지로.. 가상으로 만들어줍니다 :) ㅎㅎ

게시글 목록

번호 제목
26560
24588
31642
31638
31633
31630
31625
19452
6719
6718
6717
6715
27797
30907
30904
6714
6713
27791
19450
6712
6711
6709
6708
27790
19447
6706
6703
6702
6701
6697
6692
27783
6691
6687
6685
6683
6682
19446
27770
19445
27768
6681
6675
6674
19444
6672
6671
27761
6670
30900
24585
6660
6655
6653
31624
6651
31623
31621
19443
6650
31620
31619
31612
31611
27746
31605
6648
20781
31603
31600
6645
6643
6642
6640
20777
31597
6637
19442
31594
31591
31589
31586
31584
20758
19440
31575
31567
20747
6636
31563
31552
27743
24579
6630
6628
6620
6617
27732
24577
6616