More Related Content
Similar to [Basic HTML/CSS] 5. css - selector, units
Similar to [Basic HTML/CSS] 5. css - selector, units (20)
[Basic HTML/CSS] 5. css - selector, units
- 2. 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
- 6. 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;">
- 10. 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;
}
*/
- 11. CSS 표기법
h1 {
font-size: 20px;
color: #fff;
}
h1 {
font-size: 20px
color: #fff
}
h1
font-size: 20px
color: #fff
CSS SCSS SASS
CSS Preprocessor
- 13. 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
- 16. 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. _
- 17. 정답 : 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
![BASIC HTML & CSS
5. selector, units
[ 2017.01.19. Tue ]](https://image.slidesharecdn.com/5-170304052513/85/Basic-HTML-CSS-5-css-selector-units-1-320.jpg)
