[CSS3] 텍스트 스타일 | 문단 스타일 | font | text

목차

1. 글꼴 속성
   1-1. font-family
   1-2. font-size
   1-3. font-weight
   1-4. font-variant
   1-5. font-style
   1-6. font
2. 텍스트 스타일
   2-1. color
   2-2. text-decoration 밑줄, 윗줄, 취소선
   2-3. text-transform 영문자 대소문자 변환
   2-4. text-shadow 텍스트 그림자
   2-5. white-space, letter-spacing, word-spacing 공백 처리, 장평 조정, 자간 조정
3. 문단 스타일
   3-1. direction 출력 방향
   3-2. text-align 텍스트 정렬
   3-3. text-justify 양쪽 정렬 중 자간 조정
   3-4. text-indent 문장 들여쓰기
   3-5. text-overflow 영역 벗어난 텍스트 표시
   3-6. line-height 줄 간격 조절

---

 

1. 글꼴 속성

1-1. font-family

선택자 { font-family : 글꼴이름; }

#ff1 { font-family : "궁서체"; }
#ff2 { font-family : "돋움체"; }
#ff3 { font-family : "없는글꼴", "굴림체" }

• 폰트 글꼴을 설정하는 속성이다.
• 이때 폰트 이름을 나열해 사용 환경 따라 글꼴A 적용이 어려운 경우 뒤잇는 글꼴B, 글꼴C로 대신되도록 설정할 수 있다. 만약 A, B, C 모두 없다면 브라우저 기본 글꼴이 쓰인다.
• 이를 통해 웹 폰트 추가 및 적용도 가능하다: [CSS3] link | 외부 스타일시트 | 웹 폰트

---

1-2. font-size

선택자 { font-size : 크기; }

#size1 { font-size : 30px; }
#size2 { font-size: 2em; }
#size3 { font-size : 150%; }

• 글자 크기를 조절하는 속성이다.
• 사이즈 단위에는 다음과 같은 것들이 있다: em, ex, px, pt 등등
• em, ex는 상대 크기를 가지는 대표적 구성 단위이고, px, pt는 절대 크기를 갖는다: [CSS3] CSS 단위

❗ 부모 요소의 크기가 변경되면, 이를 참고하는 자식 요소 또한 상대적인 크기가 반영된다.

• 예를 들어 부모 <ul> 안에 속한 <li>가 있다고 가정하자. 이때 <ul>의 내부문자 크기를 150% 늘리고, <li>의 내부문자 또한 1.5em 키운다면 결과적으로 자식 요소인 <li>의 크기는 기존 크기로부터 1.5배 확장된 것의 1.5배가 된다.

---

1-3. font-weight

선택자 { font-weight : normal | bold | bolder | lighter | 100 | 400 | 900; }

❗ 개발자 도구 → Styles 창에서 속성값을 바꿔가며 실시간으로 테스트해 볼 수 있다. 파일에 일일이 바꿔가며 확인하는 수고로움을 대신할 수 있다.

#fw1 { font-weight : bold; }
#fw2 { font-weight : lighter; }
#fw3 { font-weight : bolder; }
#fw4 { font-weight : 100; }

• 얇게 혹은 굵게 글자 굵기를 지정하는 속성이다.

normal

• 기본 형태이다.

bold

• 굵게 표시한다.

bolder

• 기본보다 더 굵게 표시한다.

lighter

• 기본보다 더 가늘게 표시한다.

수치(100~900)

• 수치를 통해 세밀한 조정이 가능하다.
• 400이 normal, 700이 bold에 해당한다. 즉 100이 가장 얇고, 900이 가장 굵은 형태를 갖는다.

---

1-4. font-variant

선택자 { font-variant : 속성값; }

#fv { font-variant : small-caps; }

• 영문자를 작은 대문자로 변경해주는 속성이다.
• 속성값으로 normal; 또는 small-caps;를 쓸 수 있다.

---

1-5. font-style

선택자 { font-style : normal | italic | oblique; }

#fs1 { font-style : italic; }
#fs2 { font-style : oblique; }

• 글자를 이탤릭체, 즉 기울임 글꼴로 표시하는 속성이다.
• italic은 처음부터 기울어진 글자가 존재할 때를 말하고, olique는 기본 글자를 기울여 표시한다는 차이가 있다.
• 주로 italic이 쓰인다.

---

1-6. font

선택자 { font : font-style font-variant font-weight font-size/line-height font-family; }

#f1 { font : 16px/25px "궁서체"; }
#f2 { font : italic bold 20px/20px "고딕체"; }

• 글꼴 속성을 모아 일괄적으로 표현할 수 있는 스타일 속성이다.
• 제시된 순서대로 나열해 한 번에 적용시킨다.

---

 

2. 텍스트 스타일

2-1. color

선택자 { color : 색상명영문이름 | 16진수숫자 | rgb값 | rgba값 | hsl값 | hsla값; }

/* 같은 빨간색 표시 */
#c-name { color : red; }
#c-16 { color : #ff0000; }
#c-rgb { color : rgb(255, 0, 0); }

• 텍스트 색상을 지정하는 속성이다.
• 색상 적용은 ① 색상명, ② 16진수 숫자, ③ RGB, ④ RGBA, ⑤ HSL, ⑥HSLA 통해 가능하다. 같은 빨간색을 가리키는 방법이 예시처럼 다양한 것이다.

/* 투명도 추가 */
#c-rgba { color : rgba(255, 0, 0, 0.5); }

• RGBA, HSLA에서 A는 Alpha라는 이름을 가진 투명도이다.
• 여기서는 RED, GREEN, BLUE 값으로 선택된 색깔을 0.5만큼 연하게 만드는 역할을 수행했다.

/* 색조, 채도, 명도 */
#c-hsl { color : hsl(360, 100%, 50%); }
#c-hsla { color : hsla(360, 100%, 50%, 0.5); }

• HSLA는 색조, 채도, 명도, 투명도를 뜻한다.

---

2-2. text-decoration 밑줄, 윗줄, 취소선

none	밑줄 삭제
underline	밑줄 표시
overline	윗줄 표시
line-through	취소선 표시

선택자 {text-decoration : none | underline | overline | line-through; }

#td1 { text-decoration : none; }

• 이미 링크가 삽입돼 하이퍼링크로 쓰인 데 대해 none; 속성값을 적용하면 밑줄이 사라진 모양을 낸다.

#td2 { text-decoration : underline; }
#td3 { text-decoration : line-through; }
#td4 { text-decoration : overline; }

• 그밖에도 텍스트 아래 밑줄 긋는 underline, 텍스트 중간에 취소선을 만드는 line-through, 텍스트 영역 위에 줄이 생기는 overline이 속성값 선택지로 있다.

---

2-3. text-transform 영문자 대소문자 변환

none	변환없이 표시
capitalize	첫 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 반환
lowercase	모든 글자를 소문자로 반환

선택자 { text-transform : none | capitalize | uppercase | lowercase; }

#tt1 { text-transform: none; }
#tt2 { text-transform: capitalize; }
#tt3 { text-transform: uppercase; }
#tt4 { text-transform: lowercase; }

• 영문 텍스트의 대소문자 변환 시 사용한다.
• 영문자의 첫 글자만 대문자로 고쳐쓰는 Capitalize, 모든 영문자를 대문자로 바꾸는 UPPERCASE, 모든 영문을 소문자로 반환하는 lowercase가 있다.

---

2-4. text-shadow 텍스트 그림자

선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }

/* 배경 설정 -- margin 외부 여백, padding 내부 여백 */
#bg {
    background: black;
    margin: 30px;
    padding : 50px;
}
/* 공통 속성으로 사이즈와 두께를 지정 */
.shadow {
    font-size : 100px;
    line-height : 30px;
    font-weight : 900
}

/* 그림자 효과 (가로, 세로, 번짐, 색상) */
#ts1 {
    color : orangered;
    text-shadow : 5px 5px orange;
}
#ts2 {
    color : white;
    text-shadow: 0px 1px 20px #fff;
}
#ts3 {
    color : white;
    text-shadow: 1px 1px 20px #6f0;
}
#ts4 {
    color : black;
    text-shadow: 0px 0px 4px #ccc,
    0px -5px 4px #ffc,
    2px -10px 6px #fd3,
    -2px -15px 11px #f80,
    2px -19px 18px #f20;
}

• 텍스트에 그림자 효과를 넣는다.

---

2-5. white-space, letter-spacing, word-spacing 공백 처리, 장평 조정, 자간 조정

✅ white-space : 텍스트 공백을 처리할 때 쓰는 속성이다.
✅ letter-spacing : 낱개 글자간 간격을 조정할 때 쓴다.
✅ word-spacing : 단어와 단어 사이 간격을 조정하기 위해 사용된다.

• .html 문서를 작성할 때 <p> 태그 안에서 Enter 키 통해 개행(줄바꿈)하며 의도적으로 여러 번의 공백을 삽입한 경우를 예시로 든다.

 

normal

공백 1개, 개행 X

#space1 {
    /* 여러 개의 공백을 하나로 표시 */
    white-space: normal;
    /* 낱개 글자의 간격 조정 */
    letter-spacing: 5px;
}

• normal 속성값은 공백을 단 하나만 취급한다.
• letter-spacing에 의해 모든 자간 사이가 넓어진 모양을 띈다.

nowrap

공백 1개, 개행 X, 한 줄 문장

#space2 {
    /* 여러 개의 공백을 하나로 표시, 줄 바꾸지 않고 한 줄 표시 */
    white-space: nowrap;
    /* 단어 사이의 간격 조정 -- 띄어쓰기 부분 */
    word-spacing: 10px;
}

• nowrap 속성값 또한 공백은 하나만을 취급하지만, 줄바꿈 없이 한 줄로 출력하는 특성상 스크롤바를 옆으로 밀어 확인해야 한다.

pre

여러 공백, 개행 X

#space3 {
    /* 여러 개의 공백을 그대로 표시, 문서상에 있던 공백 그대로 나타냄 
    -- pre태그와 비슷 */
    white-space: pre;
}

• pre는 여러 개의 공백을 그대로 표시한다. 입력된 모양 그대로를 옮겨와 보여줄 뿐 개행은 일어나지 않았음이다.

pre-line

공백 1개, 개행 O

#space4 {
    /* 여러 개의 공백을 하나로 표시,
    영역 넘어가면 자동 줄바꿈 -- 공백 기준으로 개행처리 해버림 */
    white-space: pre-line;
}

• pre-line은 문장 앞에 공백이 쓰였다고 간주하고, 해당 1개로 읽은 공백 토대로 그 자리서 개행 처리를 한다.

pre-wrap

여러 공백, 개행 O

#space5 {
    /* 여러 개의 공백을 그대로 표시,
    영역 넘어가면 자동 줄바꿈 */
    white-space: pre-wrap;
}

• pre-wrap은 여러 공백도 그대로 표시하고, 영역이 바뀐 데서 줄바꿈까지 표시한다.
• 이처럼 white-space 속성 통해 공백을 처리할 수 있다.

---

 

3. 문단 스타일

3-1. direction 출력 방향

/* direction 속성 */
/* left to right, right to left */
#p1 { direction: ltr; }
#p2 { direction: rtl; }

• direction 속성은 텍스트 글자 출력 방향을 지정한다.
• ltr은 left to right의 약자로서 왼쪽에서 오른쪽으로 텍스트를 표시하는 속성값이다.

• 그 반대인 rtl은 right to left로서 오른쪽에서 왼쪽으로 나타낸다.

---

3-2. text-align 텍스트 정렬

start	현재 텍스트 줄의 시작 위치 따라 문단 정렬 ※ ltr/rtl 여부 확인해 맞춤 정렬함
end	현재 텍스트 줄의 끝 위치 따라 문단 정렬 ※ ltr/rtl 여부 확인해 맞춤 정렬함
left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬
match-parent	부모 요소 따라 정렬

/* text-align 속성 */
#p3 { text-align: left; }
#p4 { text-align: right; }
#p5 { text-align: center; }
#p6 { text-align: justify; }

• text-align 속성은 텍스트 정렬을 다룬다.
• left 속성값이 기본값에 해당된다. 흔히 보는 왼쪽 정렬된 모습을 확인할 수 있다.

• right는 반대로 오른쪽에 맞춰 정렬시키는 속성값이다.

• center의 경우 가운데 정렬하여 마지막 문장이 가운데서 끝맺음 짓는 것이 특징이다.

• justify 속성값 통해 양쪽 정렬 적용할 수 있다.
• 한쪽으로 치우치게 마련인 일반 왼쪽 정렬, 오른쪽 정렬과 달리 양측에서 틈을 찾을 수 없다. 양쪽 정렬 시 문자간 간격 또한 벌어지기 때문이다.

---

3-3. text-justify 양쪽 정렬 중 문자간 간격 조정

선택자 { text-justify: 속성값; }

auto	웹 브라우저가 자동 간격 조정
none	자간 정렬하지 않음
inter-word	단어 사이 공백을 조절해서 정렬
distribute	인접한 글자 사이 공백을 똑같이 맞춰 정렬

❗ 직전에 다룬 { text-align: justify; }는 양쪽 정렬 중 자간 간격 또한 임의대로 변경하므로 자칫 가독성을 해칠 수 있다.

• 이에 대해 문자 사이 간격을 별도로 조정하도록 제공된 것이 바로 text-align 속성이다.

---

3-4. text-indent 문장 들여쓰기

선택자 { text-indent : 숫자(단위) }

• text-indent 속성의 기본 작성 형식은 위와 같다.
• 숫자(단위)를 속성값으로 전달해 지정한 만큼 들여쓰기 적용한다.

---

3-5. text-overflow 영역 벗어난 텍스트 표시

선택자 { text-overflow : clip; | ellipsis; }

• 속성값 clip은 영역을 넘어간 텍스트를 잘라낸다.
• 속성값 ellipsis는 말 줄임으로 잘린 텍스트를 표현한다.

---

3-6. line-height 줄 간격 조절

/* line-height 속성 -- 줄 간격 */
#p7 { line-height: normal; }
#p8 { line-height: 30px; }
#p9 { line-height: 1.5em; }
#p10 { line-height: 200%; }

0123

• 줄 간격에 대해 normal 속성값으로 기본임을 명시하거나, 30px/1.5em/200%와 같은 수치 단위로 행간을 조절할 수 있다.