3강 - 01.06 셀럭터,우선순위,캐스캐이딩

실습1-class selector

여러가지 클래스를 한 번에 스타일링 할 수 있다. 중복사용 가능

태그선택자보다 클래스선택자를 선호한다.

.selector{
  background:yellow;
  width:150px;
}
.class-selector{
  color:red;
}

<!-- 선택자 -->
<div class="class-selector selector">클래스 선택자</div>
<div class="class-selector">두번째 class-selector</div>
<p class="selector">태그 선택자</p>
<p id="id-selector">id 선택자</p>

 

실습2 - id선택자

선택자 앞에 # 을 붙여서 사용한다. 클래스선택자처럼 중복해서 사용 불가능.

 

실습3 - 우선순위 (구체성 점수)

id 선택자의 구체성 값 : 100점
Class 선택자 및 가상클래스의 구체성 값 : 10점
태그 선택자 및 가상요소 구체성 값 : 1점 

위 점수표대로 css스타일링 구문이름마다 점수를 매기면,

점수순이 우선순위 순.   따로 사이트가 존재  참고 -> 구체성 점수 계산해주는 사이트

 

 

실습4 - css스타일링 주의점

region태그내에 특정 클래스인 korea만을 스타일링 -> .region .korea

.region .korea { ... } 와  .region.korea{ ... }는 완전히 다른 문법 (띄어쓰기 살펴보기)

 

직계자손만 선택하려면 .container > p { ... } 로 표현가능

 

 

실습5 - 캐스캐이딩

웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인  그리고 웹페이지 저자의 디자인이 결합될 수 있다는 경험에서 만들어진 개념.