![Page 1: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/1.jpg)
CSS3 기본
![Page 2: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/2.jpg)
CSS3(Cascading Style Sheet)
HTML 문서를 표현하는 방법
HTML은 웹 페이지의 몸체를 구축하고 CSS로 웹 페이지를 꾸밈
CSS3 예제
22017-03-31
CSS 적용전 CSS 적용후
![Page 3: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/3.jpg)
CSS3(Cascading Style Sheet)
인라인 스타일 시트
내부 스타일 시트
외부 스타일 시트
32017-03-31
![Page 4: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/4.jpg)
선택자
특정한 HTML 태그를 선택할 때 사용
이 외 다양한 선택자가 존재함
선택자종류 형태 예
전체선택자 * *
태그선택자 태그 h1
아이디선택자 #아이디 #header
클래스선택자 .클래스 .item
42017-03-31
h1 { color: blue; }선택자 스타일속성 스타일값
![Page 5: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/5.jpg)
예제 1. 전체선택자
52017-03-31
![Page 6: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/6.jpg)
예제 2. 태그선택자
62017-03-31
한꺼번에여러개의선택자를입력할때쉼표를사용
![Page 7: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/7.jpg)
예제 3. 아이디, 클래스선택자
72017-03-31
![Page 8: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/8.jpg)
예제 3. 아이디, 클래스선택자
82017-03-31
id 속성 중복 불가
class 속성 중복 가능
![Page 9: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/9.jpg)
후손선택자와자손선택자
html 코드를 계층 구조로 따졌을 때의
부모 자식 관계
92017-03-31
div
h1 h2 ul
li li li
자손 후손
부모
선택자형태 설명
후손 선택자A 선택자B 선택자A의후손인선택자B 선택
자손 선택자A > 선택자B 선택자A의자손인선택자B 선택
![Page 10: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/10.jpg)
예제 4. 후손선택자
102017-03-31
한 id 안에서여러개의태그를선택할때
![Page 11: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/11.jpg)
예제 5. 자손선택자
112017-03-31
![Page 12: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/12.jpg)
반응, 상태, 구조선택자
반응 선택자: 사용자의 반응으로 생성되는 특정한 상태를 선택
상태 선택자: 입력 양식의 상태를 선택할 때 사용
122017-03-31
선택자형태 설명
:active 사용자가마우스로클릭한태그선택
:hover 사용자가마우스커서를올린태그선택
선택자형태 설명
:checked 체크상태의 input 태그선택
:focus 초점이맞추어진 input 태그선택
:enabled 사용가능한 input 태그선택
:disabled 사용불가능한 input 태그선택
![Page 13: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/13.jpg)
반응, 상태, 구조선택자
구조 선택자: 특정한 위치에 있는 태그를 선택할 때 사용
132017-03-31
선택자형태 설명
:first-child 형제관계에서첫번째로등장하는태그선택
:last-child 형제관계에서마지막으로번째로등장하는태그선택
:nth-child 형제관계에서앞에서수열번째로등장하는태그선택
:nth-last-child 형제관계에서뒤에서수열번째로등장하는태그선택
![Page 14: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/14.jpg)
예제 6. 반응, 상태, 구조선택자
142017-03-31
![Page 15: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/15.jpg)
예제 6. 반응, 상태, 구조선택자
152017-03-31
![Page 16: CSS3 기본 - Kangwoncs.kangwon.ac.kr/~whcho/2017_Spring/practice/lecture4.pdf · 2017-03-31 · CSS3(Cascading Style Sheet) HTML 문서를표현하는방법 HTML은웹페이지의몸체를구축하고CSS로웹페이지를꾸밈](https://reader033.vdocuments.site/reader033/viewer/2022042113/5e8f41c4da29787b991e6181/html5/thumbnails/16.jpg)
감사합니다