폰트 스타일과 텍스트 정렬

1. 폰트 스타일

1) font-family

font-family는 폰트 스타일을 지정하는 속성입니다.

.fontselect {
  font-family: Georgia, "Times New Roman", Times, serif;
  }

과 같이 클래스로 만들어서 적용할 수 있습니다.

Georgia, "Times New Roman", Times, serif 이렇게 폰트 스타일을 여러개 지정할 수 있는데
이는 처음에 나오는 Georgia 폰트 스타일을 적용하고 이 폰트가 없으면 "Times New Roman" 폰트 스타일을 적용합니다. 폰트 이름에 띄어 쓰기가 있으면 큰 따옴표안에 폰트명을 씁니다. 그리고 이마저고 없으면 뒤에 나오는 폰트를 적용하고 이마저도 없으면 브라우저에서 기본으로 지정하는 폰트 스타일을 적용합니다.

2) font-size

font-size는 폰트 크기를 정할 때 사용합니다.

.size15-font {
  font-size: 15px;
  }

3) font-weight

font-weight는 폰트의 두께를 정할 때 사용합니다.

.bold-font {
 font-weight: bold;
}

bold 대신에 숫자를 적어도 됩니다.
숫자 400과 normal은 같은 두께입니다.
숫자 700과 bold는 같은 두께입니다.

4) font-style

font-style로 글씨 스타일을 바꿀 수 있습니다.

.apply-italic {
  font-style: italic;
}

이렇게 하면 이탤릭체로를 적용할 수 있습니다.

5) color

색상을 지정하는 방법으로는 4가지 방법이 있습니다.
(1) rgb 방식

h1 {
color: rgb(235, 70, 57);
}

(2) rgba 방식
rgb방식에 투명도가 포함된것으로 0.0과 1.0사이의 값을 값습니다. 0으로 갈수록 투명해 집니다.

 h1 {
color: rgba(235, 70, 57, 0.3)
}

(3) hex 색상코드 방식

h1 {
color: #eb4639;
}

(4) hsl(색상, 채도%, 명도%)로 표현하는 방식

h1 {
color: hsl(4, 82%, 57%);
}

2. 텍스트 정렬

1) text-align

텍스트 정렬은 text-align 속성을 이용해서 결정 할 수 있습니다. 각각 왼쪽, 가운데, 오른쪽 정렬입니다.

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

2) text-indent

text-indent를 사용하면 들여쓰기를 사용할 수 있습니다.

.indent {
text-indent: 50px;
}

참고로 html에서는 스페이스바를 여러번 눌러도 띄어쓰기는 한번만 적용됩니다.
스페이스바를 여러번 입력한것과 같은 효과를 주고 싶으면  를 사용합니다.
예를 들면

<p>1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</p>

1       2