글꼴 관련 스타일
▶font-family 속성
▶웹 문서에서 사용할 글꼴 지정
•<body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소들에서 사용
•지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정.
•둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분
•<body> 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨.
▶font-size 속성
▶키워드를 사용해 글자 크기 지정하기
▶단위를 사용해 글자 크기 지정하기
font-style 속성
글자를 이탤릭체로 표시하는 속성
font-weight 속성
글자 굵기를 조절하는 속성
웹 폰트 사용하기
▶웹 폰트란
•웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴.
•사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다.
•@font-face 속성 사용
▶직접 웹 폰트 업로드해 사용하기
1.웹 폰트 파일 준비
- eot 파일, woff 파일
- 기존 ttf 파일을 변환해서 사용할 수도 있음
2.다운로드하기 전에 사용자 시스템에 있는지 확인
- local(글꼴이름)
(IE8 이하 고려해야 하면 eot 파일 선언)
3.woff 파일 선언
4.용량이 큰 ttf 파일을 마지막에 선언
▶구글 폰트 사용하기
1.https://fonts.google.com/ 로 접속
2.한글 폰트 검색
3.Link 항목에 있는 소스 복사 & 글꼴 이름 기억(head에들어감)
4.웹 문서의 <style> 태그 안에 붙여넣음(@import)
5. font-family 속성에서 웹 폰트 글꼴 이름 사용
텍스트 관련 스타일
▶color 속성
•글자 색 지정
•16진수 값이나 rgb 값, hsl 값, 색상 이름 중에서 사용
▶text-align 속성
텍스트 정렬 방법 지정
▶line-height 속성
•문단의 줄 간격 지정
•<숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정
•보통 글자 크기의 1.5~2배 정도면 적당
•줄 간격은 텍스트를 세로 정렬할 때도 유용함
> line-height의 속성 값을 영역의 height의 값과 똑같이 지정
▶text-decoration 속성
•텍스트에 밑줄을 긋거나 가로지르는 줄 표시
•텍스트 링크의 밑줄을 없앨 때도 사용
▶text-shadow 속성
텍스트에 그림자 효과를 추가하는 속성
글자하나나는 사이즈같이 적용하는것이 폰트
높이나 데코레이션은 글자의 대한 속성은 텍스트
▶text-transform 속성
영문 텍스트의 대문자나 소문자를 바꾸는 속성
▶letter-spacing, word-spacing 속성
글자간 간격, 단어간 간격
목록 스타일
▶list-style-type 속성
순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
▶list-style-image 속성
순서 없는 목록의 불릿을 이미지로 바꾸는 속성
▶list-style-position 속성
불릿이나 번호를 들여쓰거나 내어쓸 수 있음
▶list-style 속성
list-style-type, list-style-position, list-style-image 속성을 한꺼번에 표기
표 스타일
▶caption-side
•캡션(설명글)은 기본으로 표 위쪽에 표시됨.
•이 속성을 이용해 아래쪽에 표시 가능
▶border
표의 바깥 테두리와 셀 테두리 모두 지정해야 함.
▶border-collapse
표 테두리와 셀 테두리를 합칠 것인지 설정
'HTML,CSS > 정리' 카테고리의 다른 글
| 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2021.09.27 |
|---|---|
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.09.24 |
| CSS의 기본 (0) | 2021.09.17 |
| 입력 양식 작성하기 (1) | 2021.09.17 |
| 다양한 내용 입력하기 (0) | 2021.09.15 |