👩🏼💻 공백 처리, 문자 간격, 텍스트 오버플로우, 대소문자 변환, 웹폰트, 목록 스타일링
웹폰트 적용
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
p {
font-family: 'Gugi', cursive;
}- 구글 폰트 등 외부 폰트 사용 가능
@import또는<link>방식 사용font-family로 적용
텍스트 변형과 간격
text-transform
text-transform: uppercase; /* 모두 대문자 */
text-transform: lowercase; /* 모두 소문자 */
text-transform: capitalize; /* 각 단어 첫 글자 대문자 */
letter-spacing (글자 간격)
letter-spacing: 2px;
word-spacing (단어 간격)
word-spacing: 10px;
공백 처리: white-space
| 속성값 | 설명 |
|---|---|
normal | 기본값, 줄바꿈 허용, 연속 공백은 1칸 |
nowrap | 줄바꿈 안 됨 |
pre | 공백과 줄바꿈 모두 유지 |
pre-wrap | 공백 유지 + 줄바꿈 자동 처리 |
pre-line | 줄바꿈은 유지, 연속 공백은 무시 |
white-space: pre-wrap;
줄바꿈 처리 : word-break, word-wrap
word-break: break-all; /* 단어 중간이라도 줄바꿈 */
word-wrap: break-word; /* 너무 길면 강제 줄바꿈 */
텍스트 넘침 처리 : text-overflow
.subject {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}- 반드시
width와 함께 사용해야 함 - 한 줄로 잘라
...으로 표시
목록 스타일: list-style
ul {
list-style-type: square; /* 불릿 모양 변경 */
}
ol {
list-style-type: upper-roman; /* I, II, III ... */
}
ul.none {
list-style: none; /* 불릿 제거 */
}list-style-image로 이미지 불릿도 가능
✅ 마무리
- 텍스트 속성은 디자인과 가독성에 직접 영향
- 웹폰트로 브랜드 톤을 살릴 수 있음
- 목록 스타일링은 네비게이션, 게시판에 필수
