폰트 관련 속성
속성 | 설명 | 속성 | 설명 |
font-size | 텍스트의 크기를 지정한다. | font-weight | 텍스트의 두께를 지정한다. |
text-decoration | 텍스트의 장식용 선을 추가한다. | color | 텍스트의 색상을 지정한다. |
line-height | 텍스트의 행간을 설정 | letter-spacing | 텍스트의 자간을 설정한다. |
word-spacing | 텍스트의 단어 간 간격을 지정한다. | text-align | 블록요소나 표 안에서 텍스트의 가로 정렬방식을 지정한다. |
vertical-align | 인라인 요소나 표안에서 텍스트의 세로 정렬방식을 지정한다. | text-indent | 텍스트의 들여쓰기를 설정한다. |
text-transform | 영문 텍스트의 대소문자를 바꿀 수 있다. | word-break | 텍스트가 콘텐츠박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정한다. (모든 단어를 음절 단위로 쪼갠다.) |
overflow-wrap | 단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정한다. (띄어쓰기 기준으로 줄바꿈을 한다.) | overflow | 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄지 설정한다. |
text-overflow | 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text 를 어떻게 표기 할 것인지 설정한다. |
text-overflow 를 적용하기 전 선행요건•
white-space : nowrap;
•
overflow : hidden;
단위
절대 단위•
외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위
•
cm, m, kg, g
•
px : 화면을 구성하는 가장 기본이 되는 단위
•
pt = 1/72 inch : pt 는 인쇄를 위한 단위이다.
상대 단위•
외부 요인의 영향을 받아 유동적인 값을 지니는 단위이다.
•
% : 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다.
•
em : 스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정한다.
•
rem : 최상위 html 요소의 font-size 속성 값에 비례하여 값을 결정한다.
•
vw 와 vh : 요소의 규격을 viewport 의 너비값과 높이값에 비례하여 결정한다.
◦
viewport : 화면 상의 표시 영역
/* viewport가 1200(px)x920(px)인 경우 */
10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px
CSS
복사