CSS 폰트 속성 정리
CSS 폰트 관련 속성에 대해서 정리해보았다.
color
color
: 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정한다.
-
color 값이 들어갈 자리에 currentcolor 값을 주면 부모로부터 색상을 상속받는다.
-
가장 대표적이며 거의 모든 웹사이트에서 빠지지 않고 등장한다.
color
: 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정한다.
color 값이 들어갈 자리에 currentcolor 값을 주면 부모로부터 색상을 상속받는다.
가장 대표적이며 거의 모든 웹사이트에서 빠지지 않고 등장한다.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/color
font-size
font-size
: 폰트의 크기를 지정한다.
-
단위 혹은 키워드로 사용된다.
-
일반적으로 px
, em
, %
등의 단위를 사용한다.
--> 별도의 지정이 없을 경우 대부분 브라우저의 기본값은 16px = 1em 이다.
-
small
, medium
, large
같은 키워드도 존재하나, 잘 사용하지 않는다.
✅ 정확한 크기를 지정해주는 것이 일반적으로 좋다.
Example
.text {
font-size: 12px;
}
font-size
: 폰트의 크기를 지정한다.
단위 혹은 키워드로 사용된다.
일반적으로 px
, em
, %
등의 단위를 사용한다.
--> 별도의 지정이 없을 경우 대부분 브라우저의 기본값은 16px = 1em 이다.
small
, medium
, large
같은 키워드도 존재하나, 잘 사용하지 않는다.
✅ 정확한 크기를 지정해주는 것이 일반적으로 좋다.
.text {
font-size: 12px;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-size
font-style
font-style
: 폰트 글씨체를 지정한다.
-
기본값은 normal
이다.
-
일반적으로 이탤릭체를 만들기 위해 많이 사용된다.
-
이탤릭체를 위해서는 italic
또는 oblique
를 사용한다.
-
<em>
혹은 <i>
태그를 사용해서도 이탤릭체를 출력할 수 있지만,
태그를 사용하는 것은 어디까지나 강세를 주기 위함이므로
단순 스타일링이 목적이라면 CSS style 을 사용하자!
Example
.text {
font-style: italic;
}
font-style
: 폰트 글씨체를 지정한다.
기본값은 normal
이다.
일반적으로 이탤릭체를 만들기 위해 많이 사용된다.
이탤릭체를 위해서는 italic
또는 oblique
를 사용한다.
<em>
혹은 <i>
태그를 사용해서도 이탤릭체를 출력할 수 있지만,
태그를 사용하는 것은 어디까지나 강세를 주기 위함이므로
단순 스타일링이 목적이라면 CSS style 을 사용하자!
.text {
font-style: italic;
}
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
font-weight
font-weight
: 폰트의 가중치(weight)나 굵기(boldness)를 명시한다.
-
기본값은 noraml
= 400 이다.
-
bold
, lighter
, bolder
와 같은 키워드,
혹은 100 단위의 숫자로 지정한다.
-
폰트마다 지원하는 굵기의 정도가 약간씩 다를 수 있다.
-
font-style
에서와 비슷한 맥락으로
<strong>
태그로 글씨를 굵게 출력하는 것과는 의미가 다르다.
Example
.text {
font-weight: bold;
}
font-weight
: 폰트의 가중치(weight)나 굵기(boldness)를 명시한다.
기본값은 noraml
= 400 이다.
bold
, lighter
, bolder
와 같은 키워드,
혹은 100 단위의 숫자로 지정한다.
폰트마다 지원하는 굵기의 정도가 약간씩 다를 수 있다.
font-style
에서와 비슷한 맥락으로
<strong>
태그로 글씨를 굵게 출력하는 것과는 의미가 다르다.
.text {
font-weight: bold;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-weight
font-family
font-family
: 요소에 우선 순위가 지정된 font family 이름과
generic family 이름을 지정할 수 있게 해준다.
-
generic family : 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.
ex) serif
, sans-serif
, monospace
, ...
-
font family 이름이 여러개 나열되어있으면 앞에서부터 차례대로
현재 PC 에서 사용 가능한 폰트를 불러온다.
--> 사용 가능한 폰트가 없을 경우 generic family 폰트를 불러온다.
Example
.text {
font-family: 'Times New Roman', Times, serif;
}
font-family
: 요소에 우선 순위가 지정된 font family 이름과
generic family 이름을 지정할 수 있게 해준다.
generic family : 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.
ex) serif
, sans-serif
, monospace
, ...
font family 이름이 여러개 나열되어있으면 앞에서부터 차례대로
현재 PC 에서 사용 가능한 폰트를 불러온다.
--> 사용 가능한 폰트가 없을 경우 generic family 폰트를 불러온다.
.text {
font-family: 'Times New Roman', Times, serif;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font-family
line-height
line-height
: 줄 상자의 높이를 설정한다.
-
일반적으로 텍스트 줄 사이의 거리를 설정하는 데 사용된다.
--> 폰트 크기의 위/아래로 여백을 준다.
-
기본값은 1.0
~ 1.2
이다.
--> 폰트가 만들어질 때 기본적으로 디자인된다.
-
폰트 크기가 동일해도 요소의 전체 높이는 다를 수 있다.
-
폰트의 종류에 따라 요소들의 높이가 뒤죽박죽 되는 현상을 막을 수 있다.
Example
p {
line-height: 2.0;
}
line-height
: 줄 상자의 높이를 설정한다.
일반적으로 텍스트 줄 사이의 거리를 설정하는 데 사용된다.
--> 폰트 크기의 위/아래로 여백을 준다.
기본값은 1.0
~ 1.2
이다.
--> 폰트가 만들어질 때 기본적으로 디자인된다.
폰트 크기가 동일해도 요소의 전체 높이는 다를 수 있다.
폰트의 종류에 따라 요소들의 높이가 뒤죽박죽 되는 현상을 막을 수 있다.
p {
line-height: 2.0;
}
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
font (단축속성)
font
: 폰트와 관련된 여러가지 속성들을 한줄로 묶어 표현한다.
-
CSS shorthand (단축속성) 종류에 속한다.
-
다음 속성의 값을 포함해야 한다. --> 필수이다.
<font-size>
<font-family>
-
다음 속성의 값을 포함할 수 있다. --> 필수는 아니다.
<font-style>
<font-variant>
<font-weight>
<line-height>
-
font : font-style font-weight font-size/line-height font-family
순서로 작성해야 한다.
-
❗️ 개별속성을 먼저 작성했다고 해서 단축속성에서 빼먹으면 안된다!
--> 개별로 선언한 스타일이 initial 로 돌아간다.
Example
.text {
font: italic bold 20px/1.7 "Times New Roman", Times, serif;
}
font
: 폰트와 관련된 여러가지 속성들을 한줄로 묶어 표현한다.
CSS shorthand (단축속성) 종류에 속한다.
다음 속성의 값을 포함해야 한다. --> 필수이다.
<font-size>
<font-family>
다음 속성의 값을 포함할 수 있다. --> 필수는 아니다.
<font-style>
<font-variant>
<font-weight>
<line-height>
font : font-style font-weight font-size/line-height font-family
순서로 작성해야 한다.
❗️ 개별속성을 먼저 작성했다고 해서 단축속성에서 빼먹으면 안된다!
--> 개별로 선언한 스타일이 initial 로 돌아간다.
.text {
font: italic bold 20px/1.7 "Times New Roman", Times, serif;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/font
letter-spacing & word-spacing
letter-spacing
: 글자들 간의 간격을 지정한다.
word-spacing
: 단어들 간의 간격을 지정한다.
-
디폴트로 글꼴에 따라 적합한 여백이 정해져있다.
--> 개발자가 임의로 지정하고싶을 때 사용한다.
-
너무 큰 값은 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로따로 보인다.
-
반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없다.
-
디폴트값에 선언해준 너비만큼 추가(+) 하는 방식으로 사용된다.
--> 음수도 가능하다.
Example
.text {
letter-spacing: 5px;
word-spacing: -1px;
}
letter-spacing
: 글자들 간의 간격을 지정한다.word-spacing
: 단어들 간의 간격을 지정한다.
디폴트로 글꼴에 따라 적합한 여백이 정해져있다.
--> 개발자가 임의로 지정하고싶을 때 사용한다.
너무 큰 값은 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로따로 보인다.
반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없다.
디폴트값에 선언해준 너비만큼 추가(+) 하는 방식으로 사용된다.
--> 음수도 가능하다.
.text {
letter-spacing: 5px;
word-spacing: -1px;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing
text-align
text-align
: 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다.
-
왼쪽, 오른쪽, 중앙 정렬 등의 속성이 있다.
--> left
, right
, center
, ...
-
Block 요소에만 적용이 가능하다.
Example
.container {
text-align: center;
}
text-align
: 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다.
왼쪽, 오른쪽, 중앙 정렬 등의 속성이 있다.
--> left
, right
, center
, ...
Block 요소에만 적용이 가능하다.
.container {
text-align: center;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/text-align
text-indent
text-indent
: 들여쓰기를 설정한다.
-
Block 요소에만 적용이 가능하다.
-
px
, %
, em
, ... 등의 단위를 사용하여 지정할 수 있다.
✅ %
단위는 브라우저 창의 크기에 따라 출력되는 모습이 유동적으로 변한다.
Example
.paragraph1 {
text-indent: 30%;
}
.container {
text-indent: 50px;
}
text-indent
: 들여쓰기를 설정한다.
Block 요소에만 적용이 가능하다.
px
, %
, em
, ... 등의 단위를 사용하여 지정할 수 있다.
✅ %
단위는 브라우저 창의 크기에 따라 출력되는 모습이 유동적으로 변한다.
.paragraph1 {
text-indent: 30%;
}
.container {
text-indent: 50px;
}
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
text-decoration (단축속성)
text-decoration
: 글씨의 장식(선) 색을 지정합니다.
font
속성과 마찬가지로 각각의 속성을 개별적으로 선언 가능하지만,
text-decoration
같은 경우는 일반적으로 단축속성이 더 많이 사용된다.
-
CSS shorthand = 단축속성 = 한줄에 속성을 모두 선언한다.
-
이 속성은 다음 CSS 속성들의 약어이다.
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
-
line 속성에는 underline
, overline
, line-through
, ... 등이 있다.
--> 중복해서 사용할 수 있다.
-
style 속성에는 solid
, double
, dotted
, ... 등이 있다.
-
선언된 속성 외에 상속된 속성이 같이 적용된다.
-
font
단축속성과는 다르게 선언 순서에 제한이 없다.
--> 대신 같은 속성끼리는 붙어있어야 한다!
Example
span {
text-decoration: line-through red 2px wavy;
}
text-decoration
: 글씨의 장식(선) 색을 지정합니다.
font
속성과 마찬가지로 각각의 속성을 개별적으로 선언 가능하지만,
text-decoration
같은 경우는 일반적으로 단축속성이 더 많이 사용된다.
CSS shorthand = 단축속성 = 한줄에 속성을 모두 선언한다.
이 속성은 다음 CSS 속성들의 약어이다.
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
line 속성에는 underline
, overline
, line-through
, ... 등이 있다.
--> 중복해서 사용할 수 있다.
style 속성에는 solid
, double
, dotted
, ... 등이 있다.
선언된 속성 외에 상속된 속성이 같이 적용된다.
font
단축속성과는 다르게 선언 순서에 제한이 없다.
--> 대신 같은 속성끼리는 붙어있어야 한다!
span {
text-decoration: line-through red 2px wavy;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/text-decoration
word-break
word-break
: 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 때 줄을 바꿀 지 결정한다.
-
기본값은 normal
이다.
-
break-all
= 오버플로(Overflow) 를 방지하기 위해 줄 바꿈이 발생할 수 있다.
(한중일 텍스트 제외)
-
keep-all
= 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다.
비 CJK 텍스트에서는 normal과 동일하다.
Example
p[lang="en"] {
word-break: break-all;
}
p[lang="ko"] {
word-break: keep-all;
}
- 영어 문단은 자동 줄바꿈이 일어나고, 한글 문단은 원래 발생했던 자동 줄바꿈이 막힌다.
word-break
: 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 때 줄을 바꿀 지 결정한다.
기본값은 normal
이다.
break-all
= 오버플로(Overflow) 를 방지하기 위해 줄 바꿈이 발생할 수 있다.
(한중일 텍스트 제외)
keep-all
= 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다.
비 CJK 텍스트에서는 normal과 동일하다.
p[lang="en"] {
word-break: break-all;
}
p[lang="ko"] {
word-break: keep-all;
}
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/CSS/word-break
text-transform
text-transform
: 한국어에는 적용되지 않는다.
문장의 대문자화, 소문자화, 단어 첫글자 대문자화와 같은 스타일을 지정한다.
-
uppercase
, lowercase
, capitalize
, ... 등의 속성이 있다.
-
실제 html 내용이 변경되는 것은 아니며, 눈에 보이는 스타일만 바뀔 뿐이다.
Example
p {
text-transform: capitalize;
}
text-transform
: 한국어에는 적용되지 않는다.
문장의 대문자화, 소문자화, 단어 첫글자 대문자화와 같은 스타일을 지정한다.
uppercase
, lowercase
, capitalize
, ... 등의 속성이 있다.
실제 html 내용이 변경되는 것은 아니며, 눈에 보이는 스타일만 바뀔 뿐이다.
p {
text-transform: capitalize;
}
🦊 MDN Link : https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
Author And Source
이 문제에 관하여(CSS 폰트 속성 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mangozoo20/CSS-폰트-속성-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)