2 CSS3 선택자 기본.

Presentation on theme: "2 CSS3 선택자 기본."— Presentation transcript:

1 2 CSS3 선택자 기본

2 강의 목차 CSS3 선택자 개요 CSS3 선택자 종류

3 선택자 개요 선택자 (Selector) 스타일을 적용할 때에 선택자는 다음 위치에 사용한다.
스타일쉬트에서 특정한 HTML 태그 등을 선택할 때에 사용하는 기능 원하는 태그 등을 선택하여 원하는 스타일과 기능을 적용할 수 있다. 스타일을 적용할 때에 선택자는 다음 위치에 사용한다.

4 전체 선택자 (1) HTML 문서 안의 모든 태그를 선택할 때는 전체 선택자를 사용한다.
다음 코드는 문서 안의 모든 태그의 color 속성을 red로 지정한다.

5 전체 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

6 태그 선택자 (1) 태그 선택자는 특정한 HTML 태그를 선택한다. 다음 코드는 h1 태그와 p 태그를 선택한다.

7 태그 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

8 아이디 선택자와 클래스 선택자 (1) 아이디 선택자 아이디 선택자는 특정한 id 속성을 가지고 있는 태그를 선택한다.
다음과 같은 방법으로 사용한다.

9 아이디 선택자와 클래스 선택자 (2) 클래스 선택자 클래스 선택자는 특정한 class 속성을 가지고 있는 태그를 선택한다
다음과 같은 방법으로 사용한다.

10 아이디 선택자와 클래스 선택자 (3) 실행 결과는 다음과 같다.

11 속성 선택자 (1) 속성 선택자는 특정한 속성을 가진 태그를 선택할 때 사용한다. 기본 속성 선택자
기본 속성 선택자는 특정한 속성의 존재 유무와 속성 값을 판별할 때 에 사용한다.

12 속성 선택자 (2) 다음과 같은 방식으로 사용한다.

13 속성 선택자 (3) 문자열 속성 선택자 문자열 속성 선택자는 태그가 가지고 있는 속성의 특정한 문자열을 확 인한다.
다음과 같은 방법으로 사용한다.

14 속성 선택자 (4) 실행 결과는 다음과 같다.

15 후손 선택자와 자손 선택자 (1) 다음과 같은 코드가 있다. 이때 div 태그의 자손과 후손은 다음과 같이 정의한다.

16 후손 선택자와 자손 선택자 (2) 후손 선택자 후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다.
후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다. 후손 선택자는 다음과 같은 방법으로 사용한다.

17 후손 선택자와 자손 선택자 (3) 자손 선택자 자손 선택자는 특정한 태그 아래에 있는 자손을 선택할 때 사용하는 선택자이다.
자손 선택자는 특정한 태그 아래에 있는 자손을 선택할 때 사용하는 선택자이다. 자손 선택자는 다음과 같은 방법으로 사용한다.

18 동위 선택자 (1) 다음과 같은 코드가 있다. 이때 li 태그와 동위 관계에 있는 태그는 다음과 같이 정의한다.

19 동위 선택자 (2) 동위 선택자 동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다.
동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다. 다음과 같은 방법으로 사용한다.

20 동위 선택자 (3) 코드를 실행하면 다음과 같다.

21 반응 선택자 (1) 반응 선택자 반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자이다.
반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자이다. 사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고 클릭하면 active 상태가 적용된다. 다음과 같은 방법으로 사용한다.

22 반응 선택자 (2) 코드를 실행하고 마우스를 올리고 클릭하면 다음과 같이 색상이 변경 된다.

23 상태 선택자 (1) 상태 선택자 상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자이다.
다음과 같은 상태를 check 상태라고 한다. 다음과 같은 상태를 focus 상태라고 한다.

24 상태 선택자 (2) 다음과 같은 방법으로 사용한다.

25 구조 선택자 (1) 구조 선택자 일반 구조 선택자 구조 선택자는 CSS3부터 지원하는 선택자이다.
일반적으로 자손 선택자와 병행해서 많이 사용한다. 일반 구조 선택자 일반 구조 선택자는 특정한 위치에 있는 태그를 선택하는 선택자이다. :first-child 선택자는 CSS2.1부터 지원하고 있다. 다음과 같은 방법으로 사용한다.

26 구조 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

27 구조 선택자 (3) 형태 구조 선택자 형태 구조 선택자는 일반 구조 선택자와 비슷하지만 태그 형태를 구분 한다.
다음과 같은 방법으로 사용한다.

28 구조 선택자 (4) 코드를 실행하면 다음과 같이 출력한다.

29 문자 선택자 (1) 문자 선택자 시작 문자 선택자 문자 선택자는 태그 내부의 특정한 조건의 문자를 선택하는 선택자이 다.
시작 문자 선택자는 태그 내부의 첫 번째 글자나 첫 번째 줄을 선택할 때 사용하는 선택자이다. 다음과 같은 방법으로 사용한다.

30 문자 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

31 문자 선택자 (3) 반응 문자 선택자 반응 문자 선택자는 사용자가 문자와 반응해서 생기는 영역을 선택하 는 선택자이다.
다음과 같은 방법으로 사용한다.

32 문자 선택자 (4) 코드를 실행하면 다음과 같이 출력한다.

33 링크 선택자 (1) 링크 선택자 링크 선택자는 href 속성을 가지고 있는 a 태그와 한 번 이상 다녀온 링크를 선택할 수 있는 선택자이다. 다음과 같은 방법으로 사용한다.

34 링크 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

35 부정 선택자 (1) 부정 선택자 부정 선택자는 지금까지 배운 선택자를 모두 반대로 적용할 수 있게 만드는 선택자이다.
부정 선택자는 지금까지 배운 선택자를 모두 반대로 적용할 수 있게 만드는 선택자이다. 다음과 같은 방법으로 사용한다.

36 부정 선택자 (2) 코드를 실행하면 다음과 같이 출력한다.

37