CSS3 기본

CSS3(Cascading Style Sheet)

HTML 문서를 표현하는 방법

HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈

CSS3 예제

22018-01-03

CSS 적용전 CSS 적용후

CSS3(Cascading Style Sheet)

인라인 스타일 시트

내부 스타일 시트

외부 스타일 시트

32018-01-03

선택자

특정한 HTML 태그를 선택할 때 사용

이 외 다양한 선택자가 존재함

선택자종류 형태 예

전체선택자 * *

태그선택자 태그 h1

아이디선택자 #아이디 #header

클래스선택자 .클래스 .item

42018-01-03

h1 { color: blue; }선택자 스타일속성 스타일값

예제 1. 전체선택자

52018-01-03

예제 2. 태그선택자

62018-01-03

한꺼번에여러개의선택자를입력할때쉼표를사용

예제 3. 아이디, 클래스선택자

72018-01-03

예제 3. 아이디, 클래스선택자

82018-01-03

id 속성 중복 불가

class 속성 중복 가능

후손선택자와자손선택자

html 코드를 계층 구조로 따졌을 때의

부모 자식 관계

92018-01-03

div

h1 h2 ul

li li li

자손 후손

부모

선택자형태 설명

후손 선택자A 선택자B 선택자A의후손인선택자B 선택

자손 선택자A >선택자B 선택자A의자손인선택자B 선택

예제 4. 후손선택자

102018-01-03

한 id 안에서여러개의태그를선택할때

예제 5. 자손선택자

112018-01-03

반응, 상태, 구조선택자

반응 선택자: 사용자의 반응으로 생성되는 특정한 상태를 선택

상태 선택자: 입력 양식의 상태를 선택할 때 사용

122018-01-03

선택자형태 설명

:active 사용자가마우스로클릭한태그선택

:hover 사용자가마우스커서를올린태그선택

선택자형태 설명

:checked 체크상태의 input 태그선택

:focus 초점이맞추어진 input 태그선택

:enabled 사용가능한 input 태그선택

:disabled 사용불가능한 input 태그선택

반응, 상태, 구조선택자

구조 선택자: 특정한 위치에 있는 태그를 선택할 때 사용

132018-01-03

선택자형태 설명

:first-child 형제관계에서첫번째로등장하는태그선택

:last-child 형제관계에서마지막으로번째로등장하는태그선택

:nth-child 형제관계에서앞에서수열번째로등장하는태그선택

:nth-last-child 형제관계에서뒤에서수열번째로등장하는태그선택

예제 6. 반응, 상태, 구조선택자

142018-01-03

예제 6. 반응, 상태, 구조선택자

152018-01-03

감사합니다