🌈CSS:Box Model

Property

Width & height (가로 & 세로)

Border (테두리)

a.width(두께)

b.color

c.style 

d.box sizing (맞춤)

e.radius (모서리 곡률)


#one 
{
    background-color: antiquewhite;
    border-width: 5px;
    border-color: black;
    border-style: dashed;
    box-sizing: border-box;
}
#three 
{
    border: medium soild green;
    border-left-style: dotted;
    border-radius: 20%;
}

한번에 넣을 수 있고 radius는 %,px등 여러 단위 사용 가능

Padding(테두리와 내용 사이의 공간)

shorthand
  

/* apply to all four sides */

padding: 20px;

/* vertical / horizontal */

padding : 5px  10px;

/* top / horizontal / bottom */

padding : 1px 2px 2px;

/* top / right / bottom / left */

padding : 5px 1px 0 2px;

Margin(테두리 바깥 공간)

padding과 동일

Display Property

1.Inline

2.Block

3.Inline-Block

4.none



css

h1{display : line;}



display property가 무엇인지에 따라 width,height,
  
margin,border,padding 적용되는게 다름

이 부분에서 1,2,3번이 차이를 보임

CSS Units (단위)

Relative-EM,REM,VH,VW,%,etc.


EM- 부모 요소의 크기에 대해 상대적인 크기를 갖음

ex) 2EM은 부모 요소의 크기에 대해 2배의 크기를 갖음



REM- Html 요소에 따라 상대적인 크기를 갖음

Absolute-PX,PT,CM,IN,MM