반응형
text 속성은 텍스트의 모양과 레이아웃을 정의할 때 사용됩니다.
text 속성을 사용하여 다음과 같은 요소를 정의할 수 있습니다:
- font-family: 이 속성은 요소의 폰트 패밀리를 설정합니다. 예를 들어, Arial, Times New Roman, 또는 Verdana입니다. 브라우저는 목록에서 첫 번째 사용 가능한 폰트를 찾습니다.
- font-size: 이 속성은 텍스트의 크기를 설정합니다. 값은 픽셀, em, 또는 백분율로 지정할 수 있습니다.
- font-weight: 이 속성은 텍스트의 굵기를 설정합니다. 값은 normal, bold, 또는 100에서 900 사이의 숫자 값으로 설정할 수 있습니다.
- color: 이 속성은 텍스트의 색상을 설정합니다. 값은 이름으로 지정된 색상, 16진수 값, 또는 RGB 값으로 지정할 수 있습니다.
- text-align: 이 속성은 텍스트의 정렬 방식을 정의합니다. 값은 left, right, center, justify입니다.
- text-decoration: 이 속성은 텍스트에 장식적인 선을 추가합니다. 값은 none, underline, overline, 또는 line-through입니다.
- text-transform: 이 속성은 텍스트의 대소문자를 변경합니다. 값은 none, uppercase, lowercase, 또는 capitalize입니다.
예제 코드:
p {
font-family: "Comic Sans MS", Arial, sans-serif, cursive;
font-size: 16px;
font-weight: bold;
color: blue;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
}이 코드는 p 요소에 적용된 텍스트 속성을 보여줍니다.
font-family는 텍스트의 글꼴을 정의할 때 사용합니다.
폰트가 여러 개 준비되어 있다면, 첫 번째 폰트가 사용 가능하다면 사용되고, 아니면 다음 폰트가 사용되는 구조입니다.
font-size는 텍스트 크기를 16px로 정의합니다.
font-weight는 굵게 표시되도록 bold로 정의합니다.
color는 텍스트 색상을 blue로 정의합니다.
text-align은 중앙 정렬되도록 center로 정의합니다.
text-decoration은 밑줄이 그어지도록 underline로 정의합니다.
그리고 text-transform은 대문자로 변경되도록 uppercase로 정의합니다.
반응형