[CSS] 텍스트 스타일

글꼴 스타일

#  글꼴 지정

선택자 { font-family : 글꼴명1, [글꼴명2, 글꼴명3, ...] ; }

 

  - 지정한 글꼴이 없을 경우에 대비해서 2, 3, ... 번째 글꼴까지 지정해둘 수 있음

 

#  글자 크기 조절

선택자 { font-size : 절대크기 | 상대크기 | 숫자 | 백분율 ; }

 

  - 속성 값

      · 절대 크기

          : xx-small | x-small | small | medium | large | x-large | xx-large

      · 상대 크기 

          : larger | smaller

      · 크기

          i. em : 대문자 M의 너비를 1로 뒀을 때의 기준으로 크기 조절

          ii. ex : 소문자 x의 높이를 1로 뒀을 때의 기준으로 크기 조절

          iii. px (픽셀)

          iv. pt (포인트)

      · 백분율

          : 부모 요소의 글자 크기를 기준으로, 해당되는 %를 계산해서 표시

 

#  글자 굵기 조절

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

 

#  대문자를 소문자 크기에 맞춰 작게 표시

선택자 { font-variant : normal | small-caps ; }

 

  - small-caps : 소문자로 표기된 것을 크기가 작은 대문자로 변환하여 표시

 

#  이탤릭체 (기울임)

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

 

#  글꼴 관련 속성 한 번에 표기

선택자 { font : font-style값 font-size값/line-height값 font-family값 ; }
             /* 기울임 여부   글자 크기     줄 간격        글꼴명 */

 

  - 모든 속성 값을 작성해야 작동함

      ex) { font : italic 12px/24px 돋움; }

 

 

반응형

728x90

---

텍스트 스타일

#  글자 색 지정

선택자 { color : 색상 ; }

 

  - 표기 방식 

      i. 16진수  ex) #ff0000

      ii. rgb 값  ex) rgb(255, 0, 0)

      iii. 색상명  ex) red

 

#  밑줄 또는 취소선 표시

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

 

  - none : 밑줄을 표시하지 않음  (하이퍼링크 밑줄 제거 가능)

  - underline : 밑줄을 표시함

  - overline : 윗줄을 표시함

  - line-through : 취소선을 표시함

 

#  영문 텍스트의 대문자/소문자 변환

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

 

  - none : 변환하지 않음

  - capitalize : 첫 번째 글자만 대문자로 변환함

  - uppercase : 모든 글자를 대문자로 변환함

  - lowercase : 모든 글자를 소문자로 변환함

 

#  그림자 효과

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

 

 

  - 텍스트와 그림자까지의 가로/세로 거리

      · 양수 값 : 오른쪽, 아래 방향

      · 음수 값 : 반대 방향

  - 그림자의 번짐 정도

      · 양수 값 : 그림자가 크게 표시됨

      · 음수 값 : 그림자가 축소되어 보임

  - 그림자 색상

      · 공백으로 구분하여 여러 색상을 지정할 수 있음

      · 기본값 : 현재 글자 색

  - 콤마로 구분하여 여러 그림자를 동시에 적용할 수 있음

 

#  글자 간 간격 & 단어 간 간격 (자간)

선택자 { letter-spacing : normal | 크기 ; }

선택자 { word-spacing : normal | 크기 ; }

 

#  텍스트 추가

선택자 { content : "텍스트" ; }

 

 

---

문단 스타일

#  텍스트 작성 방향

선택자 { direction : ltr | rtl ; }

 

  - ltr (기본값) : 왼쪽에서 오른쪽으로

  - rtl : 오른쪽에서 왼쪽으로

 

#  텍스트 정렬

선택자 { text-align : start | end | left | right | center | justify | match-parent ; }

 

 

  - start : 현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬

  - end : 현재 텍스트 줄의 끝 위치에 맞춰 문단 정렬

  - left (기본값) : 왼쪽에 맞춰 문단 정렬

  - right : 오른쪽에 맞춰 문단 정렬

  - center : 가운데에 맞춰 문단 정렬

  - justify : 양쪽에 맞춰 문단 정렬

  - match-parent : 부모 요소에 맞춰 문단 정렬

 

#  문단의 첫 글자 들여쓰기

선택자 { text-indent : 크기 | 백분율 ; }

 

  - 백분율 : 부모 요소의 너비를 기준으로 상대적 크기 지정

 

#  문단의 줄 간격

선택자 { line-height : normal | 숫자 | 크기 | 백분율 | inherit ; }

 

  - 일반적으로, 글자 크기의 1.5~2배 정도가 적절함

 

#  지정한 영역을 벗어나는 텍스트 처리

선택자 { 
    /* 줄바꿈 없이 한 줄로 표시 */
    white-space : nowrap;
    /* 스크롤이 없어지면서, 넘치는 글자는 잘림 */
    overflow : hidden;
    /* 잘린 부분을 버리거나 말줄임표로 표시함 */
    text-overflow : clip | ellipsis ; 
}

/* 마우스를 올렸을 때 잘린 글자가 보이게 함 */
.선택자:hover {
    overflow : visible;
}

 

  - text-overflow 속성

      · clip : 넘치는 텍스트를 잘라서 버림

      · ellipsis : 말 줄임표(···)로 잘린 텍스트가 있다고 표시함