CSS 속성
CSS 속성은 너무나도 많지만.. 대표적인 속성들만 간단히 정리해보고자 한다. margin/padding, display와 관련된 속성은 조금 내용이 많아서 따로 게시글을 작성할 예정이다.
font
- font-family: 글꼴, 쉼표로 여러 글꼴을 등록할 수 있으며, 맨 앞에 있는 글꼴이 사용자의 PC에 없을 때 다음 글꼴을 사용한다.
- color: 폰트 색상,
#000000,rgb(00,00,00)등의 형식을 사용한다. - font-size: 폰트 사이즈, 일반 웹사이트에서는
px단위를 사용한다. - font-weight: 폰트 두께, 100 ~ 900 사이의 숫자를 통해 설정한다.
- font-style: 폰트 스타일, 주로 이탤릭체를 사용하기 위해 사용.
위 속성을 따로 작성해도 되지만, font속성을 통해 세부속성을 한번에 정의할 수도 있다. (순서 하단 참고)
font: font-style font-variant font-weight font-size/line-height font-family
background
- background-image: 주어진 선택자의 배경이미지를 설정한다. 주의해야 할 점은 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 컨테이너에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며,
이미지 보다 컨테이너가 더 크다면 이미지는 반복되어 표시된다.
background-image: url("경로") - background-color: 배경 색상을 설정하며, 폰트 색상과 동일한 포맷을 사용한다.
- background-repeat: 앞서 말한 것과 같이, 배경 이미지의 크기가 컨테이너에 비해 작으면 반복되기에, 반복 여부를 설정할 수 있다.
background-repeat: no-repeat - background-position: 배경 이미지의 위치를 수정할 수 있다. (일반적으로 배경 이미지는 왼쪽 위부터 이미지를 출력한다.) 픽셀 뿐 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있다.
background-position:center right;
background-position:30px -70px;
