CSS font, position, margin, padding 등

font

• 폰트 속성 정리

.container {

   font-family: Arial, Georgia, Times, "Times New Roman", serif; # 글씨체

   font-size: 1.2rem; /* 루트 글씨(html) 에 1.2배 */

   # 글자 크기. px은 절대적 크기, rem은 루트 폰트 사이즈에 대한 비율

   font-weight: 500; # 글자 두께. 100-900 설정 가능

   font-style : normal; # normal, italic, oblique 등 설정 가능

   line-height : 1.6; # 줄 간격

   text-align : center; #정렬

   color : gray; #글자 색

   background-color: white; #글자 배경 }

 

 

• 부모의 폰트 속성 그대로 상속하고 싶을 때:

h1, h2, h3{
    font-size: inherit;
}

•  

 

 

 

margin, padding

• padding은 border 안쪽, object 바깥쪽에 있는 내부 여백. content영역의 배경은 padding 영역까지 포함한다.
• margin은 border 바깥쪽에 있는 외부 여백. —> 주변 요소들과 거리를 두기 위해서 사용한다.

• content—>padding—>border—>margin 순서로 있음.

 

 

 

position

• 요소가 배치되는 방법을 결정하는 속성

position: static;
#기본 고정된 위치?

position: relative;
#static을 기준으로 top, bottom, left, right 값만큼 떨어지도록 배치

position: absolute; 
#상위 요소를 기준으로 top, bottom, left, right 값만큼 떨어지도록 배치
 보통 부모 요소를 relative로 지정함.
 
position: fixed;
#화면을 스크롤해도 고정되어 있도록 브라우저를 기준으로 top, bottom, left, right 
값만큼 떨어지도록 배치

position: sticky;
#브라우저를 스크롤링할 때,, 어느 시점까지 올리거나 내리면 스티키해지게 만드는 속성