.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개
:before / :after 의 기본 개념은 '가상 텍스트노드 생성' 입니다. 단순히 가상 요소- 라기보단 '텍스트'요소라는 정의가 붙어있습니다.
보통들 기본 inline 요소로 만들어진 가상요소를 CSS에서 display:block 처리해주어서 블록요소로 만든다음에 사용하죠.
div:after -> HTML로 따지자면 종료태그의 바로 전라인에 content:"" 에 입력한 텍스트를 텍스트노드로 가상으로 삽입해주게됩니다.
:before 시작태그가 열린 바로다음줄에 (제일 첫번째 자식컨텐츠) content 로 입력해준 텍스트노드를 마찬가지로.. 가상으로 만들어줍니다 :) ㅎㅎ
보통들 기본 inline 요소로 만들어진 가상요소를 CSS에서 display:block 처리해주어서 블록요소로 만든다음에 사용하죠.
div:after -> HTML로 따지자면 종료태그의 바로 전라인에 content:"" 에 입력한 텍스트를 텍스트노드로 가상으로 삽입해주게됩니다.
:before 시작태그가 열린 바로다음줄에 (제일 첫번째 자식컨텐츠) content 로 입력해준 텍스트노드를 마찬가지로.. 가상으로 만들어줍니다 :) ㅎㅎ
게시글 목록
| 번호 | 제목 |
|---|---|
| 6615 | |
| 6614 | |
| 6606 | |
| 19438 |
JavaScript
audio 음악이 끝났을때 이벤트를 넣을 수 있나요?
1
|
| 6604 | |
| 6592 | |
| 6588 | |
| 6586 | |
| 6583 | |
| 6577 | |
| 19437 |
JavaScript
캔버스 ( html5 ) 그림 그리기3
|
| 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 |
JavaScript
캔버스 ( html5 ) 그림 그리기2
|
| 6514 | |
| 19433 |
JavaScript
캔버스 ( html5 ) 그림 그리기
|
| 6503 | |
| 19432 |
jQuery
파일 첨부시심플하게 버튼으로만 되게..
|
| 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 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기