text style 속성

 

🟢   text style

글자의 모양, 크기, 정렬, 간격 등을 꾸미는 속성.

 

🔹 text-align (정렬)

텍스트의 가로 정렬 방식을 지정.

p { text-align: center; }

• left: 왼쪽 기준으로 정렬. (기본값)
• right: 오른쪽 기준으로 정렬.
• center: 가운데 기준으로 정렬.
• justify: 양쪽 끝(왼쪽 + 오른쪽)에 맞춰 정렬. 줄 사이 간격을 자동으로 조절해서 양쪽이 딱 맞게 보이도록 한다.

 

🔹 line-height (줄 간격)

텍스트 줄과 줄 사이의 간격(줄 높이)을 지정.

p { line-height: 1.5; }

• 문법: 숫자 (line-height: 1.5;)를 입력하며, font-size의 배수로 적용한다.
• 추천 값: 일반 텍스트 (1.5~1.8), 제목 (1.2~1.4), 버튼 (1~1.2)
  • 너무 좁거나 넓으면 가독성이 떨어진다.
• TIP: 박스의 height와 동일한 값을 line-height에 주면 한 줄 텍스트를 수직 중앙에 배치할 수 있다.

 

🔹 text-decoration (장식)

텍스트에 선을 긋거나 제거하는 장식적인 효과를 지정.

a { text-decoration: none; }

• 주요 값:
  • none: 장식없음. (<a> 태그의 링크 기본 밑줄 제거에 사용)
  • underline: 밑줄. (텍스트 아래 줄)
  • overline: 윗줄. (텍스트 위 줄)
  • line-through: 취소선. (가운데 줄, 삭제/할인 표시 등에 사용)

• 확장 속성 (세부 설정):
  • text-decoration-color: 줄 색상 변경.
  • text-decoration-style: 선 스타일 변경.
  • text-decoration-thickness: 선 두께 조절.

 

🔹 text-shadow (그림자)

텍스트에 그림자 효과를 지정.

p { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

• 문법: text-shadow: x축 y축 blur 색상;
  • x축: 가로 이동. (양수 → 오른쪽)
  • y축: 세로 이동. (양수 → 아래)
  • blur: 흐림 정도.
  • 색상: 그림자 색.
• 특징: 쉼표로 구분하여 여러 개의 그림자를 중첩해서 사용할 수도 있다.

 

 

🔹 text-transform (대소문자 변환)

텍스트의 원본의 대문자/소문자/첫 글자 대문자를 자동으로 변환하는 속성.

p { text-transform: uppercase; }

• uppercase: 모두 대문자.
• lowercase: 모두 소문자.
• capitalize: 각 단어 첫 글자만 대문자.

 

🔹 letter-spacing (자간)

글자 사이 간격 조정.

• UI 디자인에서 강조 효과로 사용하며, 너무 간격이 크면 가독성이 저하된다.

 

 

🔹 word-spacing (단어 간격)

단어와 단어 사이의 간격 조정.

• 영어 문장에서 효과적이며, 한국어에서는 영향이 적다.

 

 

📍  POINT 📍 

✔️ letter-spacing을 미세하게 좁히고(-0.05em), line-height를 넓히는(1.8) 디테일을 주면 디자인의 완성도가 높아진다. ✔️

✔️ 하이퍼링크의 밑줄은 text-decoration: none; 으로 깔끔하게 지울 수 있다. ✔️

 

 

📋 텍스트 주요 속성 요약표 📋

속성	설명	주요 값 예시
text-align	가로 정렬	center, justify
line-height	줄 간격	1.6, 150%
text-decoration	장식 선	none, underline
text-shadow	글자 그림자	2px 2px 4px #000
text-transform	대소문자 변환	uppercase, capitalize
letter-spacing	자간 조절	-1px, 0.1em