텍스트 관련 스타일

글자색을 지정하는 color 속성

 

color : <색상>

• 16진수로 표현하는 방법
  - #RRGGBB로 표시
  - 만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수도 있다.
• hsl과 hsla로 표현하는 방법
  - hsl
    ▷ hue(색상), saturation(채도), lightness(명도)의 줄임말이다.
  - hsla
    ▷ hue(색상), saturation(채도), lightness(명도), alpha(불투명도)의 줄임말이다.
• 색상을 영문명으로 표현하는 방법
  - red, yellow, black처럼 잘 알려진 색상 이름을 사용한다.
• rgb와 rgba로 표현하는 방법
  - rgb
    ▷ red, green, blue의 줄임말로 앞에서부터 빨간색, 초록색, 파란색이 들어 있는 값을 나타낸다.
    ▷ 하나도 섞이지 않았을 때는 0으로 표시하고 가득 섞였을 때는 255로 표시한다.
  - rgba
    ▷ 색상에 불투명도를 지정할 수 있다.
    ▷ a(aplha)는 불투명도의 값을 나타내며, 1은 완전정말 불투명한 것이고 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해진다.

 

텍스트를 정렬하는 text-align 속성

 

• text-align 속성은 문단의 텍스트 정렬 방법을 지정한다.
  

  text-align: start ¦ end ¦ left ¦ right ¦ center ¦ justify ¦ match-parent​

• 종류	설명
  start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
  end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
  left	왼쪽에 맞추어 문단을 정렬
  right	오른쪽에 맞추어 문단을 정렬
  center	가운데에 맞추어 문단을 정렬
  justify	양쪽에 맞추어 문단을 정렬
  match-parent	부모 요소를 따라 문단을 정렬

 

줄 간격을 조절하는 line-height 속성

 

• line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.
• 줄 간격은 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수도 있다.
  ex) 글자 크기가 12px인 문단의 줄 간격을 2.0으로 했다면 실제 줄 간격은 글자 크기의 2.0배인 24px이 되며 백분율도 같은 식으로 계산한다. 
      (보통 줄 간격은 글자 크기의 1.5~2배면 적당하다.)
  

  // 줄 간격 24px로 지정하기
  
  p { font-size: 12px; line-height: 24px;}
  p { font-size: 12px; line-height: 2.0;}
  p { font-size: 12px; line-height: 200%;}​

• 글자를 세로로 가운데 정렬하려면 line-height의 속성 값을 추가하여 영역의 높이를 나타내는 height의 속성 값과 똑같이 지정하면 된다.
  

  .heading {
        width:100%;  /* 영역 너비 */
        height:100px;  /* 높이 */
        background:#222;  /* 배경 색 */
        color:rgb(255,255,255);  /* 글자 색 */
        text-align: center; /* 가로 정렬 - 가운데 */
        line-height: 100px;   /* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
  }

 

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

• 텍스트에 밑줄을 긋거나 취소선을 표시한다.
• 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration 속성을 사용하면 없앨 수 있다.

 

텍스트에 그림자 효과를 추가하는 text-shadow 속성

• 텍스트에 그림자 효과를 줄 수 있다.
• 그림자 효과는 본문에 자주 사용하면 지저분해 보이지만 사이트 제목처럼 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있다.
  

  text-shadow: none ¦ <가로 거리> <세로 거리> <번짐 정도> <색상>​

• 종류	설명
  <가로 거리>	텍스트부터 그림자까지의 가로 거리로 필수 속성.  양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만든다.
  <세로 거리>	텍스트부터 그림자까지의 세로 거리로 필수 속성. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만든다.
  <번짐 정도>	그림자가 번지는 정도. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표신 된다. 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보인다. 기본값은 0이다.
  <색상>	그림자 색상을 지정. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다. 기본값은 현재 글자색이다.

 

텍스트의 대소 문자를 변환하는 text-transform 속성

 

• 문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 수도 있다.
  

  종류	설명
  none	줄을 표시하지 않는다.
  capitalize	첫 번째 글자를 대문자로 변환한다.
  uppercase	모든 글자를 대문자로 변환한다.
  lowercase	모든 글자를 소문자로 변환한다.
  full-width	가능한 한 모든 문자를 전각 문자로 변환한다. (전각 문자 : 가로와 세로의 길이 비율이 같은 글자 /   반각 문자 : 가로와 세로의 길이 비율이 1:2인 글자)

 

글자 간격을 조절하는 letter-spacing, word-spacing 속성

 

• letter-spacing
  : 글자와 글자 사이의 간격을 조절하고
   (CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절)
• word-spacing
  : 단어와 단어 사이 간격을 조절
• 이 2가지 속성은 px, em과 같은 단위나 퍼센트(%)로 크깃값을 조절한다.