티스토리 뷰

CSS

글꼴, 문자

dev23 2022. 2. 2. 20:17

- 글꼴 굵기, 종류 및 스타일, 글꼴 약식(shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 등을 설정할 수 있다.

- 텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지로 분류된다.

글꼴 스타일	- 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성.
텍스트 레이아웃 스타일	- 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있다.

글꼴

예제 코드

<h1>애국가</h1>

<p>동해물과 백두산이 마르고 닳도록...</p>

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리
 화려강산 대한사람 대한으로 길이 보전하세.</p>

1. 색상

- color 속성을 이용해 요소의 색상을 설정한다.

- 일반적으로 텍스트이지만, text-decoration 속성을 사용하여 텍스트에 배치되는 밑줄이나 오버라인과 같은

몇 가지 다른 것도 포함할 수 있다.

- color 는 모든 CSS 색상 단위를 사용할 수 있으며, 예를 들면 다음과 같다.

<head>
    <title>Styling</title>
    <style>
    p {
            color: red;
        }
    </style>
</head>
<body>
<h1>애국가</h1>

<p>동해물과 백두산이 마르고 닳도록...</p>

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리
 화려강산 대한사람 대한으로 길이 보전하세.</p>
</body>

Styling

애국가

동해물과 백두산이 마르고 닳도록...

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.

2. 글꼴 종류

- 텍스트에 다른 글꼴을 설정하려면 ,font-family 속성을 사용하여 브라우저에서 선택한 요소에 적용할 글꼴을

지정할 수 있다.

<style>
        p {
            font-family: arial;
        }
</style>

3. 글꼴 크기

- 글꼴 크기를 지정하려면 font-size 속성을 이용하면 된다.

- font-size 는 다음 단위를 이용하여 설정할 수 있다.

px(pixels)	- 픽셀은 절대적인 단위로 어떤 상황에서도 같은 크기로 글꼴을 나타낸다.
em	- 1em 은 부모 요소에 설정된 폰트 크기와 같다.
rem	- 1rem 은 부모 요소가 아닌, 문서의 최상위요소에 설정된 폭트 크기와 같다는 점을 제외하면, em과 똑같이 적용된다.

- 요소의 font-size 속성은 부모 요소로부터 상속을 받는다.

- 사이징 예

<head>
    <title>Styling</title>
    <style>
        html{
            font-size: 10px;
        }

        h1 {
            font-size: 2.6rem;
        }


        p {
            font-size: 1.4rem;
            color: red;
        }
    </style>
</head>
<body>
<h1>애국가</h1>

<p>동해물과 백두산이 마르고 닳도록...</p>

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리
 화려강산 대한사람 대한으로 길이 보전하세.</p>
</body>

4. 폰트 스타일, 굵기, 변환, 장식 등

- 속성에 대한 값

font-style	- 이탤릭체를 적용할 수 있다. - 사용 가능한 값 -> normal : 일반적인 글꼴을 적용한다(적용된 이탤릭체를 해제) -> italic : 이탤릭체를 적용할 수 있으면 적용하며, 만약 가능하지 않다면 이탤릭체처럼 보이도록 비스듬한(oblique) 글씨체를 적용한다. -> oblique : 이탤릭체를 묘사하도록 설정한다.
font-weight	- 폰트의 굵기를 설정한다. - 이 속성은 다양한 값을 가진다. 하지만 사용자는 normal 과 bold 를 제외하고는 거의 사용하지 않는다. ㅋ. - 사용 가능한 값 -> normal, bold : normal 과 bold 폰트 굵기 -> lighter, bolder : 현재 요소의 폰트를 부모 요소보다 한 단계 얇게 혹은 굵게 설정한다. -> 100 - 900 : 필요에 따라 숫자를 이용해 굵기를 지정할 수 있다.
text-transform	- 폰트가 변형될 수 있도록 설정한다. - 사용 가능한 값 -> none : 모든 변형을 방지 -> uppercase : 모든 문자를 대문자로 변환. -> lowercase : 모든 문자를 소문자로 변환 -> capitalize : 모든 단어에서 첫 번째 글자만 대문자로 변환 -> full-width : 고정 너비를 가진 사각형 안에 쓰여진 모든 상형문자(glyph)를 변형한다. 예를 들면, 중국어, 한국어, 일본어 등의 아시아 문자와 같은 라틴 문자들 ( 해석 잘 못 하겠음. )
text-decoration	- 폰트에 장식을 적용하거나 해제할 수 있다. - 사용 가능한 값 -> none : 기본 값으로 아무 장식도 적용하지 않는다. -> underline : 문자에 밑줄을 적용한다. -> overline : 문자 위에 줄을 적용한다. (쓸모가 있나?) -> line-through : ~~문자를 관통하는 줄을 적용한다.~~ (취소선)?

5. 폰트 그림자

- text-shadow 속성을 이용하여 문자에 그림자를 적용할 수 있다. 이 속성은 다음 예와 같이 4가지 값을 가진다.

text-shadow: 4px 4px 5px red;

-> 첫 번째 값 : 그림자의 수평 오프셋(offset. 선/층/정렬이 소정간격으로 어긋나 층/단/높낮이 차이를이루는 상태나

정도). 보통 px 단위를 사용한다.

-> 두 번째 값 : 수직 오프셋.

-> 블러 반경(blur radius) : 값이 높아질수록 그림자가 넓게 흩어진다. 만약 이 값이 포함되지 않으면, 기본 값 0으로

적용된다. 이것은 블러가 없음을 의미한다.

-> 기본 색상 : 이 값이 포함되지 않으면 기본적으로 검은색으로 적용된다.

- 예

<style>
.shadow{
    text-shadow: 4px 4px 5px blue;
}
</style>

텍스트 레이아웃

1. 텍스트 정렬

- 컨텐트 박스 안에 입력된 글자들을 정렬하기 위해 text-align 속성을 사용한다.

- 사용 가능한 값은 다음과 같으며, 단어의 의미와 똑같이 작동한다.

-> left : 문자를 왼쪽으로 정렬한다.

-> right : 문자를 오른쪽으로 정렬한다.

-> center : 문자를 가운데로 정렬한다.

-> justify : 각 문자 사이의 간격이 같도록 다양하게 문자들이 퍼지도록 정렬한다. 이 속성을 사용할 때는 주의를 가질

필요가 있다. 이 속성은 보기에 끔찍해질 수 있으며, 특히 긴 문자들이 지문 안에 있으면 더욱 그렇다.

- 예) text-align: center; 를 <h1>에 적용

<head>
    <title>Styling</title>
    <style>
        html{
            font-size: 10px;
        }

        h1 {
            text-align: center;
        }


        p {
            font-size: 1.4rem;
            color: red;
        }

        .shadow{
            text-shadow: 4px 4px 5px blue;
        }
    </style>
</head>
<body>
<h1>애국가</h1>

<p>동해물과 백두산이 마르고 닳도록...</p>

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리
 화려강산 대한사람 대한으로 길이 보전하세.</p>

 <p class="shadow">Shadow Test</p>
</body>

2. 라인 높이

- 각 글자의 높이를 설정하는 데 line-height 속성을 사용할 수 있다.

- 줄의 크기를 3배 늘리려면 다음과 같이 속성을 지정하면 된다. 이를 <p> 태그에 적용할 것이다.

<style>
p {
    line-height: 3;
}
</style>

- 차이를 확인해 보자.

3. 글자와 단어의 공간

- letter-spacing 과 word-spacing 속성은 문자들과 단어들 사이의 공간을 설정하는 데 사용할 수 있다.

- 이 속성을 자주 사용하지는 않을 것이다(모질라에 그랬음). 하지만, 특정한 보기에서 사용하거나 특히 조밀하게

나열된 글자들의 가독성을 향상시킬 때 사용하는 것을 볼 수 있다.

- 예) <p> 태그에 적용했을 때

<style>
p::first-line{
    letter-spacing: 2px;
    word-spacing: 4px;
}
</style>

-> <p> 태그 안의 첫 번째 줄에만 공간이 벌어짐을 확인할 수 있다.

-> 본문은 다음과 같다.

<p>동해물과 백두산이 마르고 닳도록...</p>

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 
무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
남산 위에 저 소나무 철갑을 두른 듯. 바람 서리 불변함은 우리 기상일세.</p>

볼 가치가 있는 다른 속성들

- 모질라 웹에서 말하길 위 속성들은 폰트 스타일링을 시작하는 방법을 알려주지만, 우리가 사용할 수 있는 다양한

속성들이 더 있다고 한다. 위 속성들을 사용하는 데 익숙해지면 다른 여러 가지 속성들도 찾아볼 것이다.

- 꽤 많다. 언젠가는 한번 정리해야겠다.

- 영어 공부도 많이 해야겠다.

출처/참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Fundamentals

기본적인 텍스트 및 글꼴 스타일링 - Web 개발 학습하기 | MDN

We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.

developer.mozilla.org

저작자표시

'CSS' 카테고리의 다른 글

CSS 배치 (0)	2022.02.03
CSS 배경 (0)	2022.02.02
CSS 박스 모델 (0)	2022.02.02
CSS 속성 (0)	2022.02.02
선택자 우선순위 (0)	2022.02.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

개발 공부