CSS3
CSS3(Cascading Style Sheet)
HTML 문서를 표현하는 방법
HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈
CSS3 예제
CSS 적용 전 CSS 적용 후
CSS3(Cascading Style Sheet)
인라인 스타일 시트
내부 스타일 시트
외부 스타일 시트
3
선택자
특정한 HTML 태그를 선택할 때 사용
이 외 다양한 선택자가 존재함
선택자 종류 형태 예
전체 선택자 * *
태그 선택자 태그 h1
아이디 선택자 #아이디 #header
클래스 선택자 .클래스 .item
h1 { color: blue; }
선택자 스타일 속성 스타일 값
예제 1. 전체 선택자
5
예제 2. 태그 선택자
한꺼번에 여러 개의 선택자를 입력할 때 쉼표를 사용
예제 3. 아이디, 클래스 선택자
7
예제 3. 아이디, 클래스 선택자
id 속성 중복 불가
class 속성 중복 가능
후손 선택자와 자손 선택자
html 코드를 계층 구조로 따졌을 때의 부모 자식 관계
9
div
h1 h2 ul
li li li
자손 후손
부모
선택자 형태 설명
후손 선택자A 선택자B 선택자A의 후손인 선택자B 선택
자손 선택자A > 선택자B 선택자A의 자손인 선택자B 선택
예제 4. 후손 선택자
한 id 안에서 여러 개의 태그를 선택할 때
예제 5. 자손 선택자
11
반응, 상태, 구조 선택자
반응 선택자: 사용자의 반응으로 생성되는 특정한 상태를 선택
상태 선택자: 입력 양식의 상태를 선택할 때 사용
선택자 형태 설명
:active 사용자가 마우스로 클릭한 태그 선택 :hover 사용자가 마우스 커서를 올린 태그 선택
선택자 형태 설명
:checked 체크 상태의 input 태그 선택 :focus 초점이 맞추어진 input 태그 선택 :enabled 사용 가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택
반응, 상태, 구조 선택자
구조 선택자: 특정한 위치에 있는 태그를 선택할 때 사용
13
선택자 형태 설명
:first-child 형제 관계에서 첫 번째로 등장하는 태그 선택 :last-child 형제 관계에서 마지막으로 번째로 등장하는 태그 선택 :nth-child 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 :nth-last-child 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택
예제 6. 반응, 상태, 구조 선택자
예제 6. 반응, 상태, 구조 선택자
15
