[CSS] 텍스트 관련 속성

WEB/CSS

[CSS] 텍스트 관련 속성

춘햄 2021. 5. 3. 18:07

HTML 문서에는 텍스트가 상당히 많은 비중을 차지하며 CSS 를 사용해 텍스트의 스타일을 지정하는 일이 많기 때문에 font 설정을 css를 이용하여 한번에 설정해놓고 사용할 수 있다.

1. font-size: 텍스트의 크기를 설정

<html>
	<head></head>
	<body>
		<p style = "font-size: 14px">ABCD</p>
    </body>
</html>

2. color: 텍스트의 색상

<html>
	<head></head>
	<body>
		<p style = "color: red">ABCD</p>
    </body>
</html>

3. font-style: 텍스트의 스타일

<html>
	<head></head>
	<body>
		<p style = "font-style: italic">ABCD</p>
    </body>
</html>

4. font-weight: 텍스트의 굵기

<html>
	<head></head>
	<body>
		<p style = "font weight: bold">ABCD</p>
    </body>
</html>

5. font-variant: 대소문자에 대한 스타일

<html>
	<head></head>
	<body>
		<p style = "font variant: small caps">ABCD</p>
    </body>
</html>

6. line-height: 줄 간격 지정

<html>
	<head></head>
	<body>
		<p style = "line height:140%; width: 200px;">ABCD</p>
    </body>
</html>

7. font: 텍스트의 스타일을 한번에 설정할 수 있는 속성

p {
  font style: italic;
  font weight: bold;
  font size: 12px;
  line height: 1.6;
  font famliy: arial, - 65 -elvetica , sans serif;
}
/* 위의 속성들을 아래와 같이 선언할 수 있다
font: italic bold 12px/1.6 arial, - 65 -elvetica , sans serif;

8. text-align: 텍스트의 정렬 방향을 지정

<html>
	<head></head>
	<body>
		<p text align: left 왼쪽 정렬 </p>
		<p text align: right 오른쪽 정렬 </p>
    </body>
</html>

9. text-indent: 들여쓰기 효과를 지정

<html>
	<head></head>
	<body>
		<p style =style=”text indent: 20px; width: 200px;>ABCD</p>
    </body>
</html>

10. text-decoration: 텍스트 꾸밈 효과를 넣는 속성

<html>
	<head></head>
	<body>
		<p text decoration: underline; 밑줄 </p>
        <p text decoration: overline; 윗줄 </p>
        <p text decoration: line through; 취소선 </p>
    </body>
</html>