[Basic HTML/CSS] 6. css - box sizing, display, margin, padding
1 like609 views
The document discusses HTML and CSS box model, shorthand properties. It provides an overview of box-sizing properties, the CSS box model, and display properties. It also covers borders, background properties, and includes links to documentation and examples for further reference. The document is intended as a study guide for box model and shorthand properties in HTML and CSS.
![BASIC HTML & CSS
6. box model, shorthand
[ 2017.01.19. Tue ]](https://image.slidesharecdn.com/6-170304052556/85/Basic-HTML-CSS-6-css-box-sizing-display-margin-padding-1-320.jpg)
[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
- 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
- 13. border: 1px solid #ff0000 Border formal syntax border-width border-colorborder-style
- 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오늘의 연습
- 18. Facebook / Twitter / Codepen @zineeworld