CSS3 규칙과 셀렉터

목  차

1. CSS3 규칙

2. 셀렉터

---

1. CSS3 규칙

- CSS 스타일 시트에는 2 가지의 규칙이 있는데 내용은 아래와 같다.

 

1. CSS3 스타일은 부모 태그로부터 상속된다.
2. 스타일 합치기(cascading)와 오버라이딩(overriding)

 

(1번 규칙)

- 자신을 둘러싸고 있는 태그를 "부모 태그" 혹은 '부모 요소'라고 한다.

<p style="color: green;">저는 부모 태그의 영향을 받습니다.
        <em style="font-size: 25px;">저도 받습니다만?</em>

- 위와 같은 코드에서 <p>태그를 '부모 태그', <em>태그를 ' 자식 태그'라고 하며 출력 결과는 아래와 같다.

 

부모 태그의 영향을 받는 자식 태그의 모습

 

- 이처럼 자식 태그는 폰트의 크기만 조정해줬어도 부모 태그에서 글자의 색이 지정되어있을 때 자식 태그의 내용까지 영향을 받는 것을 볼 수 있다.

 

 

(2번 규칙)

- 브라우저는 각 태그에 대한 디폴트 스타일 시트를 가지고 있기 때문에, 개발자가 따로 만든 스타일이 없다면 이를 적용한다.

• 브라우저의 디폴트 스타일
• .css스타일 시트 파일에 작성된 스타일
• <style></style>태그에 작성된 스타일
• style 속성에 작성된 스타일

 

- "스타일 합치기"란 위의 4가지 스타일 시트가 태그에 동시에 적용될 때 스타일이 합쳐서 적용된다는 것을 의미한다.

- "스타일 오버라이딩"이란 일종의 '덮어쓰기'로 동일한 css3 프로퍼티에 서로 다른 값을 설정하는 충돌 시 우선순위가 높은 스타일을 적용하는 규칙을 말한다.

 

 

 

2. 셀렉터

- 셀렉터(selector)는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다.

- 아래는 셀렉터의 예시이다.

<style>
	h3 { color : brown } <!--여기서 h3이 셀렉터이다.-->
</style>

<h3>Web Programming</h3>

 

- 셀렉터에는 여러가지의 유형이 있는데,

• 태그 이름
• id 속성
• class 속성
• 여러 셀렉터를 조합

이러한 유형들이 있다.