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

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

To Do
1. 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웹 문서의 디자인 요소를 담당

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

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;">

CSS Syntax
p { color: red; }
selector valueproperty

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

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

[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. -a
5. -
6. --
10. _a
11. _1
12. __
7. -1
8. -_
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가 엉키기 시작하면 지옥이 열려요^^

CSS Units
https://developer.mozilla.org/en-US/docs/Web/CSS/length
em ex ch rem
vh vw vmin vmax
px mm q cm in pt pc %

https://flukeout.github.io/
easy to learn

Facebook / Twitter / Codepen
@zineeworld

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

More Related Content

What's hot (7)

Viewers also liked (8)

Similar to [Basic HTML/CSS] 5. css - selector, units (20)

More from Hyejin Oh (12)

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