CSS 기본 텍스트를 표현하는 스타일

1. 글꼴관련 스타일 속성

font-family

• 선택자 { font-family : 글꼴, 글꼴 }
• 글꼴 적용 - 앞에서 부터 우선순위

font-size

• 선택자{ font-size : 크기}
• 글꼴 크기
  • 키워드(small - large...등)
  • 단위 (px, em, pt.. 등)
  • 백분율 (부모의 크기에 따라)

font-style

• 선택자{ font-style : italic}
• 이텔릭체 변환 (obilque)
• default = nomal

font-weight

• 선택자{ font-weight : 굵기}
• lighter. bold, bolder
• 100~900 (굵기)

 

2. 웹 폰트 사용하기

사용자 컴퓨터에 없는 폰트도 웹에 출력 가능

구글 폰트 : fonts.google.com

• @import url('      폰트 주소        ');   in 스타일태그

 

3. 텍스트 관련 스타일 속성

• color
  • 선택자{ color : 색상}
  • 색상 : 16진수, rgb, hsl, 이름
• text-align
  • 택스트정렬
  • 선택자{ text-align: 속성값;}
  • 속성값
    •  start - 현재 텍스트 시작에서 정렬
    •  end - 현재 텍스트 끝에서 정렬
    •  left - 왼쪽 정렬
    •  right - 오른쪽 정렬
    •  center - 가운데 정렬
• line-height
  • 줄간격 조절
  • 선택자{ line-height : 크기 or 배율}
• text-decoration
  
  • 밑줄 표시
  • 선택자 { text-decoration : 속성값}
  • 속성값
    • none
    • underline
    • overline
    • throughline
• text-shadow
  • 텍스트 그림자
  • 선택자 {text-shadow :  가로 세로 번짐 색}
• text-transfrom
  • 대소문자
  • 선택자 {text-transfrom : 속성값}
  • 속성값
    • capitalize 첫글자 대문자
    • uppercase
    • lowercase
• letter-sapcing
  • 자간조절
  • 선택자 {text-sapcing : 크키}

 

4. 목록 스타일

• list-style-type : 속성값
  • 블릿모양 번호 스타일
• list-style-posistion : inside | outside
  • 들여쓰기, 내어쓰기
• list-style : 

 

5 표 스타일

• caption-side
  • caption-side : top | bottom
  • 표제 위치
• border-spacing
  • boder-spacing : 수평거리 수직거리
  • 셀사이 여백
• border-collapse
  • boder-collapse : collapse
  • 표 테두리 + 셀 테두리