CSS

[selector] CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = 별모양 선택자

목차
  1. * 선택자 예제 - 모든 요소 선택
  2. * 선택자 정의
  3. * 선택자 예제 - div의 모든 자식요소
  4. * 선택자 예제 - div의 모든 자손요소

 

* 선택자 예제 - 모든 요소 선택

 
<style>
* {color:red;}
</style>

<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
<div>
  <p>홈페이지 제작관리 <span>Since 2012</span></p>
  <span>서버관리 + 코딩교육</span>
</div>
 
 

* 선택자 정의


모든 요소 선택.

 


 
1.
  • 특정요소의 자식이나 자손으로 사용 시, 해당 요소의 모든 자손 선택. (예제1 = 예제2) 결과동일
  • 이 선택자 적용할 땐 각별히 주의. (∵ 블럭요소(예: <p>, <div>), 인라인요소(예: <a>, <span>), 아이콘요소 (예: <i>)에 대해서 모두 적용되는 관계로, 자칫 아이콘이 엑박 될 수도 있음.)

2.
IE7 이상 모든 브라우저 지원.
 
 
 

* 선택자 예제 - div의 모든 자식요소

 

<style>

div > * {color:red;}

</style>


<h1>홈짱닷컴</h1>

<p>Homzzang.com</p>

<div>

  <p>홈페이지 제작관리 <span>Since 2012</span></p>

  <span>서버관리 + 코딩교육</span>

</div>

 

결과보기


* 선택자 예제 - div의 모든 자손요소

 

<style>

div * {color:red;}

</style>


<h1>홈짱닷컴</h1>

<p>Homzzang.com</p>

<div>

  <p>홈페이지 제작관리 <span>Since 2012</span></p>

  <span>서버관리 + 코딩교육</span>

</div>

 

결과보기



분류 제목
transition CSS - transition-timing-function 속성 - 트랜지션 속도변경곡선 (= transit…
image CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/…
pagination CSS - 페이징 - (이전페이지/다음페이지/지정페이지) 이동 링크 버튼
func CSS - 함수 종류
selector CSS - :only-of-type 가상선택자 - 타입유일 자식요소 (= 유일타입 자식요소) [유일선택자|타…
css CSS - 화면분할 좌측사이드 영역 스크롤 고정 (= 이미지/메뉴 사이드 고정)
transition CSS - transition-duration 속성 ★ - 트랜지션 완료에 걸리는 시간 (= transiti…
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
selector CSS - .class 클래스선택자 ★
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
background CSS - Multi Background 구문 - 한번에 여러 배경 속성값 사용
intro CSS - CSS3 입문
selector CSS - :root 가상선택자 - 웹문서root요소 선택. (= 루트선택자, IE9)
css CSS - 자식요소 앞에 순번 붙이기 (= 번호 매기기 = 색인번호 추가 = 요소 카운팅)
transition CSS - transition-delay 속성 - 트랜지션 시작 대기 시간 (= transition-dela…
17/35
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인