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 | colortext-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
'front-end > HTML,CSS' 카테고리의 다른 글
| [CSS] Box Model (0) | 2023.03.16 |
|---|---|
| [HTML] 블록 레벨 요소, 인라인 요소 (0) | 2023.03.15 |
| [CSS] 변환 (transform) (0) | 2023.03.13 |
| [CSS] 동적 가상 선택자 / 속성 선택자 (0) | 2023.03.13 |
| [HTML|CSS] HTML/CSS 를 작성할 때 (0) | 2023.03.12 |