CSS 타이포그래피(Typography)
폰트 설정: font-family, font-size, font-weight (Font Settings: font-family, font-size, font-weight)
역사적 배경 (Historical Background)
CSS는 1996년 첫 버전에서 기본적인 폰트 설정 기능을 도입하였습니다. 폰트 설정은 웹 페이지의 텍스트 표현을 세밀하게 조정하는 데 핵심적인 역할을 하며, CSS2에서는 font-family, font-size, font-weight와 같은 속성이 추가되었습니다. 이 속성들은 다양한 폰트 스타일을 적용하고 사용자에게 최적의 읽기 경험을 제공합니다.
개념 및 원리 (Concept and Principles)
font-family: 텍스트의 폰트를 설정합니다. 기본적으로 여러 폰트를 쉼표로 구분하여 나열할 수 있으며, 첫 번째 폰트가 사용 불가능할 경우 다음 폰트가 대체로 사용됩니다.
body {
font-family: 'Arial', sans-serif;
}
이 코드는 Arial 폰트를 사용하고, Arial이 사용 불가능할 경우 sans-serif 계열의 폰트를 대체로 사용합니다.
font-size: 텍스트의 크기를 설정합니다. 픽셀(px), 포인트(pt), 엠(em), 백분율(%) 등 다양한 단위를 사용할 수 있습니다.
h1 {
font-size: 2em;
}
이 코드는 <h1> 요소의 글꼴 크기를 부모 요소의 글꼴 크기의 2배로 설정합니다.
font-weight: 텍스트의 굵기를 설정합니다. 일반적으로normal,bold,bolder,lighter와 숫자 값(100, 200, …, 900)으로 설정할 수 있습니다.
p {
font-weight: bold;
}
이 코드는 <p> 요소의 텍스트를 굵게 표시합니다.
텍스트 정렬: text-align, text-indent (Text Alignment: text-align, text-indent)
역사적 배경 (Historical Background)
텍스트 정렬 관련 속성은 CSS1에서 도입되었으며, 텍스트를 화면이나 컨테이너 내에서 적절히 배치하는 데 사용됩니다. text-align은 텍스트의 수평 정렬을, text-indent는 첫 줄의 들여쓰기를 조정합니다.
개념 및 원리 (Concept and Principles)
text-align: 텍스트의 수평 정렬을 설정합니다.left,right,center,justify등의 값을 사용할 수 있습니다.
h2 {
text-align: center;
}
이 코드는 <h2> 요소의 텍스트를 수평으로 중앙 정렬합니다.
text-indent: 텍스트의 첫 줄을 들여쓰는 양을 설정합니다. 일반적으로 픽셀(px)이나 엠(em) 단위로 설정합니다.
p {
text-indent: 30px;
}
이 코드는 <p> 요소의 첫 줄을 30픽셀만큼 들여쓰게 합니다.
텍스트 장식: text-decoration, text-transform (Text Decoration: text-decoration, text-transform)
역사적 배경 (Historical Background)
text-decoration과 text-transform 속성은 CSS1에서 도입되었습니다. 이 속성들은 텍스트에 시각적 장식을 추가하거나, 텍스트의 변형을 제어하는 데 사용됩니다.
개념 및 원리 (Concept and Principles)
text-decoration: 텍스트에 장식을 추가합니다.none,underline,overline,line-through등의 값을 사용할 수 있습니다.
a {
text-decoration: underline;
}
이 코드는 링크(<a>) 텍스트에 밑줄을 추가합니다.
text-transform: 텍스트의 대소문자를 변환합니다.uppercase,lowercase,capitalize,none등의 값을 사용할 수 있습니다.
h3 {
text-transform: uppercase;
}
이 코드는 <h3> 요소의 텍스트를 모두 대문자로 변환합니다.
줄 간격과 글자 간격: line-height, letter-spacing (Line Height and Letter Spacing: line-height, letter-spacing)
역사적 배경 (Historical Background)
line-height와 letter-spacing은 CSS1에서 도입되었으며, 텍스트의 가독성을 높이는 데 중요한 역할을 합니다. line-height는 줄 간격을, letter-spacing은 글자 간격을 조정합니다.
개념 및 원리 (Concept and Principles)
line-height: 텍스트 줄 간격을 설정합니다. 픽셀(px), 엠(em), 비율(숫자) 등 다양한 단위로 설정할 수 있습니다.
p {
line-height: 1.5;
}
이 코드는 <p> 요소의 줄 간격을 1.5배로 설정합니다.
letter-spacing: 텍스트의 글자 간격을 설정합니다. 픽셀(px), 엠(em) 단위로 설정할 수 있습니다.
h1 {
letter-spacing: 2px;
}
이 코드는 <h1> 요소의 글자 간격을 2픽셀로 설정합니다.
웹 폰트 사용: @font-face, Google Fonts (Using Web Fonts: @font-face, Google Fonts)
역사적 배경 (Historical Background)
웹 폰트는 CSS2에서 @font-face 규칙으로 도입되었으며, 웹 페이지에서 다양한 폰트를 사용할 수 있도록 해줍니다. Google Fonts는 2010년에 시작되어, 다양한 무료 웹 폰트를 제공하여 웹 디자인에 큰 영향을 미쳤습니다.
개념 및 원리 (Concept and Principles)
@font-face: 웹 폰트를 정의하여 사용합니다. 웹 폰트 파일을 서버에 호스팅하고, CSS를 통해 해당 폰트를 웹 페이지에 적용할 수 있습니다.
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2'),
url('mywebfont.woff') format('woff');
}
body {
font-family: 'MyWebFont', sans-serif;
}
이 코드는 MyWebFont라는 웹 폰트를 정의하고, body 요소에 적용합니다.
- Google Fonts: Google에서 제공하는 무료 웹 폰트를 사용하여 웹 페이지에 적용합니다. Google Fonts 웹사이트에서 원하는 폰트를 선택하고, 제공된 링크를 HTML
<head>에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Fonts Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>구글 폰트 예제</h1>
<p>이 텍스트는 Roboto 폰트로 표시됩니다.</p>
</body>
</html>
이 코드는 Google Fonts에서 Roboto 폰트를 로드하고, body 요소에 적용합니다.
종합 예제 (Comprehensive Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 타이포그래피 예제</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
<style>
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}
h1 {
font-size: 2em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
p {
font-size: 1em;
font-weight: normal;
text-indent: 20px;
text-decoration: none;
margin: 20px 0;
}
.highlight {
background-color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CSS 타이포그래피 예제</h1>
<p>이 문장은 기본적인 타이포그래피 스타일을 포함하고 있습니다. <span class="highlight">강조된 부분</span>도 포함되어 있습니다.</p>
</body>
</html>
이 예제는 다양한 타이포그래피 속성을 활용하여 웹 페이지의 텍스트 스타일을 설정하는 방법을 보여줍니다. 각 속성은 텍스트의 가독성을 높이고, 디자인의 일관성을 유지하는 데 도움을 줍니다.