핵심 CSS

CSS 속성을 어디에 뒀는지 헷갈릴 수 있기 때문에 이러한 순서로 기입한다.

box-sizing: border-box
position: relative | absolute | fixed | sticky
display: flex | block | inline | inline-block | none
margin: 100px
padding: 100px
width: 100px 
height: 100px
border: 1px solid #000 
background: #fff 
font-size: 16px
font-weight: 300(thin) | 400(normal) | 500(medium) | 700(bold) | 900 (extra bold)
color: #000
text-align: center | left | right
overflow: auto | scroll | hidden
z-index: 1

box-sizing에서 border-box는 width 또는 height값을 넣어줬을때 Border 까지 포함한 크기를 선언하는 것이고 content-box는 Content 까지의 크기를 선언하는 것이다.

 

아무설정이 없을시 오른쪽에 content-box가 default 값으로 설정되있음.

 

padding의 값은 border와 content 사이의 값을 조정해줌

 

margin은 border의 바깥쪽 값으로 width와 height 값과 무관하다.

 

position: absolute는 부모의 위치를 기준으로 설정함 fixed는 위치가 스크롤을 내리건 올리건 고정됨 sticky는 어느시점까지는 움직이는 위치였다가 어느시점 이후로는 상단에 고정됨