CSS font 속성 - 16
=====================================================
학습 목표
CSS의 font 관련 속성(font-family,font-size,font-weight,font-stlye,line-height 등)을 이해하고 활용할 수 있다.
텍스트 스트일을 자유롭게 조정하여 웹 페이지의 가독성과 디자인을 개선할 수 있다.
======================================================
1.1 Font 속성이란?
CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중
하나로, 적절한 스타일랑은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴 보겠습니다.
font-family: 글꼴(폰트)을 지정합니다.
-예: "Arial" ,sans- serif (Arial이 없으면 sans-serif로 대체)
웹 안전 폰트(web Safe Font)와 구글 폰트(Google Fonts)를 사용할 수 있습니다.
font-size : 텍스트의 크기를 지정합니다.
- 단위 : px, em,rem, %등
예: 16px, 1.5em
font-weight : 텍스트의 두께(굵기)를 지정합니다.
값 : nomal, bold, 100~900( 100은 얇음, 900은 매우 굵음)
예 : font-weight: 700(bold와 동일)
font-style : 텍스트의 스타일을 지정합니다.
값 : nomal, italic,oblique
예 : font-stlye: italic
line-height: 줄 간격 (행간) 을 지정합니다.
단위 : 숫자(배수),px,em 등
예 : line-height: 1.5( 폰트 크기의 1.5배)
font ( 단축 속성): 여러 속성을 한 줄로 정의합니다.
순서 : font-style font - weight font-size/line-height font - family
예 : font : italic 700 16 px/ 1.5 "Arial",sans-serif
.blog-subtitle{
font-family: 'open Sans' , sans - serif // a , b 에서 a 가 없으면 b 로 대체 됨
font-size : 20px;
font-weight; 400;
font-style: italic;
text-align: center;
color: #666
}
웹폰트 사용법
사용자가 pc에 설치된 폰트가 없고, 사용자가 서버에 폰트 파일을 올려놓지 않은 경우에는 폰트를 사용할 수 없습니다.
구글 폰트(Google Fonts)
구글 폰트 링크: https://fonts.google.com/
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
사용 방법 : 사이트에서 사용하고 싶은 폰트(Black Han Sans)를 선택, Regular 400 + 링크를 복사 후, link 태그로 HTML 파일에
붙여 넣기
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">font-family: 'Black Han Sans', sans-serif;
| 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구글 폰트 적용 예제</title>
<!-- 구글 폰트 링크 -->
<link rel="preconnect" href="https://fonts.googleapis.com"> // "preconnect"경로를 찾아가는데 도움을 준다 하지만 없어도 무방
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
<style>
.gaegu {
font-family: 'Gaegu', sans-serif;
font-weight: 400;
font-size: 24px;
}
.roboto {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-style: italic;
font-size: 28px;
}
.sunflower {
font-family: 'Sunflower', sans-serif;
font-weight: 500;
font-size: 20px;
}
</style>
</head>
<body>
<h1>나는 기본 폰트야</h1>
<!-- 모든 브라우저는 자체적으로 기본 폰트 스택을 가지고 있습니다 -->
<h1 class="gaegu">안녕! 나는 Gaegu 폰트야</h1>
<h2 class="roboto">안녕! 나는 Roboto 폰트야</h2>
<p class="sunflower">안녕! 나는 Sunflower 폰트야</p>
</body>
</html>
==================================================================================
2.1 line- height(줄 간격)
설명 : line-height는 텍스트 줄 간의 간격(행간)을 설정합니다. 가독성을 높이는 데 중요한 속성입니다.
값:
nomal: 브라우저 기본값(보통 1.2배)
length: px, %, em, rem 등 단위로 지정(예: 32px,1.5em)
number: 폰트 크기의 배수(예: 1.5는 폰트 크기의 1.5배)
p {line-height: 1.5;} /* 폰트 크기의 1.5배로 줄 간격 설정 */
2.2 . text-decoration(텍스트 장식)
설명 : 텍스트에 밑줄 ,취소선, 윗줄 등의 장식을 추가합니다.
값
none:장식없음
underline:밑줄
line-though:취소선
overline:윗줄.
a {text-decoration: underline;} /*링크에 밑줄 추가*/
2.3 white-space (공백 및 줄 바꿈 처리)
설명
white-space 속성은 텍스트의 공백(스페이스)과 줄 바꿈을 처리할지를 설정하는 css 속성입니다.
이 속성은 텍스트가 컨테이너 내에서 어떻게 표시되는지를 제어하며, 특히 공백과 줄 바꿈의 동작을 조정합니다.
값
normal: 공배과 줄 바꿈을 기본적으로 처리(여러 공백은 하나로, 줄 바꿈은 자동)
nowrap: 줄 바꿈 없이 한 줄로 표시
pre: 공백과 줄 바꿈 없이 그대로 유지.
pre-wrap: 공백과 줄 바꿈을 유지하되, 컨테이너 크기에 따라 줄 바꿈 가능.
pre-line : 줄 바꿈은 유지하되, 여러 공백은 하나로 처리.
div { white-space: nowrap; } /* 줄 바꿈 없이 한 줄로 표시 */
2.4 text- align (텍스트 정력)
설명 : 텍스트의 수평 정렬을 설정합니다.
값 :
left: 왼쪽 정렬.
right : 오른쯕 정렬.
center: 가운데 정렬
justify: 양쪽 정렬.
h1 { text-align: center; } /* 제목을 가운데 정렬 */
2.5 text-overflow(텍스트 오버플로우 처리)
- 설명: 텍스트가 컨테이너를 넘칠 때 어떻게 처리할지 설정합니다.
필요 조건:
1. width 속성으로 컨테이너 크기 지정.
2. white-space: nowrap; 으로 줄 바꿈 방지.
3.overflow 속성이 visible이 아닌 값(예 : hidden).
값:
clip: 텍스트를 잘라냄.
ellipsis : 넘치는 텍스트를 "..."으로 표시.
p { text-overflow: ellipsis; } /* 넘치는 텍스트를 "..."으로 표시 */
| 실습 예제 1
뼈대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>뉴스 기사 스타일링</title>
</head>
<body>
<h1 class="article-title">오늘의 헤드라인 뉴스</h1>
<h2 class="article-subtitle">세계 곳곳에서 일어난 흥미로운 소식</h2>
<p class="article-content">
오늘 아침, 새로운 기술 혁신이 발표되었습니다. 이 기술은 환경 보호에 큰 기여를 할 것으로 기대됩니다.
자세한 내용은 <a href="#" class="article-link">여기</a>를 클릭하여 확인하세요.
전문가들은 이번 발표가 앞으로의 산업 발전에 큰 영향을 미칠 것이라고 전망하고 있습니다.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>뉴스 기사 스타일링</title>
<style>
body {
padding: 40px;
font-family: Arial, sans-serif;
}
.article-title {
font-size: 32px;
line-height: 1.4; /* 줄 간격 설정 */
text-align: center; /* 가운데 정렬 */
margin-bottom: 20px;
}
.article-subtitle {
font-size: 20px;
line-height: 1.5;
text-align: center;
color: #666;
margin-bottom: 30px;
}
.article-content {
font-size: 16px;
line-height: 1.8; /* 가독성을 위한 넉넉한 줄 간격 */
max-width: 700px;
margin: 0 auto;
}
.article-link {
text-decoration: none; /* 기본 밑줄 제거 */
color: #007bff;
}
.article-link:hover {
text-decoration: underline; /* 마우스 오버 시 밑줄 추가 */
}
</style>
</head>
<body>
<h1 class="article-title">오늘의 헤드라인 뉴스</h1>
<h2 class="article-subtitle">세계 곳곳에서 일어난 흥미로운 소식</h2>
<p class="article-content">
오늘 아침, 새로운 기술 혁신이 발표되었습니다. 이 기술은 환경 보호에 큰 기여를 할 것으로 기대됩니다.
자세한 내용은 <a href="#" class="article-link">여기</a>를 클릭하여 확인하세요.
전문가들은 이번 발표가 앞으로의 산업 발전에 큰 영향을 미칠 것이라고 전망하고 있습니다.
</p>
</body>
</html>
| 실습 예제 2
뼈대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>채팅 메시지 스타일링</title>
</head>
<body>
<h2>채팅 메시지 스타일링</h2>
<div class="chat-message message-normal">
안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈이 됩니다.
</div>
<div class="chat-message message-nowrap">
안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈 없이 "..."로 표시됩니다.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>채팅 메시지 스타일링</title>
<style>
body {
padding: 40px;
font-family: Arial, sans-serif;
}
.chat-message {
width: 300px; /* 고정된 너비 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
.message-normal {
/* 기본값 */
white-space: normal; /* 기본 줄 바꿈 */
}
.message-nowrap {
/* ... 처리 */
white-space: nowrap; /* 줄 바꿈 방지 */
overflow: hidden; /* 넘치는 부분 숨김 */
text-overflow: ellipsis; /* "..." 표시 */
text-align: right;
}
</style>
</head>
<body>
<h2>채팅 메시지 스타일링</h2>
<div class="chat-message message-normal">
안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈이 됩니다.
</div>
<div class="chat-message message-nowrap">
안녕! 오늘 기분이 어때? 아주 긴 메시지를 보내볼게요. 이 메시지는 줄 바꿈 없이 "..."로 표시됩니다.
</div>
</body>
</html>
| 실습 코드3
뼈대 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Text-Overflow 실습</title>
</head>
<body>
<h2>Text-Overflow 실습: 채팅 메시지</h2>
<h3>1. text-overflow: clip (텍스트 잘라냄)</h3>
<div class="chat-message message-clip">
안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
</div>
<h3>2. text-overflow: ellipsis (넘치는 부분 "..." 표시)</h3>
<div class="chat-message message-ellipsis">
안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Text-Overflow 실습</title>
<style>
body {
padding: 40px;
font-family: Arial, sans-serif;
}
/* 채팅 메시지 박스 스타일 */
.chat-message {
width: 250px; /* 1. 컨테이너 크기 지정 */
white-space: nowrap; /* 2. 줄 바꿈 방지 */
overflow: hidden; /* 3. 넘치는 부분 숨김 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
background-color: #f0f0f0;
border-radius: 5px;
}
/* text-overflow: clip 적용 */
.message-clip {
text-overflow: clip; /* 텍스트를 잘라냄 */
}
/* text-overflow: ellipsis 적용 */
.message-ellipsis {
text-overflow: ellipsis; /* 넘치는 텍스트를 "..."으로 표시 */
}
/* 제목 스타일 */
h2, h3 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Text-Overflow 실습: 채팅 메시지</h2>
<h3>1. text-overflow: clip (텍스트 잘라냄)</h3>
<div class="chat-message message-clip">
안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
</div>
<h3>2. text-overflow: ellipsis (넘치는 부분 "..." 표시)</h3>
<div class="chat-message message-ellipsis">
안녕! 이 메시지는 아주 길어서 컨테이너를 넘치게 됩니다. 어떻게 표시될까요?
</div>
</body>
</html>