이전
목록
다음
북

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

북금곰
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2014-07-08 (화) 13:30:32 · 5504 · 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개

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

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,530
15-12-13 조회 2,946
15-12-11 조회 2,607
15-12-11 조회 2,568
15-12-11 조회 2,571
15-12-10 조회 2,529
15-12-10 조회 2,588
15-12-10 조회 2,561
15-12-03 조회 3,203
15-12-03 조회 2,718
15-11-25 조회 2,800
15-11-09 조회 3,210
15-11-04 조회 2,971
15-06-09 조회 4,095
15-05-06 조회 5,093
15-03-28 조회 4,576
14-12-05 조회 4,999
14-10-25 조회 5,098
14-10-13 조회 4,273
14-10-03 조회 6,262
14-09-19 조회 4,966
14-09-18 조회 4,050
14-09-13 조회 4,615
14-09-03 조회 5,603
14-08-26 조회 4,210
14-08-26 조회 4,014
14-08-26 조회 3,979
14-08-11 조회 6,508
14-08-06 조회 4,127
14-08-06 조회 3,725
14-08-06 조회 3,939
14-08-01 조회 6,306
14-08-01 조회 3,843
14-07-30 조회 4,444
14-06-28 조회 5,167
14-06-28 조회 4,438
14-05-11 조회 4,592
14-05-09 조회 4,950
14-05-09 조회 7,713
14-04-30 조회 4,337
14-04-27 조회 4,197
14-04-25 조회 4,900
14-04-21 조회 3,878
14-04-21 조회 5,006
14-04-10 조회 4,605
14-04-01 조회 6,158
14-03-03 조회 3,533
14-02-25 조회 5,922
14-02-14 조회 5,196
14-02-13 조회 4,953
14-01-03 조회 4,446
13-12-06 조회 3,767
13-11-22 조회 5,522
13-11-18 조회 4,030
13-10-02 조회 4,448
13-10-02 조회 3,698
13-10-02 조회 3,962
13-10-02 조회 3,818
13-10-02 조회 4,184
13-09-16 조회 8,032
13-09-16 조회 5,397
13-08-18 조회 5,429
13-07-11 조회 4,111
13-07-10 조회 4,696
13-07-09 조회 4,733
13-07-09 조회 4,988
13-07-04 조회 4,487
13-07-04 조회 4,126
13-07-04 조회 4,239
13-07-01 조회 4,727
13-07-01 조회 4,560
13-07-01 조회 6,836
13-06-23 조회 4,383
13-06-05 조회 3,629
13-05-29 조회 4,870
13-05-10 조회 4,279
13-04-05 조회 4,899
13-04-05 조회 6,586
13-04-05 조회 1.1만
13-04-05 조회 7,182
13-04-05 조회 6,570
13-03-31 조회 5,840
13-03-31 조회 4,166
13-03-28 조회 4,528
13-03-28 조회 6,724
13-03-28 조회 9,207
13-03-28 조회 4,339
13-03-24 조회 3,955
13-03-21 조회 4,632
13-03-21 조회 1.8만
13-03-14 조회 3,938
13-03-10 조회 4,748
13-03-10 조회 4,508
13-03-10 조회 4,207
13-03-08 조회 5,264
13-03-08 조회 4,370
13-03-03 조회 5,026
13-03-03 조회 7,482
13-03-03 조회 4,222
13-03-03 조회 1.1만
글쓰기