2018년 10월 01일 박성진 parks@kangwon.ac.kr Web & Internet [04] CSS3 2018년 10월 01일 박성진 parks@kangwon.ac.kr.

Presentation on theme: "2018년 10월 01일 박성진 parks@kangwon.ac.kr Web & Internet [04] CSS3 2018년 10월 01일 박성진 parks@kangwon.ac.kr."— Presentation transcript:

1 2018년 10월 01일 박성진 parks@kangwon.ac.kr
Web & Internet [04] CSS3 2018년 10월 01일 박성진

2 CSS3 (Cascading Style Sheet)
HTML 문서를 표현하는 방법 HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈 CSS3 예제

3 CSS3 (Cascading Style Sheet)
인라인 스타일 시트 내부 스타일 시트 외부 스타일 시트 DBLab Template by Suan

4 선택자 h1 { color: blue; } 특정한 HTML 태그를 선택할 때 사용 이 외 다양한 선택자가 존재함 선택자 종류
선택자 스타일 속성 스타일 값 선택자 종류 형태 예 전체 선택자 * 태그 선택자 태그 h1, p 아이디 선택자 #아이디 #id 클래스 선택자 .클래스 .item DBLab Template by Suan

5 예제 1. 전체 선택자 DBLab Template by Suan

6 예제 1. 전체 선택자 DBLab Template by Suan

7 예제 2. 태그 선택자 DBLab Template by Suan

8 한꺼번에 여러 개의 선택자를 입력할 때 쉼표를 사용
예제 2. 태그 선택자 한꺼번에 여러 개의 선택자를 입력할 때 쉼표를 사용 DBLab Template by Suan

9 예제 3. 아이디, 클래스 선택자 DBLab Template by Suan

10 예제 3. 아이디, 클래스 선택자 id 속성 중복 불가 class 속성 중복 가능 DBLab Template by Suan

11 후손 선택자와 자손 선택자 HTML 코드를 계층 구조로 따졌을 때의 부모 자식 관계 div h1 h2 ul li li li
선택자 형태 설명 후손 선택자A 선택자B 선택자A의 후손인 선택자B 선택 자손 선택자A > 선택자B 선택자A의 자손인 선택자B 선택 DBLab Template by Suan

12 예제 4. 후손 선택자 DBLab Template by Suan

13 예제 5. 자손 선택자 DBLab Template by Suan

14 반응, 상태, 구조 선택자 [반응] 사용자의 반응으로 생성되는 특정한 상태를 선택 [상태] 입력 양식의 상태를 선택할 때 사용
선택자 형태 설명 :active 사용자가 마우스로 클릭한 태그 선택 :hover 사용자가 마우스 커서를 올린 태그 선택 선택자 형태 설명 :checked 체크 상태의 input 태그 선택 :focus 초점이 맞추어진 input 태그 선택 :enabled 사용 가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택 DBLab Template by Suan

15 반응, 상태, 구조 선택자 [구조] 특정한 위치에 있는 태그를 선택할 때 사용 선택자 형태 설명 :first-child
형제 관계에서 첫 번째로 등장하는 태그 선택 :last-child 형제 관계에서 마지막으로 번째로 등장하는 태그 선택 :nth-child 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 :nth-last-child 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택 DBLab Template by Suan

16 예제 6. 반응,상태,구조 DBLab Template by Suan