BASIC HTML & CSS6. box model, shorthand

[ 2017.01.19. Tue ]

To Do1. 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

box model

CSS Box Model

box sizinghttps://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing: content-box

box-sizing: border-box

box-sizing: padding-box

box-sizing: padding-box

displayhttps://developer.mozilla.org/en-US/docs/Web/CSS/display

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

borderhttps://developer.mozilla.org/en-US/docs/Web/CSS/border

border: 1px solid #ff0000

Border formal syntax

border-width border-colorborder-style

backgroundhttps://developer.mozilla.org/en-US/docs/Web/CSS/background

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

Practice오늘의 연습

@zineeworld

Ryan

http://codepen.io/collection/DzKOkZ/

Facebook / Twitter / Codepen

@zineeworld