글꼴, 문자
- 글꼴 굵기, 종류 및 스타일, 글꼴 약식(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>
애국가
동해물과 백두산이 마르고 닳도록...
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
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