[basic html/css] 5. css - selector, units

24
BASIC HTML & CSS 5. selector, units [ 2017.01.19. Tue ]

Upload: hyejin-oh

Post on 12-Apr-2017

115 views

Category:

Technology


6 download

TRANSCRIPT

Page 1: [Basic HTML/CSS] 5. css - selector, units

BASIC HTML & CSS5. selector, units

[ 2017.01.19. Tue ]

Page 2: [Basic HTML/CSS] 5. css - selector, units

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

CSS웹 문서의 디자인 요소를 담당

Page 4: [Basic HTML/CSS] 5. css - selector, units

같은 마크업 다른 디자인http://csszengarden.com/

Page 5: [Basic HTML/CSS] 5. css - selector, units

How to use?어떻게 웹 문서에서 CSS를 사용할 수 있을까?

Page 6: [Basic HTML/CSS] 5. css - selector, units

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

Syntax문법

Page 8: [Basic HTML/CSS] 5. css - selector, units

CSS Syntax

p { color: red; }selector valueproperty

Page 9: [Basic HTML/CSS] 5. css - selector, units

Notation표기법

Page 10: [Basic HTML/CSS] 5. css - selector, units

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

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

Selector선택자

Page 13: [Basic HTML/CSS] 5. css - selector, units

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

CSS Cheat Sheet Selector

Page 15: [Basic HTML/CSS] 5. css - selector, units
Page 16: [Basic HTML/CSS] 5. css - selector, units

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

정답 : 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

CSS Priority

!important > inline style > #id > .class > tag

!important는 되도록 쓰지 않습니다. !important가 엉키기 시작하면 지옥이 열려요^^

Page 19: [Basic HTML/CSS] 5. css - selector, units

Unit단위

Page 20: [Basic HTML/CSS] 5. css - selector, units

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

Practice오늘의 연습

Page 22: [Basic HTML/CSS] 5. css - selector, units

https://flukeout.github.io/

easy to learn

Page 23: [Basic HTML/CSS] 5. css - selector, units

Q&A @hyejin

Page 24: [Basic HTML/CSS] 5. css - selector, units

Facebook / Twitter / Codepen

@zineeworld