CSS 선택자(1)

1. 타입 선택자 (Type Selector)

- 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.

- 타입 선택자 기본문법 : 태그 {속성: 값;}

- html, css 파일 생성

- html 파일 작성

- html 파일 실행화면

- css 파일 작성

- html 파일에 css 파일 삽입

- 실제 렌더링 된 화면

2. 클래스 선택자 (Class Selector)

- 특정 클래스 명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.

- 클래스 선택자 사용법은 타입 선택자 사용법과 흡사합니다. 태그 대신에 클래스명이 오고 클래스명 앞에 점(.)이 옵니다.

- 클래스 선택자 기본문법 : .클래스 {속성: 값;}

- 좀전의 css 문서에 greenColor 클래스를 추가합니다.

- 좀전의 html 문서에 class="greenColor" 클래스를 추가합니다.

- 렌더링 된 화면입니다. 둘째, 셋째 문구가 녹색으로 변경되었습니다.

3. 아이디 선택자 (ID Selector)

- 특정 아이디 명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다.

- 아이디 선택자는 클래스 선택자의 형태에서 점(.) 대신 샵(#)을 사용합니다.

- 아이디 선택자 기본문법 : #아이디 {속성: 값;}

- 각각의 구문에 아이디를 지정합니다.

- title1 아이디에 속성과 값을 지정합니다.

- title1의 구문 배경색이 노란색으로 변경되었습니다.

4. 하위 선택자 (Descendant Selector)

- 하위 선택자는 특정 요소의 하위에 있는 어떤 요소를 대상으로 선택할 수 있습니다.

- 하위 선택자 기본문법 : 

상위선택자 선택자 {속성: 값;}

상위선택자 .클래스 {속성: 값;}

상위선택자 #아이디 {속성: 값;}

- CSS 파일을 작성합니다. DIV 선택자 하위의 d2 라는 아이디를 가진 선택자 배경색을 노란색으로 효과를 줍니다.

 

- HTML 파일을 작성하고 CSS 파일을 연결합니다.

- 브라우저에서 렌더링 된 결과화면 입니다.

※ 다음 시간에는 "자식 선택자", "그룹 선택자", "가상 클래스 선택자"에 대해서 알아보겠습니다.