Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

516 views

Published on

-

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. BASIC HTML & CSS 5. selector, units [ 2017.01.19. Tue ]
  2. 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
  3. 3. CSS웹 문서의 디자인 요소를 담당
  4. 4. 같은 마크업 다른 디자인 http://csszengarden.com/
  5. 5. How to use?어떻게 웹 문서에서 CSS를 사용할 수 있을까?
  6. 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;">
  7. 7. Syntax문법
  8. 8. CSS Syntax p { color: red; } selector valueproperty
  9. 9. Notation표기법
  10. 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. 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
  12. 12. Selector선택자
  13. 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
  14. 14. CSS Cheat Sheet Selector
  15. 15. 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. _
  16. 16. 정답 : 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
  17. 17. CSS Priority !important > inline style > #id > .class > tag !important는 되도록 쓰지 않습니다. !important가 엉키기 시작하면 지옥이 열려요^^
  18. 18. Unit단위
  19. 19. 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 %
  20. 20. Practice오늘의 연습
  21. 21. https://flukeout.github.io/ easy to learn
  22. 22. Q&A @hyejin
  23. 23. Facebook / Twitter / Codepen @zineeworld

×