visual rules

폰트(typeface)

1. 서체
   font-family 속성(property)을 사용한다.
   주의할 점은

• 명시된 폰트는 반드시 사용자의 컴퓨터에 설치되어 있거나 사이트에 다운로드 되어져 있어야 한다.
• 웹세이프 폰트는 대부분의 브라우저와 운영체제에서 지원되는 글꼴 그룹이다.
• 만약 웹세이프 폰트(https://www.cssfontstack.com/ 참조)를 사용하지 않는다면, 그 폰트는 모든 브라우저와 운영체제에서 동일하게 나타나지 않을 수 있다.
• 폰트이름이 두가지 이상의 단어로 구성된 경우, 폰트 이름을 따옴표로 묶어주는 것이 가장 좋다.

h1 {
  font-family: 'Courier New';
}

2. 폰트 사이즈
   font-size 속성을 사용한다. 숫자 뒤에 px를 붙인다.

3. 폰트 굵기
   font-weight 속성을 사용하여 굵기와 가늘기를 조정한다. bold, normal 값이 있으며 특정 요소만 굵게, 혹은 가늘게 설정할 수도 있다.

4. 텍스트 배열
   text-align 속성을 사용하여 화면에 보여지는 텍스트를 배열한다. left, center, right, justify(양쪽정렬) 값이 있다.

5. 색상
   color 는 요소(텍스트)의 전경색을, background-color 요소의 후경색을 지정한다.

6. 불투명성()
   opacity 는 요소의 불투명함을 조절한다. 0~1 사이의 값을 갖는다.

7. 배경 이미지
   background-image 속성으로 요소의 배경에 이미지가 나타나도록 한다. url("이미지 외부 혹은 내부경로(이미지 저장된 프로젝트 폴더)")

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}
혹은
.main-banner {
  background-image: url('images/mountains.jpg');
}

8. important
   아무리 구체적인 스타일을 적용하더라도 !important; 를 옆에 써주면 해당스타일은 무엇보다도 우선시 된다.

p {
  color: blue !important;
}
 
.main p {
  color: red;
}