[CSS] 텍스트 스타일

목차

• 글자 관련 속성
  • font-family : 글자 종류 지정
  • font-size : 글자 크기 지정
  • font-style : 글자를 이탤릭체로 표시할지 지정
  • font-weight : 글자의 굵기 지정
• 텍스트 스타일 속성
  • color :글자색 지정
  • text-decoration : 텍스트에 밑줄, 취소선을 표시할지 지정
  • text-transform : 텍스트 전체, 또는 첫글자를 대문자로 표시
  • text-shadow : 텍스트에 그림자 추가
  • letter-spacing : 글자 사이 간격 지정
  • word-spacing : 단어 사이 간격 지정
  • text-align : 텍스트 정렬 방법 지정
  • lign-height : 줄 간격 지정
• 목록 스타일 속성
  - list-style-type : 목록 스타일을 불릿이나 번호로 지정
  • list-style-image : 목록 스타일을 이미지로 지정
  • list-style-position : 목록 들여쓰기 지정
  • list-style : 위의 3가지 목록 속성을 한꺼번에 지정
• 표 스타일 속성
  • caption-side : 표 제목 위치 지정
  • border : 표 바깥 테두리와 셀 테두리 지정
  • border-collapse : 표와 셀 테두리 합칠지 여부 지정

글자 관련 속성

• font-family : 글자 종류 지정

  font-family: 글꼴이름[, 글꼴이름, 글꼴이름];

  • 해당 글꼴이 없을 경우를 대비해서 2번째, 3번째 글꼴까지 생각해야 함
  • 글꼴 이름이 2단어 이상으로 된 경우, 따옴표로 묶어서 작성
• font-size : 글자 크기 지정 (기본 16px)

  font-size: 크기;

  • 키워드로 크기 지정 : xx-small < x-small < small < medium < large < x-large < xx-large
  • 단위를 사용하여 크기 지정
    • em : 부모 요소에서 글자 크기의 대문자 너비 기준(1em)으로 한 후 비율값 지정
    • rem : 문서 시작 부분에서 지정한 글자 크기 기준(1rem)으로 한 후 비율값 지정
    • ex : 해당 글꼴의 소문자 x의 높이 기준(1ex)으로 한 후 비율값 지정
    • px : 모니터의 1픽셀 기준(1px)으로 한 후 비율값 지정
    • pt : 포인터, 일반 문서에서 많이 사용
  • 백분율로 크기 지정 : 부모 요소의 글자 크기를 기준으로 지정
    (단, 부모 요소의 글자 크기가 단위(px 등)로 표현되어 있어야 함)
• font-style : 글자를 이탤릭체로 표시할지 지정

  font-style: normal | italic | oblique;

  • normal : 기본값, 일반적인 형태로 표시
  • italic, oblique : 이탤릭체로 표시 (주로 italic 사용)
• font-weight : 글자의 굵기 지정

  font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 900;

  • normal : 기본값, 보통 굵기
  • bold : 굵게
  • bolder : 원래보다 더 굵게
  • lighter : 원래보다 더 가늘게
  • 100~900(100단위) : 굵기 표현 (100은 가장 가늘게, 900은 가장 굵게)
• 웹 폰트 사이트 : 눈누

예시

<style>
  body{
    font-size: 10px;
  }
  p{
  	font-family: cursive;
  	font-size: 2em; /*body(부모요소)기준 2배 글자 크기*/
	font-weight:700;
    font-style: italic;
  }
</style>
...
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores amet eligendi consequuntur iste tenetur sapiente enim illo aliquam! Qui at itaque ab neque accusamus dolorum molestias odio eligendi aliquam libero?</p>

텍스트 스타일 속성

• color : 글자색 지정

  color: 색상;

  • 16진수(#RRGGBB) : 빨강, 초록, 파알 각각 두자리씩 총 여섯 자리의 16진수로 색상 표현
    • #000000(검은색)부터 #ffffff(흰색)까지 표현 가능
    • 색상표 참고 사이트 : @corner
  • rgb(R, G, B) : 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 표현
  • rgba(R, G, B, a) : rgb 형식에 불투명도를 함께 표현
  • hsl(H, S, L) : 색상(hue), 채도(saturation), 명도(lightness)의 값으로 색상 표현
    • H : 각도 기준으로 0°와 360°는 빨간색, 120°는 초록색, 240°는 파란색 그 사이사이 나머지 색이 배치
    • S : 0% (회색 톤) ~ 100% (원래 색)
    • L : 0% (어두움) ~ 50% (원래 색) ~ 100% (흰색)
      
  • hsla(H, S, L, a) : hsl형식에 불투명도(alpha)를 함께 표현
  • 색상 이름 : red, yellow와 같은 색상 이름을 사용
• text-decoration : 텍스트에 밑줄, 취소선을 표시할지 지정

  text-decoration: none | underline | overline | line-through;

  • none : 텍스트에 줄 표시 안함
    (하이퍼링크는 자동으로 밑줄이 있는데, none으로 없앨 수 있음)
  • underline : 밑줄 표시
  • overline : 윗줄 표시
  • line-through : 취소선 표시
• text-transform : 텍스트 전체, 또는 첫글자를 대문자로 표시

  text-transform: capitalize | uppercase | lowercase | full-width;

  • capitalize : 첫 글자를 대문자로 변환
  • uppercase : 모든 글자를 대문자로 변환
  • lowrcase : 모든 글자를 소문자로 변환
  • full-width : 가능한 한 모든 문자를 전각 문자로 변환
    (전각 문자 : 가로,세로 길이 비율이 같은 글자)
• text-shadow : 텍스트에 그림자 추가

  text-shadow: none | 가로거리 세로거리 번짐정도 색상;

  • 가로거리/세로거리 : 텍스트로부터 그림자까지의 가로/세로 거리 (필수 속성)
    • 양수는 글자의 오른쪽/아래쪽, 음수는 왼쪽/위쪽에 그림자 생성
  • 번짐 정도 : 그림자가 번지는 정도 (기본값은 0)
    • 양수는 그람자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시되고,
      음수는 모든 방향으로 축소되어 보임
  • 색상 : 그림자 색상 지정 (기본값은 현재 글자색)
    • 공백으로 구분해 여러 색상 지정 가능
• letter-spacing : 글자 사이 간격 지정

  letter-spacing: 글자 간격;

  • px, em같은 단위나 퍼센트로 크기 조절
• word-spacing : 단어 사이 간격 지정

  word-spacing: 단어 간격;

  • px, em같은 단위나 퍼센트로 크기 조절
• text-align : 텍스트 정렬 방법 지정

  text-align: start | end | left | right | center | justify | match-parent;

  • start / end: 현재 텍스트 줄의 시작/끝 위치에 맞추어 문단 정렬
  • left(기본값) / right / center : 왼쪽/오른쪽/가운데에 맞추어 문단 정렬
  • justify : 양족에 맞추어 문단 정렬
  • match-parent : 부모 요소를 따라 문단 정렬
• line-height : 줄 간격 지정

  line-height: 줄 간격;

  • 단위로 줄 간격 24px 지정 : line-height: 24px
  • 문단의 글자 크기 기준으로 지정 : line-height: 2.0 | 200%
    • 글자 크기가 12px이라면, 줄 간격은 2배인 24px

  텍스트를 세로로 정렬하는 방법
  : height속성과 line-height속성의 값을 똑같이 지정해주면 됨

예시

<style>
  .right{ text-align: right; }
  .left{ text-align: left; }
  .center{ text-align: center; }
  .both{ text-align: justify; } /* 텍스트 양 끝을 맞춤 */

  .underline{ text-decoration: underline; }
  .line{ text-decoration: line-through; }
  a{ text-decoration: none; }
</style>
...
<div class="right">오른쪽</div>
<br>
<div class="left">왼쪽</div>
<br>
<div class="center">중앙</div>
<p class="both">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quod, culpa iusto unde officiis vel, consectetur aliquid ipsam deserunt dignissimos quibusdam. Ipsum error fuga sed unde, omnis enim quis. Facilis!</p>
<br>
<div class="underline">밑줄을 칩시다</div>
<div class="line">중앙에 선 긋기</div>
<a href="">밑줄을 없애고 싶어요</a>

목록 스타일

• list-style-type : 목록 스타일을 불릿이나 번호로 지정

  list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

  • disc(●), circle(○), square(■)
  • demical (1, 2, 3, ...), demical-leading-zero (01, 02, 03, ...)
  • lower-roman (i, ii, iii, ...), upper-roman (I, II, III, ...)
  • lower-alpha (a, b, c, ...), upper-alpha(A, B, C, ...)
  • none : 불릿이나 숫자 없앰
• list-style-image : 목록 스타일을 이미지로 지정

  list-style-image: url('이미지 경로') | none;

  • url('이미지 경로') : 불릿 목록 스타일 대신 이미지로 목록 스타일로 지정
    (불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋음)
• list-style-position : 목록 들여쓰기 지정

  list-style-position: inside | outside;

  • inside : 불릿/번호를 기본 위치보다 안으로 들여쓰기
  • outside : 기본값
• list-style : 위의 3가지 목록 속성을 한꺼번에 지정
  • 볼릿 없애기 예시 : ul {list-styel: none;}
  • 소문자 목록 만들고 들여 쓰기 : ol {list-style: lower-alpha inside; }

표 스타일

• caption-side : 표 제목 위치 지정

  caption-side: top | bottom;

  • top(기본값) : 캡션을 표 윗부분에 표시
  • bottom : 캡션을 표 아랫부분에 표시
• border : 표 바깥 테두리와 셀 테두리 지정

  border: 테두리두께 테두리종류 테두리색상;

  • table선택자에 border속성을 넣으면 표 바깥 테두리 지정
  • td, th 선택자에 border속성을 넣으면 셀 테두리 지정
• border-collapse : 표와 셀 테두리 합칠지 여부 지정

  border-collapse: collapse | separate;

  • collapse : 표와 셀의 테두리를 합쳐 하나로 표시
  • separate(기본값) : 표와 셀의 테두리를 따로 표시