CSS

 CSS 문법

- CSS 규칙은 2가지 부분으로 구성

   (선택자 + 선언)

- Selector(선택자) : 스타일을 변경하기 원하는 HTML 태그 및 표현식

- Property(속성) : 변경하기 원하는 스타일의 속성(attribute)

 

- CSS 주석은 /* ~ */을 사용

 

 

CSS 적용 방법 3가지

- inline 스타일 ( 적용하려는 태그내에서 style="css" 형식 사용)

- internal 스타일 (적용하려는 태그가 포함된 HTML파일에서 사용)

- external 스타일 (HTML 파일과 다른 파일에서 사용, *.css 파일형식)

1. inline 스타일
<p style="color:blue;">inline style</p>

2. internal 스타일
<style type="test/css">
	.internal{
    	color:red;
    }
</style>
<p class="internal">internal style</p>

3. external style 적용 : 외부 파일로 CSS 정의
<link rel="stylesheet" type="text/css" href="external.css">
<p id="external">external style</p>

/* external.css */
#external{
	color:green;
}

 

전체 선택자(*)

- HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용

 

태그 선택자 (태그명)

- 특정한 HTML 태그를 선택, 한꺼번에 여러 개 선택할 때 ,(쉼표) 사용

 

아이디 선택자 (#아이디)

- 특정한 id 속성을 가지고 있는 태그를 선택(중복 불가)

 

클래스 선택자 (.클래스)

- 특정한 classs 속성을 가지고 있는 태그를 선택(중복 가능)

 

 

---

자식 및 자손 의미

 

자식 선택자 (부모선택자 > 자식선택자)

- 특정한 태그의 자식 요소를 선택할 때 사용

ex) 아이디가 one인 태그의 자식 중에서 h1 태그를 선택

 

자손 선택자 (부모선택자 자손선택자)

- 특정한 태그의 자손 요소를 선택할 때 사용

ex) 아이디가 one인 태그의 모든 자손 중에서 h1태그를 선택

 

인접한 특정 형제 선택자 (선택자 + 형제선택자)

- 인접한 바로 뒤의 형제 요소를 선택할 때 사용

ex) h1태그바로 뒤에 인접한 h2 태그를 선택

 

인접한 모든 형제 선택자 (선택자  ~ 형제선택자)

- 인접한 뒤의 모든 형제 요소를 선택할 때 사용

ex) h1태그 뒤에 인접한 모든 h2 태그를 선택

 

속성 선택자1 - 기본 속성 선택자

- 특정한 속성을 가진 요소를 선택할 때 사용

- 기본 속성 선택자는 특정한 속성의 존재 유무와 속성값을 이용하여 선택할 때 사용

 

 

속성 선택자2 - 문자열 속성 선택자

 

 

 

* 22.10.04 오후 5:20 수정중