[basic html/css] 5. css - selector, units
TRANSCRIPT
BASIC HTML & CSS5. selector, units
[ 2017.01.19. Tue ]
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
CSS웹 문서의 디자인 요소를 담당
How to use?어떻게 웹 문서에서 CSS를 사용할 수 있을까?
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;">
Syntax문법
CSS Syntax
p { color: red; }selector valueproperty
Notation표기법
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; } */
CSS 표기법
h1 { font-size: 20px; color: #fff; }
h1 { font-size: 20px color: #fff}
h1 font-size: 20px color: #fff
CSS SCSS SASS
CSS Preprocessor
Selector선택자
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
CSS Cheat Sheet Selector
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. _
정답 : 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
CSS Priority
!important > inline style > #id > .class > tag
!important는 되도록 쓰지 않습니다. !important가 엉키기 시작하면 지옥이 열려요^^
Unit단위
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 %
Practice오늘의 연습
Q&A @hyejin
Facebook / Twitter / Codepen
@zineeworld