[Basic HTML/CSS] 6. css - box sizing, display, margin, padding

[Basic HTML/CSS] 6. css - box sizing, display, margin, padding

• 1.
  BASIC HTML &CSS 6. box model, shorthand [ 2017.01.19. Tue ]
• 2.
  To Do 1. Selector,Units ○ selector, px, %, em, rem 2. Box model, Display, Border, Background ○ box-sizing, display, margin, padding ○ 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.
  box model
• 4.
  CSS Box Model
• 5.
  box sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• 6.
  box-sizing: content-box
• 7.
  box-sizing: border-box
• 8.
  box-sizing: padding-box
• 9.
  box-sizing: padding-box
• 10.
  display https://developer.mozilla.org/en-US/docs/Web/CSS/display
• 11.
  Display formal syntax https://developer.mozilla.org/en-US/docs/Web/CSS/display none| inline | block | list-item | inline-list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents
• 12.
  border https://developer.mozilla.org/en-US/docs/Web/CSS/border
• 13.
  border: 1px solid#ff0000 Border formal syntax border-width border-colorborder-style
• 14.
  background https://developer.mozilla.org/en-US/docs/Web/CSS/background
• 15.
  Background formal syntax ●background: red ○ background-color: red ● background: url('img.jpg') no-repeat center top / cover ○ background-image: url('img.jpg') ○ background-repeat: no-repeat ○ background-position: center top ○ background-size: cover
• 16.
  Practice오늘의 연습
• 17.
  @zineeworld Ryan http://codepen.io/collection/DzKOkZ/
• 18.
  Facebook / Twitter/ Codepen @zineeworld