CSS 기본 속성

• background-color : 배경색
  
  
• color : 글자색
  
  
• font-family :
  글꼴. 여러 개를 지정하면 순서대로 적용하면서 글꼴이 적용이 되지 않는 문자에 이후의 글꼴을 적용한다.
  google fonts 사이트를 통해 원하는 글꼴을 쉽게 가져올 수 있다.
  
  
• font-size : 글자 크기
  
  
• font-weight : 글자 굵기. 100 ~ 900까지 100 단위로 값이 있으며 숫자가 클수록 굵다.
  
  
• line-height : 줄과 줄 사이의 간격. 단위 없이 사용하며 "값 * font-size"로 적용된다.
  
  
• text-decoration : 글자를 꾸미는 속성. none, underline, line-through 등이 있다.
  ex)
  none = 평상시 글자     ∴<a> 태그(링크)의 밑줄을 지우는데 많이 사용된다.
  underline = 평상시 글자
  line-through = 평상시 글자
  
  
• text-align : 글 정렬. 해당 요소가 포함된 영역을 기준으로 정렬한다.
  
  
• width : 너비
  
  
• height : 높이
  
  
• padding :
  영역의 내부에 여백을 준다.
  top, right, bottom, left라는 세부 속성이 있으며 padding-top과 같이 특정 방향을 지정할 수 있고, 기본 padding에 값의 개수에 따라 시계방향으로 적용이 된다.
  ex)
  100px = 모든 방면에 여백을 준다.
  100px 20px = 위, 아래에 100px의 여백과 좌, 우에 20px의 여백을 준다.
  100px 20px 30px = 위에 100px의 여백과 좌, 우에 20px의 여백, 아래에 30px의 여백을 준다.
  100px 20px 30px 10px = 순서대로 위, 우, 아래, 좌에 여백을 준다.
  
  
• margin :
  영역의 외부에 여백을 준다.
  top, right, bottom, left라는 세부 속성이 있으며 사용 방식은 padding과 같고, auto라는 값을 통해서 창의 크기에 따라 영역의 가로의 외부 여백을 자동으로 줄 수 있다.
  단, auto를 사용할 경우 해당 영역의 가로 크기가 설정되어 있어야 한다.

 

 

- 색상 단위 :

 

• 색상 이름 : 색상 이름을 영어로 적으면 그 색이 적용된다. 자세한 색 표현이 어렵다.
  ex)
  red, yellow
  
  
• 색상 코드 : #으로 시작하는 a ~ f, 숫자를 조합한 여섯 자리로 표현한다.
  ex)
  #ff0000, #ffff00
  
  
• RGB : 10진수로 각 빛의 세기를 표시한다. 숫자의 값은 0 ~ 255이다.
  ex)
  rgb(255, 0, 0), rgb(255, 255, 0)
  사실 rgb에 값 4개를 넣으면 raba와 같은 동작을 한다.
  
  
• RGBA : RGB에 불투명도를 추가한 것이다. A의 값은 0 ~ 1 사이의 소수점 숫자이다.
  ex)
  rgba(255, 0, 0, 1), rgba(255, 255, 0, 0.5)

 

 

- 크기 단위 :

 

• px(절대적인 단위) :
  picture element로 화면에 표시되는 가장 작은 정사각형을 뜻한다. px의 크기는 그런 정사각형의 개수.
  px의 실제 크기는 PPI(Pixel Per Inch)의 값으로 정해진다.
  PPI는 모니터에서 1인치 정사각형에 픽셀이 몇 개나 들어가는지 나타내는 단위이다.
  결과적으로 해상도에 따라 px의 크기가 정해진다.
  ex)
  100px = 가장 작은 정사각형 100개의 길이.
  150px = 가장 작은 정사각형 150개의 길이.
  
  
• 상대적인 단위 :
  
  
  • % : 부모 태그의 크기에 대한 상대적인 크기.
    ex)
    부모 태그의 크기 : 200px X 100px, 자신의 크기 : 50% X 50% = 100px X 50px
    부모 태그의 크기 : 100px X 50px, 자신의 크기 : 50% X 50% = 50px X 25px
    
    
  • em : 인쇄에서 전통적으로 대문자 M의 크기. css에서의 1em은 부모 태그의 font-size.
    ex)
    부모 태그의 font-size : 16px, 자신의 font-size : 2em = 32px
    부모 태그의 font-size : 8px, 자신의 font-size : 2em = 16px
    
    부모 태그의 font-size에 따라서 크기가 결정되기 때문에 font-size에서 사용하는 거 같다.
    폰트 크기에 맞춰 다른 요소들의 크기를 정할 때 사용한다.
    
    
  • rem : 1rem은 최상위 태그(html)의 font-size
    ex)
    html의 font-size : 8px, 부모 태그의 font-size : 16px, 자신의 font-size : 2rem = 16px
    html의 font-size : 16px, 부모 태그의 font-size : 16px, 자신의 font-size : 2rem = 32px
    
    마찬가지로 font-size에서 사용하는 거 같다.
    폰트 크기에 맞춰 다른 요소들의 크기를 정할 때 사용한다.