일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자가설치
- Galaxy
- 갤럭시
- Davinci Resolve
- Python
- 세면대
- 파이썬
- naver
- C언어
- 리졸브
- 분해
- 삼성
- 종류
- 욕실
- java
- 다빈치
- 영상편집
- 애플
- Davinci
- 태그
- 다빈치 리졸브
- samsung
- tag
- RESOLVE
- 인공지능
- DIY
- HTML
- 안드로이드
- CSS
- Apple
Archives
- Today
- Total
250x250
반응형
IT 세상 해석하기
[CSS] 글꼴, 텍스트, 표 관련 속성 본문
728x90
반응형
[CSS] 글꼴, 텍스트, 표 관련 속성
By i!kohong(아이코홍)
글꼴 관련 속성
속성명 | 설명 | 예시 |
font-family | 글꼴의 종류를 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | font-family : 굴림체 |
font-style | 글꼴의 스타일을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | font-style : nomal | italic | oblique |
font-variant | 작은 대문자를 사용한다. 상속이 되며, 모든 태그에 적용이 가능하다. | font-variant : nomal | small-caps |
font-weight | 글꼴의 굵기를 지정한다. 상속이 되며, 모든 태그에 적용이 가능하다. | font-weight : 100~900 | nomal(400) | bolder | lighter | bold(700) |
font-size | 글꼴의 크기를 지정한다. 상속이 되며, 모든 태그에 적용이 가능하다. |
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | lager | smaller | px | pt | % |
font | 글꼴 관련된 속성을 한번에 지정한다. | font:12pt 굴림 |
텍스트 관련 속성
속성명 | 설명 | 예시 |
text-indent | 들여쓰기를 지정. 상속이 되며 블록 단위로 적용이 가능하다. | text-indent:px | % |
text-align | 텍스트 정렬 방식을 지정. 상속이 되며 블록 단위로 적용이 가능하다. | text-align:left | right | center | justify |
text-decoration | 링크 등의 장식 효과를 지정한다. 상속이 안되며 모든 태그에 적용이 가능하다. | text-decoration:none | underline | overline | line-through, a:hover(mouseover), a:link(link), a:active(click), a:visited(visited) |
line-height | 줄의 간격을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | line-height:nomal | px | 숫자 | % |
letter-spacing | 문자 사이의 간격을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | letter-spacing:nomal | px | pt | cm |
word-spacing | 단어 사이의 간격을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | word-spacing:nomal | px | pt | cm |
text-transform | 영문 대소문자를 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. | text-transform:capitalize | uppercase | lowercase | none |
목록 관련 속성
속성명 | 설명 | 예시 |
list-style-type |
목록 앞에 표시되는 순번이나 이미지 표식을 지정한다. 상속이 되며 목록에 적용이 가능하다. |
list-style-type:disc | cicle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-latin | upper-latin | hebrew | amenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | lower-greek | none |
list-style-image | 특정 이미지 파일로 목록의 이미지를 표시한다. 상속이 되어 목록에 적용이 가능하다. | list-style-image:이미지경로 | none |
list-style-position | 목록과 이미지의 괴리를 표시한다. 상속이 되며 목록에 적용이 가능하다. | list-style-position:inside | outside |
list-style | 목록 관련 속성을 한번에 지정한다. | list-style:lower-latin inside |
728x90
반응형
'프로그래머 공간 > CSS' 카테고리의 다른 글
[CSS] 레이어 관련 속성 (0) | 2019.11.25 |
---|---|
[CSS] 여백, 테두리 관련 속성 (0) | 2019.11.25 |
[CSS] 홈페이지 글꼴 색과 배경을 원하는데로! 글꼴 색과 배경 관련 속성 (0) | 2019.11.25 |
[CSS] 셀렉터(Selector) 표 정리 (0) | 2019.11.25 |
[CSS] 레이아웃의 단위 (0) | 2019.11.25 |
Comments