31. CSS - 텍스트 관련 스타일

1. 텍스트 관련 스타일

1. 글꼴 지정하는 font-family

1. 웹 문서에서 사용할 글꼴을 지정하는 속성
2. 웹 문서에서 글꼴을 지정할 시 한 가지 글꼴만 지정할 때도 있지만 해당 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 지정하는게 일반적이다.
3. font관련 스타일들은 상속되기 때문에 body에 지정해 놓으면 웹 문서의 통일성을 높일 수가 있어 body에 지정하고 특정 태그에서만 변경하는 경우가 많다.
4. 글꼴 지정 방식
   • font-family: 글꼴이름1, 글꼴이름2, 글꼴이름3, ...
     ex) font-family: '맑은 고딕', 돋움, 굴림 => 맑은 고딕으로 글꼴이 적용되는데 맑은 고딕이 없을 경우 돋움으로 돋움도 없을 경우에는 굴림이 적용
5. 웹 글꼴 사용하기
   • 웹 폰트 : 웹 문서 안에 글꼴에 대한 정보를 저장했다가 웹 문서를 여는 순간 해당 웹페이지에서 글꼴을 가져와서 사용하는 방식. 시스템 없는 글꼴이더라도 개발자가 원하는 글꼴을 사용할 수 있는 장점이 있다.
   • 웹 글꼴에 대한 정보 저장
     • @import url(웹 글꼴 주소)
     • font-family: 해당 url에서 가져오는 웹 글꼴의 이름

2. 글자 크기를 지정하는 font-size

1. 글자 크기를 조절할 때 사용하는 속성.
2. 사용할 수 있는 속성 값 : 절대 크기, 상대 크기, 백분율
3. 기본 값은 medium
4. font-size : 절대크기|상대크기|백분율;
5. 절대크기 : 브라우저에서 가지고 있는 글자크기. xx-small|x-small|small|medium|large|x-large|xx-large
6. 상대크기 : 부모 태그의 글자크기를 기준으로 크기를 조절. larger|smaller
7. 크기 : 브라우저와 상관없이 글자 크기를 직접 지정. px, rem, em, pt 등 단위로 지정 가능.
8. 백분율 : 부모 태그의 글자크기를 기준으로 백분율로 글자크기 조절.
9. 크기에서 사용되는 단위들
   • px : 모니터에 따라 상태크기가 됨. 웹 문서에서 가장 많이 사용하는 단위.
   • rem : 해당 글꼴의 소문자 r의 넓이를 기준으로 크기를 조절함. 소문자 r의 크기가 1rem. 크기를 작게하려면 1보다 작게 크기를 키우려면 1보다 크게 설정.
   • em : 해당 글꼴의 대문자 M의 넓이를 기준으로 크기를 조절함. 대문자 M의 크기가 1em.
   • pt : 포인트 단위. 일반문서에서 사용하는 포인트단위와 동일한 크기.
   • px, rem, em 단위를 많이 사용하게 되는데 px는 폰트크기가 고정되어 작은 모바일기기에서도 동일한 크기의 글자를 표시함. em, rem은 기준이 기기의 문자 크기로 바뀌기 때문에 기준이 되는 문자의 상대크기로 변경됨.

3. 글자 굵기 조절하는 font-weight

1. 글자의 굵기를 조절할 때 사용하는 속성
2. font-weight: 키워드|숫자;
3. font-weight에서 사용가능한 속성 값
   • normal : 기본 값. 기본 두께로 표출
   • bold|lighter|bolder : 굵게|기본 두께보다 가늘게|기본 굵기보다 더 굵게
   • 100 ~ 900: 100단위로 작성한다. 400이 normal과 같은 굵기를 갖고 700은 bold와 같은 굵기. 키워드로 조절하는 것보다 세밀한 굵기 조절이 가능

4. 작은 대문자로 표시하는 font-variant

1. 소문자 크기에 맞춰서 대문자로 표기
2. 지정 가능한 속성 값
   • normal : 일반적인 형태로 표출
   • small-caps : 작은 대문자로 표출

5. 글자 스타일을 지정하는 font-style

1. 글자를 이탤릭체로 표현하기 위한 속성
2. 지정 가능한 속성 값
   • normal : 일반적인 형태로 표출
   • italic, oblique : 이탤릭체로 표출.
   • italic은 이탤릭체가 디자인되어 있는 폰트에서 사용
   • oblique는 이탤릭체가 디자인되어 있지 않아도 글자를 기울여서 표시

6. 폰트관련 속성들을 한 번에 지정한 font

1. 앞서 배운 font관련 속성들을 한 번에 정의한다.
2. font 속성 지정법
   • font: font-style의 속성 값 font-size의 속성값/line-height의 속성값 font-weight의 속성값 font-variant의 솏성값 font-family의 속성값
   • 기본값으로 사용할 속성은 생략 가능하다. font-vaiant, font-weight, font-style은 항상 font-size 앞에 지정돼야한다. font-family, font-size는 필수값. font-family는 항상 마지막에 입력한다. 나머지 순서들은 무방하다.
   • 그리고 위의 속성들을 미리 지정해놓은 키워드들을 사용해서도 지정할 수 있다.
   • font: caption|icon|menu| ...
     • caption: 제목에 어울리는 글꼴스타일 지정
     • icon: 아이콘에 어울리는 글꼴스타일 지정
     • menu: 드롭다운 메뉴에 어울리는 글꼴스타일 지정
     • message-box: 대화상자에 어울리는 글꼴스타일 지정
     • small-caption: 부제목에 어울리는 글꼴스타일 지정
     • status-bar: 상태표시줄에 어울리는 글꼴스타일 지정
   • line-height : 줄 간격 지정할 때 사용하는 속성. 글자크기랑 줄간격이 밀접한 연관이 있어서 글자크기/줄간격을 하나의 속성처럼 사용하기도 한다.

7. 글자의 색상을 지정하는 color

1. 글자의 색상을 지정할 때 사용하는 속성
2. font에서 지정하지는 못한다.
3. 16진수 값, rgb값, 색상이름으로 지정가능
4. color: 색상값
5. 16진수 값은 6자리로 구성 앞 두자리는 red의 값 지정(00ff)지정 가능 두 번째 두자리는 green의 값 지정(00ff)지정 마지막 두자리는 blue의 값 지정(00~ff)지정. 두 자리씩 같은 값이 반복 될때는 축약해서 세자리로 표현 가능. ff00aa -> f0a
6. rgb값은 rgb(red(0255), green(0255), blue(0~255))지정

7. 텍스트에 밑줄이나 취소선을 그어주는 text-decoration

1. 텍스트에 밑줄이나 중간에 취소선을 추가할 때 사용하는 속성
2. 지정가능한 속성 값
   • underline: 밑줄을 그어줌
   • overline: 윗줄을 그어줌
   • line-through: 취소선을 그어줌
   • none: 기본값으로 아무 선도 표시하지 않음.

8. 대소문자를 변환해주는 text-transform

1. 영문자의 대/소문자를 변환할 때 사용하는 속성
2. 지정가능한 속성 값
   • capitalize: 시작하는 첫 번째 글자를 대문자로 변환
   • lowercase: 모든 글자를 소문자로 변환
   • uppercase: 모든 글자를 대문자로 변환
   • none: 변환하지 않음. 기본값.

9. 텍스트에 그림자를 그려주는 text-shadow

1. 텍스트에 그림자 효과를 추가할 때 사용하는 속성
2. 자주 사용하면 웹 문서 자체가 지저분해보이기 때문에 제목이나 강조할 내용에만 추가
3. 지정가능한 속성 값
   • none: 그림자 추가하지 않음
   • 가로거리 세로거리 번짐정도 색상
     • 가로거리: 텍스트로부터 그림자까지의 가로거리 지정. 양수로 지정하면 오른쪽으로 그림자가 커지고 음수로 지정하면 왼쪽으로 그림자가 커진다. 필수 입력값.
     • 세로거리: 텍스트로부터 그림자까지의 세로거리 지정. 양수는 아래쪽으로 음수는 위쪽으로 그림자를 생성. 필수 입력값.
     • 번짐정도: 그림자의 번짐정도를 지정. 양수는 그림자가 모든 방향으로 퍼져나가 그림자가 크게 표시. 음수는 그림자가 모든방향으로 축소되어 표시. 기본 값 0.
     • 색상: 그림자의 색상을 지정. 한 가지 색상을 지정할 수도 있고 스페이스(공백)을 추가해서 여러가지 색상을 지정할 수도 있다. 기본값은 현재 글자의 색상.

10. 공백을 처리해주는 white-space

1. 텍스트와 함께 연속적으로 입력된 공백에 대한 처리를 할 때 사용하는 속성
2. 지정 가능한 속성 값
   • normal: 여러개의 공백을 하나로 처리. 기본 값.
   • nowrap: 여러개의 공백을 하나로 처리하되 영역을 넘어가는 내용은 줄을 바꾸지 않고 그대로 표시
   • pre: 여러개의 공백을 그대로 표출하고 영역을 넘어가는 내용은 줄을 바꾸지 않고 그대로 표시
   • pre-line: 여러개의 공백을 하나로 표출하고 넘어가는 내용은 줄바꿔 표시
   • pre-wrap: 여러개의 공백을 그대로 표시하고 영역을 넘아가는 내용은 줄바꿔서 표시

11. 텍스트사이의 간격을 조절하는 letter-spacing, word-spacing

1. letter-spacing 글자간의 간격 조절(자간 조절)
2. word-spacing 단어간의 간격 조절
3. 지정가능한 속성 값
   • normal: 기본값. 일반적인 간격으로 설정됨.
   • 수치값으로 크기 지정

12. 글자의 쓰기 방향을 지정하는 direction

1. 텍스트를 어느 방향부터 쓰기 시작할 것인지 결정하는 속성
2. 지정가능한 속성 값
   • ltr: 왼쪽에서 오른쪽으로(left to right) 텍스트 표시. 기본값.
   • rtl: 오른쪽에서 왼쪽으로(right to left) 텍스트 표시.

13. 텍스트를 정렬하는 text-align

1. 문단의 텍스트 정렬 방법을 지정
2. 텍스트만 정렬하진 않고 자식 태그들도 정렬
3. 지정가능한 속성 값
   • start: 텍스트를 줄의 시작위치에 맞춰서 정렬
   • end: 텍스트를 줄의 끝 위치에 맞춰서 정렬
   • left: 왼쪽 정렬
   • right: 오른쪽 정렬
   • center: 가운데 정렬
   • justify: 양쪽에 맞춰서 정렬
   • match-parent: 부모 요소에 따라 정렬
4. text-justify: text-align 속성이 justify 일 때 사용가능한 속성. 정렬할 때 공백을 처리하는 방식을 지정
   • 지정가능한 속성 값
     • auto: 웹 브라우저에서 자동으로 지정
     • none: 정렬하지 않음.
     • inter-word: 단어 사이의 공백을 조절해 정렬
     • distribute: 인접한 글자 사이의 공백을 똑같이 맞춰 정렬

14. 들여쓰기 크기를 지정하는 text-indent

1. 문단의 첫 글자를 얼마나 들여쓸지를 지정하는 속성
2. 지정가능한 속성 값
   • 크기: 단위와 함께 사용. 음수도 지정가능.
   • 백분율: 부모 태그 넓이 기준으로 상대적 크기를 지정

15. 줄 간격을 조절하는 line-height

1. 원하는 만큼의 줄 간격을 지정할 때 사용하는 속성
2. 지정가능한 속성 값
   • normal: 기본 값. 일반적인 줄간격으로 지정
   • 숫자: 실수로 단위없이 지정하는 방식. 글자크기의 몇배로 지정할 것인지 지정.
   • 크기: 단위와 함께 크기를 지정하는 방식
   • 백분율: 부모 태그의 높이 기준으로 퍼센테이지 지정
   • inherit: 부모의 지정된 줄간격 상속받아 사용.
3. 보통 글자 크기의 1.5~2배 정도면 적당하다.

16. 넘치는 텍스트를 처리해주는 text-overflow

1. 지정한 영역의 범위를 벗어나는 텍스트를 어떻게 처리할 것인지에 대한 설정
2. overflow속성이 hidden, scroll, auto이면서 white-space속성이 nowrap일 때만 적용 가능
3. 지정가능한 속성 값
   • clip: 넘치는 텍스를 잘라버림
   • ellipsis: 말 줄임표(...)로 잘린 텍스트가 있다고 표시