카테고리 없음

CSS AWS 클라우드 기반 Devops 개발자 과정 글꼴 관련 스타일

minkhinformation 2025. 3. 6. 16:49

글꼴 관련 스타일

글꼴 관련으로는 크기,  굵기, 종류 및 스타일, 텍스트 정렬 및 기타 효과, 문자 간격 설정 등을 할 수 있다.

 

웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다.

font-family속성은 body태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고, 문서 안의 모든 자식요소에 계속 같은 꼴은 사용한다.

궁서체

<style>
#ff1{font-family: 궁서체}
</style>
<body>
<h4 id="ff1">궁서체</h4>
</body>

 

키워드를 사용해서 글자 크기 지정하기

글자 크기로 사용하도록 미리 약속해 놓은 키워드 중 하나를 사용할 수 있다. 크기 순서는 다음과 같다.

xx-small < x-small < small < medium < large < x-large < xx-large

작게 <<----------------------------------------------------------------------<<크게

또한 단위를 사용하여 글자 크기를 지정할 수도 있다.

종류 설명
em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정한다.
rem 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정한다.
ex 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정한다.
px 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정한다.
pt 포인트라고 하며, 일반 문서에서 많이 사용한다.

xx-small

x-small

small

medium

large

x-large

xx-large

<style>
#f1{
font-size:xx-small;
}
#f2{
font-size:x-small;
}
#f3{
font-size:small;
}
#f4{
font-size:medium;
}
#f5{
font-size:large;
}
#f6{
font-size:x-large;
}
#f7{
font-size:xx-large;
}
</style>
<body>
<p id="f1">xx-small</p>
<p id="f2">x-small</p>
<p id="f3">small</p>
<p id="f4">medium</p>
<p id="f5">large</p>
<p id="f6">x-large</p>
<p id="f7">xx-large</p>

</body>

 

글자 굵기를 지정하는 font-weight 속성

글자 굵기를 지정하는 속성은 font-weight으로 웹 문서를 작성할 때  자주 사용한다.

미리 만들어진 예약어(normal, bold, bolder, lighter)나 숫자값을 사용해 굵기를 지정할 수 있다.

font-weight: normal : bold : bolder : lighter : 100 : 200 :....: 800 : 900

종류 설명
normal 기본값, 보통 굵기
bold 굵게
bolder 원래보다 더 굵게
lighter 원래보다 더 가늘게
숫자값 100~900 사이의 굵기를 표현하며 100은 가장 가늘게, 900은 가장 굵게

 

텍스트 관련 스타일

글자색을 지정하는 color 속성

기본형 color : <색상>

color 속성

color 속성

color 속성

<style>
#fc1{
color: #0000ff;
}
#fc2{
color: red;
}
#fc3{
color:rgb(red, green, blue);
}
</style>
<body>
<p id="fc1">color 속성</p>
<p id="fc2">color 속성</p>
<p id="fc3">color 속성</p>
</body>

 

텍스트를 정렬하는 text-align 속성

text-align 속성을 사용하면 워드나 한글 문서에서 흔히 사용하는 왼쪽 정렬, 오른쪽 정렬, 양쪽 정렬, 가운데 정렬 등을 웹 문서에서도 지정할 수 있다.

text-align : start : end : left : right : center : justify : match-parent

종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다.
end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.
left 왼쪽에 맞추어 문단을 정렬한다.
right 오른쪽에 맞추어 문단을 정렬한다.
center 가운데에 맞추어 문단을 정렬한다.
justify 양쪽에 맞추어 문단을 정렬한다.
match-parent 부모 요소를 따라 문단을 정렬한다.

 

줄 간격을 조절하는 line-height 속성

한 문단이 두 줄을 넘으면 줄 간격이 생기게 된다. 줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다.

이때 줄 간격은 정확한 단위로 크기값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수 있다.

line-height: 24px;

line-height: 2.0;

line-height: 200%;

텍스트의 줄을 표시하거나 없애주는 text-decoration 속성

text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시한다. 그리고 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration 속성을 사용하면 없앨 수 있다.

none 텍스트에 줄 표시하지 않음

underline 밑줄 표시

overline 윗줄 표시

 

<p style="text-decoration:none">none 텍스트에 줄 표시하지 않음</p>
<p style="text-decoration:underline">underline 밑줄 표시</p>
<p style="text-decoration:overline">overline 윗줄 표시</p>

 

글자 간격을 조절하는 letter-spacing, word-spacing 속성

letter-spacing 속성은 글자와 글자 사이의 간격을 조절한다.

word-spacing 속성은 단어와 단어 사이의 간격을 조절한다.