코드노트

css font 폰트 관련 속성 정리 본문

Code note/CSS

css font 폰트 관련 속성 정리

코드노트 2022. 10. 7. 18:58

font-size

폰트의 크기를 지정합니다. 폰트 크기를 바꾸면 em 과 ex <length> 단위로 계산된 다른 항목들의 크기를 바꿉니다.

/* <absolute-size> 값 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> 값 */
font-size: larger;
font-size: smaller;

/* <length> 값 */
font-size: 12px;
font-size: 0.8em;

/* <percentage> 값 */
font-size: 80%;

/* 전역 값 */
font-size: inherit;
font-size: initial;
font-size: unset;

 

 

 

font-size - CSS: Cascading Style Sheets | MDN

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.

developer.mozilla.org

font-family

선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다.

/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;

 

 

 

 

 

font-family - CSS: Cascading Style Sheets | MDN

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

developer.mozilla.org

font-style

글꼴의 스타일을 지정할 수 있습니다.

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;

 

 

 

font-style - CSS: Cascading Style Sheets | MDN

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

developer.mozilla.org

font-weight

폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다.

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

 

 

 

font-weight - CSS: Cascading Style Sheets | MDN

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

developer.mozilla.org

line-height

라인 상자의 높이를 설정합니다. 일반적으로 텍스트 줄 사이의 거리를 설정하는 데 사용됩니다. 블록 수준 요소에서 요소 내 라인 상자의 최소 높이를 지정합니다.
/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

 

font 한줄로 작성하기

fort 한줄로 작성하기

.font {
	font-size: 20px;
    font-family: "Times New Raoman", Times, serif;
    font-weight: 100;
    font-style: italic;
}

.font {
	font: italic 100 20px/1.7 "Times New Raoman", Times, serif;
}

 

 

 

line-height - CSS: Cascading Style Sheets | MDN

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifi

developer.mozilla.org

letter-spacing

글자 사이의 간격을 조절합니다. 
/* 키워드 값 */
letter-spacing: normal;

/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* 전역 값 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;​

 

 

 

letter-spacing - CSS: Cascading Style Sheets | MDN

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apar

developer.mozilla.org

text-align

블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다.
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* 표 열의 문자 기반 정렬 */
text-align: ".";
text-align: "." center;

/* 블록 정렬 값 (비표준 구문) */
text-align: -moz-center;
text-align: -webkit-center;

/* 전역 값 */
text-align: inherit;
text-align: initial;
text-align: unset;

 

 

text-align - CSS: Cascading Style Sheets | MDN

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

developer.mozilla.org

 

text-indent

text-indent 블록의 텍스트 줄 앞에 배치되는 빈 공간(들여쓰기)의 길이를 설정합니다.

 

/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

 

 

text-indent - CSS: Cascading Style Sheets | MDN

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

developer.mozilla.org

text-decoration

텍스트의 장식 선 모양을 설정합니다

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

text-decoration-style

 지정된 선의 스타일을 설정합니다 . 스타일로 설정된 모든 라인에 적용됩니다 . 
/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Global values */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;​

한줄로 작성 가능

text-decoration: line-through red 2px wavy;

word-break

텍스트가 내용 상자를 넘칠 때마다 줄 바꿈을 표시할지 여부를 설정합니다. 띄어쓰기에 따라 줄바꿈으로 바꿀 수 있게 변경 가능
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

 

 

word-break - CSS: Cascading Style Sheets | MDN

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

developer.mozilla.org

text-transform

텍스트를 대문자로 표시하는 방법을 지정합니다.

텍스트를 모두 대문자 또는 소문자로 표시하거나 각 단어를 대문자로 표시하는 데 사용할 수 있습니다. 

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

 

 

text-transform - CSS: Cascading Style Sheets | MDN

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.

developer.mozilla.org

 

'Code note > CSS' 카테고리의 다른 글

css transform, transition 정리  (0) 2022.10.11
css 레이아웃 정리, background  (0) 2022.10.11
css 박스모델 속성 정리  (0) 2022.10.10
CSS 단위와 값 정리  (0) 2022.10.09
Css 선택자 selector 정리  (0) 2022.10.04
'Code note/CSS' Related Articles more