CSS 치트키 1) BOX MODEL

CSS 기본 3 부분에 대한 치트키입니다! 부가설명 빼고 문법만 딱 적어놓았습니다. :) 

- CSS Syntax
- 박스모델과 레이아웃
- HTML 의 기본 텍스트/폰트 

CSS Syntax

1. Selector

- HTML element
- ID: #id
- Class: .class / element.center
- Group: h1, h2, p

2. Style Sheet- External style sheet

- External style sheet
- Internal style sheet
- Inline style

✮ 적용 순서 (Cascading Order) 
Inline style (inside an HTML element) > External and internal style sheets (in the head section) > Browser default

CSS Box Model 

- 모든 HTML 엘리먼트들은 박스의 속성을 가집니다. 박스는 디자인과 레이아웃을 구분하는 단위입니다. 
https://www.w3schools.com/css/css_boxmodel.asp

- 모든 엘리먼트 (박스)는 background, border, width/height, margin, padding 등의 속성을 가집니다. 

Backgorund, Border

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

p {
    border: 2px solid red;
    border-radius: 5px;
}

Margin, Padding, Width/Height

div {
    border: 1px solid red;
    margin-left: 100px;
}

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
    /* contents-based */
}

div {
    max-width: 500px;
    min-height: 100px;
    background-color: powderblue;
}

Text/Font

Word 글꼴 서식을 생각하니까 간편해요 :3

Font 의 경우 브라우저에서 지원하지 않는 font 가 있을 경우를 대비해서, font-family 대체안을 넣어줍니다. (우선순위에 따라 적용되어요!)

div {
    color: blue;
    text-align: justify;
    text-decoration: underline;
    text-indent: 50px;
    letter-spacing: 3px;
    line-height: 1.8;
    word-spacing: 10px;
    text-shadow: 3px 2px lightgrey;

}

p {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 14px;
    font-weight: bold;

}