font-family 속성
이를 통해 글꼴 지정 가능
-> 글꼴 지정 시 한글로된 글꼴이나, 공백이 있는 글꼴명은 큰따옴표로 감싸 주어야 함
font-family:<글꼴1>, <글꼴2> , ... <글꼴 유형>;font-family:BatangChe, "Times New Roman";위 처럼 여러 글골을 쉼표로 구분해 나열하면, 맨 앞에 작성한 글꼴부터 적용 가능 여부 판단
font-family에서는 글꼴명을 적고, 글꼴 유형을 작성하도록 권장
-> 유형은 글꼴을 못 불러온다는 개념 X
-> 따라서 불러오려고 한 글꼴과 가장 유사한 형태의 글꼴 유형을 마지막에 항상 지정해야 함
ex)
font-family:BatangChe, "Times New Roman", serif;| 글꼴 유형 | 설명 |
|---|---|
| serif | 삐침이 있는 명조 계열의 글꼴 |
| sans-serif | 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴 |
| monospace | 텍스트 폭과 관격이 일정한 글꼴 |
| fantasy | 화려한 글꼴 |
| cursive | 손으로 쓴 것 같은 필기체 계열의 글꼴 |
font-size 속성
텍스트 크기를 변경하고 싶을 때 사용하는 속성(단위를 포함한 크기)
p{
font-size:14px;
}font-weight 속성
텍스트의 굵기를 지정할 때 사용
font-weight:<숫자 표기법> or <키워드 표기법>;font-weight:100; // 최소 굵기
font-weight:900; // 최대 굵기font-weight:lighter; /* normal, bold, bolder */normal : 400, bold : 700
lighter는 부모 요소 굵기 보다 얇게, bolder는 부모 요소의 굵기보다 굵게 지정
font-style 속성
글꼴의 스타일을 지정할 때 사용
font-style:<속성 값>| 속성 값 | 설명 |
|---|---|
| normal | 기본 형태로 표시 |
| italic | 이텔릭체로 표시 |
| oblique | 기울임꼴로 표시 |
font-variant 속성
영문 텍스트를 크기가 작은 대문자로 변경할 때 사용
font-variant:<속성 값>;| 속성값 | 설명 |
|---|---|
| normal | 텍스트를 변환하지 않습니다 |
| small-caps | 텍스트를 크기가 작은 대문자로 변환 |
두번재 줄의 텍스트의 크기가 줄고, 소문자가 대문자로 변환
color 속성
color 속성은 텍스트에 색상을 지정할때 사용
p{
color:red;
}text-align 속성
텍스트를 정렬할 때 사용
text-align : <속성 값>;| 속성 값 | 설명 |
|---|---|
| left | 텍스트를 왼쪽 정렬 |
| center | 텍스트를 중앙 정렬 |
| right | 텍스틀르 오른쪽 정렬 |
| justify | 텍스트를 양쪽 정렬 |
<style>
p{
text-align:justify;
}
</style>
<body>
<p> Lorem ipsum dolor sit. met consectetur adipiscing elit. Autem, error! Id dolore officiis commodi est ad. nim earum magnam possimus assumenda velit qui eos </p>
</body>
웹 브라우저의 크기에 맞춰 텍스트와 텍스트 사이의 간격을 임의로 늘려 표현
text-decoration 속성
텍스트에 선을 긋기 위해 사용
text-decoration:<속성 값>;| 속성 값 | 설명 |
|---|---|
| none | 텍스트 장식을 모두 지움 |
| line-through | 텍스트 중간을 관통하는 선 그음 |
| overline | 텍스트 위에 선을 그음 |
| underline | 텍스트 아래에 선을 그음 |
a 태그의 경우 기본 스타일 시트에 text-decoration:underline이 적용되어 있음
-> 제거 하고 싶으면 a태그 선택자에 text-decoration 속성을 none
letter-spacing 속성
자간을 조절할 때 사용
letter-spacing : normal or <크기>;normal의 경우 웹브라우저에서 정한 자간의 기본값 사용
<style>
p{
letter-spacing:15px;
}
</style>
<body>
<p> Lorem ipsum dolor sit</p>
</body>line-height 속성
텍스트 한 줄의 높이를 지정할 때 사용
line-height:normal or <속성 값>;| 속성 값 | 설명 |
|---|---|
| normal | 웹 브라우저에서 정한 기본값 사용 |
| 숫자 | 현재 font-size 값에 입력한 숫자를 곱한 값 적용 |
| 퍼센트 | 현재 font-size 값에 입력한 비율을 곱한 값 적용 |
| 크기 | 입력한 크기 적용 |
ex)
line-height:normal; /* 웹 브라우저 기본값 보통 1.2 */
line-height:1; /* 현재 font-size 값의 1배 */
line-height:1.5; /* 현재 font-size 값의 1.5배 */
line-height:200%; /* 현재 font-size 값의 2배 */
line-height:16px
font-size 속성은 말 그대로 글자 자체의 크기 결정
-> 모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가짐
-> 이러한 여유 공간을 전부 포함한 글줄 사이의 간격을 행간이라하며 line-height를 통해 조절
-> line-height 속성 값은 항상 font-size 보다 크게 지정한는 것이 좋음
