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

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

· 11년 전 · 2430 · 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 로 입력해준 텍스트노드를 마찬가지로.. 가상으로 만들어줍니다 :) ㅎㅎ

게시글 목록

번호 제목
6615
6614
6606
19438
6604
6592
6588
6586
6583
6577
19437
6576
6575
6574
19435
27715
6571
6570
6562
6559
6553
6552
6551
6548
24572
6545
6544
6543
6541
6539
6527
6526
6524
6519
6516
27701
27699
6515
19434
6514
19433
6503
19432
6500
6497
6496
6491
6485
32041
6483
6479
6478
6475
6473
6467
6465
6462
27697
6454
6451
27695
6446
6440
6437
27688
6433
6430
6427
6426
6422
6421
6418
27686
27678
6414
6410
6404
6400
6398
6389
6384
6383
6378
6370
6363
6348
6338
6329
6328
6316
6309
6299
6296
27674
27671
6293
6282
24570
6277
6264