TIL 02 | About CSS

CSS

CSS(Cascadin Style Sheets)는 HTML, XML같은 문서를 꾸밀 때 사용하는 스타일 시트 언어이다.
말 그대로 HTML이 뼈대가 된다면, CSS는 살을 붙인다.
ex) html에서 쓰인 글자를 무슨 색으로(css) 보여주는지

CSS의 구성과 문법

스타일을 지정할 HTML요소를 선택하고, 중괄호를 열어 그 안에 적용하고 싶은 속성과 값을 적어준다.

h1 {
	color: blue;
}

여기서 color는 속성이고, 콜론(:)뒤에 나오는 blue는 속성에 대한 값이 된다.

CSS 속성 몇가지

• color : text의 색상

• font-size : text의 크기 (px, em, rem 등)

• font-weight : text 두꺼운 정도

  100 ~ 900 사이의 숫자를 통해 설정한다, 또는 지정된 값으로 설정
  lighter(100), normal(400), bold(700), bolder(800)

• font-family : 글꼴

• font-variant : 글꼴 변형
  
  

• width : 가로길이

• height : 세로길이
  
  

• margin : 바깥쪽 여백

  margin: 10px; : 상하좌우 모두 10px
  margin: 10px 20px; : 상하 10px, 좌우 20px
  margin: 10px 20px 30px; : 위 10px, 좌우 20px, 아래 30px
  margin: 10px 20px 30px 40px; : 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px
  
  특정 방향 지정
  margin-top, margin-bottom, margin-right, margin-left

• padding : 안쪽 여백

  padding: 10px; : 상하좌우 모두 10px
  padding: 10px 20px; : 상하 10px, 좌우 20px
  padding: 10px 20px 30px; : 위 10px, 좌우 20px, 아래 30px
  padding: 10px 20px 30px 40px; : 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px
  
  특정 방향 지정
  padding-top, padding-bottom, padding-right, padding-left