CSS 속성 알아보기 (글자와 문자)

 

font-style

 

font-style: 값;

font-style: italic;
font-style: oblique; /* 기울어진 글자 */

글자의 기울기를 지정하는 속성

 

기본값(normal) - 기울기 없음

italic - 이텔릭체

 

font-weight

 

font-weight: 값;

font-weight: normal; /* 기본 두께 normal값은 400을 의미 */
font-weight: bold; /* 두껍게 bold값은 700을 의미 */
font-weight: bolder; /* 상위(부모) 요소보다 더 두껍게 */
font-weight: lighter; /* 상위(부모) 요소보다 더 얇게 */
font-weight: 100~900; /* 100 단위의 숫자 9개를 값으로 지정 */

글자의 두께(가중치)를 지정하는 속성

 

기본값(normal, 400) - 기본 두께

bold(700) - 두껍게

 

font-size

 

font-size: 값;

font-size: 16px;
font-size: 16%; /* 부모 요소의 폰트 크기에 대한 비율 */
font-size: smaller; /* 상위(부모) 요소보다 작은 크기 */
font-size: larger; /* 상위(부모) 요소보다 큰 크기 */
font-size: (xx-small ~ xx-large); /* 가장 작은 크기 ~ 가장 큰 크기까지 */
                                  /* 7단계의 크기를 지정 */

글자의 크기를 지정하는 속성

 

기본값(16px) - 기본 크기

단위 - px, em, rem 등 단위로 지정

 

line-height

 

line-height: 값;

line-height: normal;
line-height: 1.4; /* 요소의 글꼴 크기의 배수로 지정 */

한 줄의 높이를 지정하는 속성, 행간과 유사

 

기본값(normal) - 브라우저의 기본 정의를 사용

숫자 - 요소의 글꼴 크기의 배수로 지정

단위 - px, em, rem 등 단위로 지정

 

font-family

 

font-family: 값1, 값2, ... 글꼴계열; /* 글꼴 값을 여러개 작성할 수 있다 */

font-family: 글꼴1, "글꼴2", ... 글꼴계열;
/* 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다 */
/* 마지막에는 필수로 글꼴 계열을 작성해야 한다 */
/* 글꼴계열이 아닌 글꼴 값은 후보 값이다 */
/* 글꼴1~글꼴N 후보값의 선착순으로 사용 가능한 글꼴을 찾다가 마지막으로 글꼴 계열의 값을 사용한다 */

글꼴(서체)을 지정하는 속성

 

글꼴 계열의 종류

- serif (바탕체 계열)

- sans-serif (고딕체 계열)

- monospace (고정너비[가로폭이 동등] 글꼴 계열)

- cursive (필기체 계열)

- fantasy (장식 글꼴 계열

 

---

 

color

 

color: 값;

color: rgb(n,n,n) /* n은 0~255까지의 숫자 */
color: red; /* 기타 지정 가능한 색상 */

글자의 색상을 지정하는 속성

 

기본값(검정색) - rgb(0,0,0)

색상 - 기타 지정 가능한 색상

 

text-align

 

text-align: 값;

text-align: left; /* 왼쪽 정렬 */
text-align: right; /* 오른쪽 정렬 */
text-align: center; /* 가운데 정렬 */
text-align: justify; /* 양쪽 정렬 */

문자의 정렬 방식을 지정하는 속성

 

기본값(left) - 왼쪽 정렬

right - 오른쪽 정렬

center - 가운데 정렬

 

text-decoration

 

text-decoration: 값;

text-decoration: none; /* 장식 없음 */
text-decoration: underline; /* 밑줄 */
text-decoration: overline; /* 윗줄 */
text-decoration: line-through; /* 중앙 선 */

문자의 장식(선)을 지정하는 속성

 

기본값(none) - 장식 없음

underline - 밑줄

 

text-indent

 

text-indent: 값;

text-indent: 0; /* 들여쓰기 없음 */
text-indent: 50px; /* 들여쓰기 */
text-indent: -50px /* 내어쓰기 */

문자 첫 줄의 들여쓰기를 지정하는 속성

 

기본값(0) - 들여쓰기 없음

단위 - px, em, rem 등 단위로 지정

 

음수를 사용하여 내어쓰기가 가능하다