css 특성

css의 특성은?

- 폭포수 (폭포수가 아래로 떨어지듯)

/* 같은 태그에 대한 규칙이 있는 경우 => 마지막으로 작성된 규칙정용 */

h1 {
		color: brown;
    {
 
h1 {
 		color: red;
     }

   

- 상속 ( 부보요소의 css 규칙을 자식요소가 상속하여 적용)

<div>
		<p class="p_name">안녕하세요 </p>
</div>

div {
		color: brown;
     }
     
 /* 자식요소가 상속하여 div태그 p태그 모두  color가 brown으로 적용 */

 

자식요소가 css 규칙을 가지고 있다면?

<div>
	<p class="p_name">안녕하세요</p>
        <h2 class="h2_name">반가워요</h2>
</div>

div {
		color: brown;
     }
   
p.p_name {
		color: blue;
        }
        
/* 자식요소를 우선으로 적용 */
/* p태그는 color가 blue 나머지 div 태그는 brown */

 

- 우선순위 (css 규칙이 서로 충돌할때 어떤 것을 적용할지)

HTML 요소의 style 속성	1000
id로 선택된 요소	100
class로 선택된 요소	10
태그의 이름으로 선택된 요소	1

 

HTML 요소의 style 속성 vs 태그의 이름으로 선택된 요소

<div>
		<h2 style="color: blue;">반가워요</h2>
</div>

h2 {
		color: brown;
    }
    
/* HTML요소의 style속성과 태그의 이름으로 선택된 요소가 겹친다면 style속성이 우선순위 */
/* h2 태그의 color는 blue로 적용 */

class로 선택된 요소 vs 태그의 이름으로 선택된 요소

<div>
		<h2 class="h2_name"> 반가워요 </h2>
</div>

h2 {
		color: brown;
    }

.h2_name {
		color: blue;
        }
        
/* class로 선택된 요소와 태그의 이름으로 선택된 요소가 겹친다면 css적용은 class로 선택된 요소가 우선순위 */
/* h2 태그의 color는  blue */