[HTML/CSS]CSS기초 | 텍스트 스타일

• 텍스트 스타일
  • Font-family: 글꼴 지정(두 단어 이상으로 된 글꼴일 경우 따옴표 사용, 지정 글꼴이 없을 경우 대비하여 두 번째, 세 번째 글꼴지정)
  • @font-face: 웹 폰트 적용 | font-family: 글꼴 이름, src: url(글꼴 파일 경로), format(파일 유형)
  • Font-size: 글자 크기 조절
    • 절대 크기: xx-small, x-small, small, medium, large, x-large, xx-large
    • 상대 크기: larger, smaller
    • 크기: em, ex, px, pt로 직접 지정(주로 px사용, 모바일은 em사용), 백분율(%)
  • Font-weight: 글자 굵기 지정(normal(기본값), bold, lighter, bolder, 100~900(400: normal, 700: bold))
  • Font-variant: 작은 대문자 표시(대문자를 소문자 크기에 맞춘 것) | normal(기본값), small-caps(작은 대문자 표시)
  • Font-style: 글자 스타일 지정 | normal(기본값), italic(이탤릭체, 주로 사용), oblique(기울어진 이탤릭체)
  • Font: 글꼴 속성 한꺼번에 묶어서 표시(위에 있는 속성 + font -*(font-로 시작하는 속성 한꺼번에 나열, 폰트크기와 높이는'/'로 연결해 함께 표현))
    • caption: 캡션에 어울리는 글꼴 스타일 표시, icon(아이콘에 어울리는 글꼴 스타일 표시)
    • Menu: 드롭다운 메뉴에 어울리는 글꼴 스타일 표시
    • Message-box: 대화상자에 어울리는 글꼴 스타일 표시
    • Small-caption: 작은 캡션에 어울리는 글꼴 스타일 표시
    • Status-bar: 상태 표시줄에 어울리는 글꼴 스타일 표시
  • Color: 글자 색 지정(16진수, rgb(rgba), hsl(hsla), 색상 이름)
  • Text-decoration: 텍스트에 줄 표시 | none: 변환x, underline: 밑줄 표시, overline: 영역 위로 선 표시, line-throungh: 취소선 표시
  • Text-transform: 텍스트 대소문자 변환 | none: 변환x, capitalize: 첫 번째 글자 대문자로 변환, uppercase: 모든 글자 대문자로 변환, lowercase: 모든 글자 소문자로 변환, full-width: 모든 문자 전각 문자(고정 너비의 두배 너비의 문자)로 변환)
  • Text-shadow: 텍스트 그림자 효과 | 가로거리 (양수값: 글자 오른쪽, 음수값: 글자 왼쪽), 세로거리(양수값: 글자위쪽, 음수값: 글자 아래쪽), 번짐 정도(양수값: 그림자 크게 표시, 음수값: 그림자 작게 표시, 기본값: 0), 색상
  • White-space: 공백처리
    • normal: 여러 개의 공백을 하나로 처리(기본값)
    • nowrap: 여러 개의 공백을 하나로 처리, 영역 너비를 넘어가는 내용은 줄바꿈없이 계속 한줄로 표시
    • pre: 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가는 내용은 줄바꿔 표시
    • Pre-wrap: 여러 개의 공백 그대로 표시, 영역너비를 넘어가는 내용은 줄바꿔 표시
  • Letter-spacing: 낱 글자 사이 간격 조절(글꼴 변경을 위해 em단위 지정이 좋음)
  • Word-spacing: 단어와 단어 사이 간격 조절(글꼴 변경을 위해 em단위 지정이 좋음)
  • Direction: 글자 쓰기 방향지정 | ltr(left to right): 왼쪽에서 오른쪽으로, rtl(right to left): 오른쪽에서 왼쪽으로
  • Text-align: 텍스트 정렬
    • start: 현재 텍스트 줄의 시작 위치에 맞추어 정렬
    • end: 현재 텍스트 줄의 끝 위치에 맞추어 정렬
    • left: 왼쪽에 맞추어 정렬
    • right: 오른쪽에 맞추어 정렬
    • center: 가운데에 맞추어 정렬
    • justify: 양쪽에 맞추어 정렬
    • match-parent: 부모 요소를 따라 문단 정렬
  • Text-justify: 정렬 시 공백 조절 | auto: 자동 지정, none: 정렬x, inter-word: 단어 사이 공백 조절, distribute: 인접 글자 사이의 공백을 똑같이 맞추어 정렬
  • Text-indent: 문단 첫 글자 들여쓰기(크기(음수값)도 사용가능, 백분율(부모 요소 기준 상대적 크기))킈
  • Line-height: 줄 간격 조절 (normal, 숫자(배수), 크기, 백분율, inherit)
  • Text-overflow: 넘치는 텍스트 표시 (overflow: 속성 값이 hidden, scroll, auto이면서 white-space: nowrap일 때처럼 텍스트가 넘칠때 사용) | clip: 넘치는 텍스트 자름, ellipsis: 말 줄임표(…)로 표시
  • List-style-type: 목록 불릿, 번호 스타일 지정
    • Disc: 채운 원
    • Circle : 빈 원
    • Square: 채운 사각형
    • None: 불릿x
    • Decimal: 1로 시작하는 십진수
    • Decima-leading-zero: 앞에 0이 붙는 십진수
    • Lower-roman: 소문자 로마 숫자
    • Upper-roman: 대문자 로마 숫자
    • Lower-alpha(lower-latin): 소문자 알파벳
    • Upper-alpha(upper-latin): 대문자 알파벳
    • Armenian: 아르메니아 숫자
    • Georgian: 조지 왕조시대 숫자
  • List-style-image: 불릿을 원하는 이미지로 대체(none, url)
  • List-style-position: 목록에 들여쓰기 효가내기 | inside: 불릿, 숫자 안쪽으로 들여씀, outside: 기본값
  • List-style: 목록 속성 한꺼번에 표시
  • Font-family: 글꼴 지정(두 단어 이상으로 된 글꼴일 경우 따옴표 사용, 지정 글꼴이 없을 경우 대비하여 두 번째, 세 번째 글꼴지정)
  • @font-face: 웹 폰트 적용 | font-family: 글꼴 이름, src: url(글꼴 파일 경로), format(파일 유형)
  • Font-size: 글자 크기 조절
    • 절대 크기: xx-small, x-small, small, medium, large, x-large, xx-large
    • 상대 크기: larger, smaller
    • 크기: em, ex, px, pt로 직접 지정(주로 px사용, 모바일은 em사용), 백분율(%)
  • Font-weight: 글자 굵기 지정(normal(기본값), bold, lighter, bolder, 100~900(400: normal, 700: bold))
  • Font-variant: 작은 대문자 표시(대문자를 소문자 크기에 맞춘 것) | normal(기본값), small-caps(작은 대문자 표시)
  • Font-style: 글자 스타일 지정 | normal(기본값), italic(이탤릭체, 주로 사용), oblique(기울어진 이탤릭체)
  • Font: 글꼴 속성 한꺼번에 묶어서 표시(위에 있는 속성 + font -*(font-로 시작하는 속성 한꺼번에 나열, 폰트크기와 높이는'/'로 연결해 함께 표현))
    • caption: 캡션에 어울리는 글꼴 스타일 표시, icon(아이콘에 어울리는 글꼴 스타일 표시)
    • Menu: 드롭다운 메뉴에 어울리는 글꼴 스타일 표시
    • Message-box: 대화상자에 어울리는 글꼴 스타일 표시
    • Small-caption: 작은 캡션에 어울리는 글꼴 스타일 표시
    • Status-bar: 상태 표시줄에 어울리는 글꼴 스타일 표시
  • Color: 글자 색 지정(16진수, rgb(rgba), hsl(hsla), 색상 이름)
  • Text-decoration: 텍스트에 줄 표시 | none: 변환x, underline: 밑줄 표시, overline: 영역 위로 선 표시, line-throungh: 취소선 표시
  • Text-transform: 텍스트 대소문자 변환 | none: 변환x, capitalize: 첫 번째 글자 대문자로 변환, uppercase: 모든 글자 대문자로 변환, lowercase: 모든 글자 소문자로 변환, full-width: 모든 문자 전각 문자(고정 너비의 두배 너비의 문자)로 변환)
  • Text-shadow: 텍스트 그림자 효과 | 가로거리 (양수값: 글자 오른쪽, 음수값: 글자 왼쪽), 세로거리(양수값: 글자위쪽, 음수값: 글자 아래쪽), 번짐 정도(양수값: 그림자 크게 표시, 음수값: 그림자 작게 표시, 기본값: 0), 색상
  • White-space: 공백처리
    • normal: 여러 개의 공백을 하나로 처리(기본값)
    • nowrap: 여러 개의 공백을 하나로 처리, 영역 너비를 넘어가는 내용은 줄바꿈없이 계속 한줄로 표시
    • pre: 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가는 내용은 줄바꿔 표시
    • Pre-wrap: 여러 개의 공백 그대로 표시, 영역너비를 넘어가는 내용은 줄바꿔 표시
  • Letter-spacing: 낱 글자 사이 간격 조절(글꼴 변경을 위해 em단위 지정이 좋음)
  • Word-spacing: 단어와 단어 사이 간격 조절(글꼴 변경을 위해 em단위 지정이 좋음)
  • Direction: 글자 쓰기 방향지정 | ltr(left to right): 왼쪽에서 오른쪽으로, rtl(right to left): 오른쪽에서 왼쪽으로
  • Text-align: 텍스트 정렬
    • start: 현재 텍스트 줄의 시작 위치에 맞추어 정렬
    • end: 현재 텍스트 줄의 끝 위치에 맞추어 정렬
    • left: 왼쪽에 맞추어 정렬
    • right: 오른쪽에 맞추어 정렬
    • center: 가운데에 맞추어 정렬
    • justify: 양쪽에 맞추어 정렬
    • match-parent: 부모 요소를 따라 문단 정렬
  • Text-justify: 정렬 시 공백 조절 | auto: 자동 지정, none: 정렬x, inter-word: 단어 사이 공백 조절, distribute: 인접 글자 사이의 공백을 똑같이 맞추어 정렬
  • Text-indent: 문단 첫 글자 들여쓰기(크기(음수값)도 사용가능, 백분율(부모 요소 기준 상대적 크기))킈
  • Line-height: 줄 간격 조절 (normal, 숫자(배수), 크기, 백분율, inherit)
  • Text-overflow: 넘치는 텍스트 표시 (overflow: 속성 값이 hidden, scroll, auto이면서 white-space: nowrap일 때처럼 텍스트가 넘칠때 사용) | clip: 넘치는 텍스트 자름, ellipsis: 말 줄임표(…)로 표시
  • List-style-type: 목록 불릿, 번호 스타일 지정
    • Disc: 채운 원
    • Circle : 빈 원
    • Square: 채운 사각형
    • None: 불릿x
    • Decimal: 1로 시작하는 십진수
    • Decima-leading-zero: 앞에 0이 붙는 십진수
    • Lower-roman: 소문자 로마 숫자
    • Upper-roman: 대문자 로마 숫자
    • Lower-alpha(lower-latin): 소문자 알파벳
    • Upper-alpha(upper-latin): 대문자 알파벳
    • Armenian: 아르메니아 숫자
    • Georgian: 조지 왕조시대 숫자
  • List-style-image: 불릿을 원하는 이미지로 대체(none, url)
  • List-style-position: 목록에 들여쓰기 효가내기 | inside: 불릿, 숫자 안쪽으로 들여씀, outside: 기본값
  • List-style: 목록 속성 한꺼번에 표시