[CSS] text 꾸미기

front-end/HTML,CSS

[CSS] text 꾸미기

Ash_O 2023. 3. 11. 22:18

Color 속성

폰트의 색상을 설정한다

키워드, HEX, rgb, rgba, hsl, hsla 등의 표기로 설정할 수 있다.

Transparent : 투명

currentColor

부모에 color값이 있으면 상속받아 사용하게 된다.

div {
  color: red; /* red text color */
  border: 10px solid currentcolor; /* red border color */
}

색상을 설정할 때는 저시력 시각 장애를 위해 폰트의 색상과 배경의 명도 대비도 고려해주면 좋다

font-family

폰트를 지정하는 스타일 속성

사용자 컴퓨터에 설치된 폰트를 사용한다

일반적으로 한 단어로 이뤄진 폰트는 따옴표를 사용하지는 않는데, 그 이상이면 따옴표가 붙는다

p {
	font-family : font1, font2, font3;
}

만약 사용자에게 폰트가 설치되어 있지 않을 수 있어서 이를 예방하고자 font-family 속성을 여러개 사용한다.

보통 가장 마지막에 명조체, 고딕체, 고정폭 글꼴을 적용한다 (genric-family font)

p {
	font-family : font1, font2, font3, Serif, Sans-serif, "Mono space";
}

삽입 방법

1. link 태그로 삽입

<head>
	<link href=Font1URL rel="stylesheet">
   	<style>
    	body { font-family : Font1;}
   	</style>
</head>

2. Import로 삽입

@import url(Font1URL);

body {
	font-family: Font1URL;
}

@font-face

브라우저 사용자의 디바이스에 특정 폰트가 설치되어 있지 않아도 해당 속성을 통해 폰트를 설치하여 사용할 수 있다.

@font-face {
    font-family: ;
    src: ;
    font-weight: ;
    font-style: ;
}

웹폰트 사이트

1. google Fonts

2. 눈누

font-size

크기 단위나 키워드를 지정하여 폰트 크기를 설정할 수 있다

px, em, rem 을 사용함

em : 현재 요소의 부모 요소에 설정된 글꼴 크기의 상대 단위

rem : 루트요소에 설정된 글꼴 크기의 상대 단위

em이나 rem은 반응형 웹페이지 개발이나 유지보수에 좋다

font-weigth, font-style

폰트의 기울기와 두께를 조정하는 스타일 속성

text-transform

1. none : 변형 방지

2. uppercase, lowercase, capitalize

text-decoration

1. text-decoretion-color : color

2. text-decoration-line : underline, overline, line-through

3. text-decoration-style : solid, wavy, dashed

4. text-decoration-thickness : px

text-shadow

텍스트에 그림자 추가

text-shadow : x | y | blur-radius | color

text-align

텍스트의 가로정렬을 설정한다

left, right, center

justify : 양쪽 정렬

justify-all : 마지막 줄까지 적용한 양쪽 정렬

근데 span 태그의 경우 inline 형식이라 너비의 개념이 존재하지 않는다.

그래서 중앙이라는 개념이 없어서 text-align을 사용할 수 없다.

vertical-align

텍스트의 세로 정렬을 설정한다

inline, inline-block, table cell 에만 적용됨

블록 레벨 요소를 수직 정렬하는 데는 사용할 수 없다.

top, middle, baseline, bottom

line-height

글자의 높이를 지정한다

요즘에는 글자를 수직 중앙 정렬할 때 사용하긴 한다

block 형식의 태그는 line-height를 이용해서 수직 정렬을 할 수 있다.

word-break

텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 여부를 지정한다.

1. normal : 기본 줄 바꿈 규칙을 사용

2. break-all : 글 넘침을 방지하기 위해서 한 단어 내에서도 줄 바꿈이 발생할 수 있다 (한중일 제외)

3. keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 않는다

text-overflow

텍스트가 넘칠때 어떻게 표시할지 설정

ellipsis : 말줄임

.한줄 {
	white-space:nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
 }
 
 .여러줄 {
 	overflow : hidden;
    display : -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 3;
 }

list-style

initial value

- list-style-image : none

- list-style-type : disc

- list-style-position : outside

inherited : O