[css] 텍스트 스타일링

22 Dec 2023

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 제어하기 위해 사용되는 스타일 시트 언어입니다. 이 문서에서는 CSS를 사용하여 HTML 텍스트를 스타일링 하는 방법에 대해 설명하겠습니다.

1. 폰트 스타일링

HTML 텍스트의 폰트를 스타일링하기 위해서는 font-family, font-size, font-weight, font-style 등의 속성을 사용할 수 있습니다.

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}

위의 예제는 <p> 요소의 폰트를 Arial로 설정하고, 글자 크기는 16픽셀, 굵게, 이탤릭체로 스타일링 하는 CSS 코드입니다.

HTML 텍스트의 색상과 배경을 설정하기 위해서는 color와 background 속성을 사용할 수 있습니다.

h1 {
  color: #ff0000;
  background: #000000;
}

위의 예제는 <h1> 요소의 텍스트 색상을 빨간색(#ff0000)으로, 배경을 검은색(#000000)으로 설정하는 CSS 코드입니다.

텍스트를 정렬하기 위해서는 text-align 속성을 사용할 수 있습니다.

div {
  text-align: center;
}

위의 예제는 <div> 요소 안의 텍스트를 가운데 정렬하는 CSS 코드입니다.

HTML 텍스트의 장식을 위해서는 text-decoration 속성을 사용할 수 있습니다.

a {
  text-decoration: underline;
}

위의 예제는 <a> 요소의 텍스트에 밑줄을 추가하는 CSS 코드입니다.

CSS를 사용하여 HTML 텍스트를 스타일링하는 방법에 대해서 간략히 살펴보았습니다. 웹 페이지의 디자인을 더욱 풍부하게 만들기 위해 다양한 CSS 속성을 활용할 수 있습니다.