[HTML/CSS] padding, margin, font

padding (패딩) : 내용(content)과 테두리(border)사이의 간격을 설정해주는 속성 

**padding을 사용하다보면 생각보다 크기가 커질 수 있는 점 유의 

 

padding : 상하좌우

padding : 상하  좌우

padding : 상  좌우  하 

padding : 상  우  하  좌 (시계방향)

 

padding-방향 : 상하좌우 각각 다른 간격 가능

 

---

 

margin (마진) : 주변과 요소사이의 여백  

**margin을 사용하다보면 생각보다 크기가 작아질 수 있는 점 유의 

 

margin : 상하좌우

margin : 상하  좌우

margin : 상  좌우  하 

margin : 상  우  하  좌 (시계방향)

 

margin이 겹치는 경우 최대크기가 적용됨 

ex. 30px과 50px이 겹치면 50px 적용 

 

---

 

font(폰트)

font-size : px로 입력
font-style : 기본값normal
font-weight : 기본값normal
font-family : 글꼴을 여러종류 준비해두고 브라우저에서 지원한다면 그것을 사용하되, 지원하지 않는다면 가장 표준글꼴인 sans-serif를 사용한다.
font : 폰트에 속성을 한번에 적용하려고할때 사용. weight, style, size, family 순서로 적용하며 콤마는 font-family부분에서만 씀
font-variant : 기본값normal, 소문자를 작은 대문자로 바꿈