CSS에서 텍스트 서식 지정 가이드

웹 사이트를 디자인할 때 텍스트 서식 지정은 매력적이고 읽기 쉬운 인터페이스를 만드는 데 중요한 측면입니다.

CSS는 글꼴 색상, 크기, 패밀리, 정렬, 간격 등 텍스트의 다양한 요소를 사용자 정의할 수 있는 여러 속성을 제공합니다.

다음은 각 속성에 대한 예제와 함께 각 텍스트 서식 속성에 대한 자세한 안내입니다.

 

글꼴 색상

매개변수: 색상 이름(예: red), 16진수 코드(예: "#FF0000"), RGB 값(예: "rgb(255, 0, 0)") 또는 RGBA 값(예: "rgba(255, 0, 0, 0.5)").

p {  
  color: blue;  
}  

 

글꼴 크기

매개변수: 픽셀(예: "16px"), em 단위(예: "1em"), rem 단위(예: "1.2rem"), 뷰포트 너비 단위(예: "10vw")로 표시될 수 있는 크기 값, 뷰포트 높이 단위(예: "5vh") 또는 기타 단위.

h1 {  
  font-size: 24px;  
}  

 

글꼴 패밀리

매개변수: 선호하는 순서로 지정된 글꼴 모음 목록입니다. 글꼴 이름(예: Arial)을 지정하거나 특수 문자가 포함된 글꼴 이름을 큰따옴표(예: " Times New Roman)로 묶을 수 있습니다.

body {  
  font-family: Arial, sans-serif;  
}  

 

글꼴 두께 및 스타일

매개변수 font-weight: normal(default), bold, bolder, lighter 또는 100에서 900 사이의 숫자 값.

매개변수 font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

텍스트 장식

매개변수: "none"(default), "underline", "overline", "line-through"  또는 공백으로 구분된 값의 조합.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

텍스트 정렬

매개변수: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

줄 높이 및 여백

매개변수 line-height: 숫자 값 또는 현재 글꼴 크기의 백분율입니다.

Parameter margin: 픽셀(px), em 단위(em), rem 단위(rem) 등과 같은 측정 값입니다.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

다중 열 텍스트 레이아웃

매개변수: 양의 정수 또는 "auto"(default).

.container {  
  column-count: 2;  
}  

 

호버 시 텍스트 색상 변경

특정 매개변수가 없으며 의사 클래스만 사용합니다 :hover.

a:hover {  
  color: red;  
}  

 

상태에서 텍스트 색상 변경(활성, 방문)

특정 매개변수가 없으며 가상 클래스 :active  와 :visited.

a:visited {  
  color: purple;  
}  

 

위의 설명과 예제가 CSS에서 텍스트 서식 속성을 사용하고 사용자 지정하여 웹 사이트에서 시각적으로 매력적이고 매력적인 텍스트 인터페이스를 만드는 방법을 이해하는 데 도움이 되었기를 바랍니다.