[CSS] Margin

📌 Margin

margin-top
    사이즈(단위, px, cm, em, rem, %, ...)
margin-left
    사이즈 
margin-bottom
    사이즈 
margin-right
    사이즈

📍em?

상대적인 단위(절대적인 단위는 px)
(font-size(부모의)에 따라 달라진다)
0.5em(부모 폰트의 0.5배)

📍 rem ?

0.5rem(html 태그 폰트 사이즈의 0.5배)

div.html
div 이면 클래스 이름이 html
div .html
div 자식중에 이면서 클래스중에 .html인 요소

📍 inline
inline-block 은 auto 를 사용할수없다.
이미 0 이기때문에
block만가능.

📍 inline vs block vs inline-block

block 가로길이 O, margin이 오른쪽 끝까지 설정되어있기 때문에 한줄 통채로 차지.
margin-right는 설정불가 (기본으로 오른쪽 끝까지로 설정되어있다.)

margin-left:auto; 
margin-right:auto; 

기본으로 제공되었던 마진을 왼쪽 오른쪽
똑같이 나눠같게 된다..!(요소가 정 중앙에 위치)

 inline 가로길이 X, margin 위아래 X, margin 좌우 O

기본으로 제공하는 마진은 없기에 auto 로 좌우가 나눠가져도 0 0

 inline-block 가로길이 O, margin 상하좌우 O

기본으로 제공하는 마진은 없기에 auto 로 좌우가 나눠가져도 0 0

📍 margin
상자 바깥 여백
(margin-top, margin-right, margin-bottom, margin-left를 한번에 설정하는 단축속성)

 ex) margin : 10px 5px 6px 80px; /* 순서는 상 우 하 죄 (시계방향) */
 ex) margin : 10px auto 5px; /* 위:10px 좌우:auto 하:5px */
 ex) margin : 10px auto; /* 위아래:10px 좌우:auto */
 ex) margin : 10px; /* 상하좌우:10px */ 

📍 border :

(border-top, border-right, border-bottom, border-left 단축속성) 테두리(모양, 색깔, 두께)
    ex)
    border : 5px solid black

🌟 border-top : (위쪽 border의 style, color , width 설정 단축속성)
ex) border-top : #e9e9e9 dotted 5px
🌟 border-right: (오른쪽 border의 style, color, width 설정 단축속성)
🌟 border-bottom:(아래쪽 border의 style, color, width 설정 단축속성)
🌟 border-left:(왼쪽 border의 style, color, width 설정 단축속성)

📍 border-style :

(단축속성 top right bottom left)
모양을 설정
🌟 dotted ->점선
🌟 solid -> 실선
🌟 dashed ->대시선
🌟 none -> 없음

🌟 border-color :
(단축속성 top right bottom left)
색상코드(#.. hex코드 rgb() 키워드)
🌟 boarder-width :
(단축서 top right bottom left)
크기단위
🌟 border-radius :
(위오 위왼 아래오 아래왼 테두리 둥글게 단축 속성)
크기단위(둥글게 그려지는 부분의 반지름)