[basic html/css] 5. css - selector, units
TRANSCRIPT
![Page 1: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/1.jpg)
BASIC HTML & CSS5. selector, units
[ 2017.01.19. Tue ]
![Page 2: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/2.jpg)
To Do1. Selector, Units
○ selector, px, %, em, rem
2. Box model, Display, Border, Background○ box-sizing, display, margin, padding, shorthand○ border, background
3. Text, Font, Web Font, Position, Float○ font-family, font-size, font-weight, color, text-decoration, text-shadow○ position, float, clear
4. Inheritance, Cascading, Effect○ inherit, box-shadow, transition, transform, animation, keyframes
![Page 3: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/3.jpg)
CSS웹 문서의 디자인 요소를 담당
![Page 5: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/5.jpg)
How to use?어떻게 웹 문서에서 CSS를 사용할 수 있을까?
![Page 6: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/6.jpg)
CSS 사용방법
1. include css file○ <link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
2. <style> in <head>○ <head>
<style> div { font-size: 20px; color: red; } <style></head>
3. inline css○ <div style="font-size: 20px; color: red;">
![Page 7: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/7.jpg)
Syntax문법
![Page 8: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/8.jpg)
CSS Syntax
p { color: red; }selector valueproperty
![Page 9: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/9.jpg)
Notation표기법
![Page 10: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/10.jpg)
CSS 표기법
h1 { font-size: 20px; color: #fff; }
h1 { font-size: 20px; color: #fff; }
h1 { font-size: 20px; color: #fff; }
표기법은 다르지만 모두 같은 소스 입니다.
/* 주석(Comment)h1 { font-size: 20px; color: #fff; } */
![Page 11: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/11.jpg)
CSS 표기법
h1 { font-size: 20px; color: #fff; }
h1 { font-size: 20px color: #fff}
h1 font-size: 20px color: #fff
CSS SCSS SASS
CSS Preprocessor
![Page 12: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/12.jpg)
Selector선택자
![Page 13: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/13.jpg)
CSS Selector
1. 전체 선택자2. 태그 선택자3. 아이디 선택자4. 클래스 선택자5. 태그+아이디 선택자6. 태그+클래스 선택자7. 그룹 선택자8. 하위 선택자9. 하위 직속 레벨 선택자
10. 같은 레벨 선택자11. 상태 선택자
• *• div• #mmt• .mmt• div#mmt• div.mmt• div, span• div span• div > span• div + span• :focus, :hover
![Page 14: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/14.jpg)
CSS Cheat Sheet Selector
![Page 15: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/15.jpg)
![Page 16: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/16.jpg)
id/class naming rule
1. 가2. a1-_3. 1
hong jisoo moonju seho hangyo
2 8 9 7, 4 1, 5, 6, 12
4. -a5. -6. --
10. _a11. _112. __
7. -18. -_9. _
![Page 17: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/17.jpg)
정답 : 3, 5, 6, 7번3번 = '숫자'로 시작할 수 없음5번 = '하이픈'으로만 구성할 수 없음6번 = '하이픈+하이픈'으로 시작할 수 없음
ㄴ 윈도우 크롬 (o) 파이어폭스 (o) / IE11 (x)ㄴ 맥 크롬(o) / 사파리-버전 10.0.2(11602.3.12.0.1) (x)
7번 = '하이픈+숫자'로 시작할 수 없음
출처: http://zinee-world.tistory.com/438 [zineeworld]
id/class naming rule
![Page 18: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/18.jpg)
CSS Priority
!important > inline style > #id > .class > tag
!important는 되도록 쓰지 않습니다. !important가 엉키기 시작하면 지옥이 열려요^^
![Page 19: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/19.jpg)
Unit단위
![Page 20: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/20.jpg)
CSS Units
https://developer.mozilla.org/en-US/docs/Web/CSS/length
em ex ch remvh vw vmin vmax
px mm q cm in pt pc %
![Page 21: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/21.jpg)
Practice오늘의 연습
![Page 23: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/23.jpg)
Q&A @hyejin
![Page 24: [Basic HTML/CSS] 5. css - selector, units](https://reader033.vdocuments.mx/reader033/viewer/2022042515/58ed3ba91a28ab05158b45c9/html5/thumbnails/24.jpg)
Facebook / Twitter / Codepen
@zineeworld