[ 스타일의 상속 관계 ]


웹 문서에서 사용하는 태그들은 상속의 개념이 적용된다. 그래서 부모 요소와 자식 요소가 존재한다.

예를 들어 <ul><li>목록1</li><li>목록2</li></ul> 형태가 있을 때 ul은 li의 부모 요소이고 li는 ul의 자식요소이다.

그리고 부모 요소에 있는 속성들이 자식 요소로 이어지는데 이것이 바로 '상속'이다.


상속의 예로는 body에 배경색을 넣으면 자식 요소인 <h2>와 <p> 등에도 같은 배경색이 적용된다.


그리고 스타일은 단계적으로 적용되기 때문에


p{color:red;}

p{color:blue;}


처럼 같은 태그에 다른 스타일이 적용되면 마지막으로 정의된 스타일을 적용한다. 위 소스에서는 글자색에 'blue' 가 적용된다.


선택자는 여러가지가 있다. 선택자(selector)란, 속성이 어디에 적용되는지 표시하는 것이다.


 명칭

 선택자

 설명

 전체 선택자

 * {속성:속성 값;}

 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. 

 태그 선택자

 태그 {속성:속성 값;}

 특정 태그에 스타일을 적용한다.

 클래스 선택자

 .클래스이름 {속성:속성 값;} 

 특정 클래스에 스타일을 적용한다.

 id선택자 

 #id이름 {속성:속성 값;}

 특정 id에 스타일을 적용한다.

 하위 선택자 

 상위요소 하위요소 {속성:속성 값;} 

 모든 하위 요소에 스타일을 적용한다. 

 자식 선택자

 부모요소 > 자식요소 {속성:속성 값;} 

 자식 요소에만 스타일을 적용한다. 

 인접 형제 선택자 

 요소1 + 요소2 {속성:속성 값;} 

 첫 번째 동생 요소에 스타일을 적용한다. 

 형제 선택자  

 요소1 ~ 요소2 {속성:속성 값;} 

 형제 요소에 스타일을 적용한다. 

 그룹 선택자 

 요소1,요소2 {속성:속성 값;} 

 여러 요소들에 한번에 묶어서 스타일을 적용한다. 

[ 선택자(selector) ]



 하위 선택자 

  자식 선택자  

 인접 형제 선택자

 형제 선택자 

 section ul {속성:속성 값;} 

 section > ul {속성:속성 값;}

 h1 + p {속성:속성 값;}

 h1 ~ p {속성:속성 값;}

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

[ 헷갈리기 쉬운 선택자들 ]




+ Recent posts