이 랩에서는 학생들이 CSS 폰트 속성을 사용하여 텍스트 스타일을 지정하는 방법을 배우고, 웹 디자인의 기본적인 타이포그래피 기술을 탐구합니다. 이 포괄적인 튜토리얼은 학습자가 HTML 문서를 만들고 폰트 패밀리 (font family), 크기 (size), 줄 높이 (line height), 스타일 (style), 굵기 (weight) 를 포함한 다양한 폰트 스타일링 방법을 적용하는 과정을 안내합니다.
참가자들은 기본적인 HTML 구조를 설정하는 것으로 시작하여 텍스트 모양을 제어하는 CSS 속성을 구현함으로써 점진적으로 타이포그래피 기술을 향상시킬 것입니다. 실습을 통해 학생들은 다양한 폰트 기술을 사용하여 시각적으로 매력적이고 가독성이 뛰어난 웹 콘텐츠를 만드는 방법을 배우고, 웹 타이포그래피 디자인에 대한 실질적인 경험을 얻게 됩니다.
이 단계에서는 HTML 파일을 생성하고 CSS 를 사용하여 텍스트 스타일을 지정하기 위한 기본 구조를 설정하는 방법을 배웁니다. WebIDE 를 사용하여 타이포그래피 스타일링 연습의 기반이 될 새로운 HTML 문서를 만들 것입니다.
먼저 WebIDE 에서 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 typography.html이라는 새 파일을 만듭니다.
다음은 생성할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Typography Styling</title>
<style>
/* We'll add our CSS styles here in later steps */
</style>
</head>
<body>
<h1>Welcome to CSS Typography</h1>
<p>This paragraph will demonstrate various text styling techniques.</p>
</body>
</html>이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것을 HTML5 문서로 선언합니다.<html lang="en">은 문서의 언어를 설정합니다.<head>는 문서에 대한 메타데이터를 포함합니다.<meta charset="UTF-8">는 올바른 문자 인코딩을 보장합니다.<meta name="viewport">는 반응형 디자인에 도움이 됩니다.<title>은 페이지 제목을 설정합니다.<style> 태그는 CSS 를 추가할 위치입니다 (이것은 나중에 확장할 것입니다).<body>는 페이지의 보이는 내용을 포함합니다.이 파일을 브라우저에서 열 때의 예시 출력:
[제목 "Welcome to CSS Typography"와 그 아래 단락이 있는 간단한 페이지]이 단계에서는 CSS 를 사용하여 제목에 다양한 폰트 패밀리 (font family) 를 적용하는 방법을 배웁니다. 폰트 패밀리는 텍스트의 서체를 결정하는 중요한 속성이며, 시각적으로 매력적이고 가독성이 뛰어난 타이포그래피를 만들 수 있도록 합니다.
WebIDE 에서 typography.html 파일을 열고 <style> 섹션을 수정하여 폰트 패밀리 속성을 추가합니다.
<style>
h1 {
font-family: Arial, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
p {
font-family: Verdana, sans-serif;
}
</style>폰트 패밀리의 주요 개념을 살펴보겠습니다.
웹 안전 폰트 (Web Safe Fonts): 이는 다양한 장치와 브라우저에서 일반적으로 사용 가능한 폰트입니다.
대체 폰트 (Fallback Fonts): 항상 일반적인 폰트 패밀리를 백업으로 제공합니다.
sans-serifserifmonospace여러 폰트 옵션: 선호도 순서대로 폰트를 나열합니다.
다양한 제목을 표시하도록 HTML 을 확장합니다.
<body>
<h1>Main Heading (Arial)</h1>
<h2>Subheading (Times New Roman)</h2>
<p>Paragraph text in Verdana</p>
</body>브라우저에서의 예시 출력:
[다음을 보여주는 페이지:
- Arial 의 메인 제목
- Times New Roman 의 부제목
- Verdana 의 단락]이 단계에서는 CSS 를 사용하여 폰트 크기 (font size) 와 줄 간격 (line height) 을 설정하여 텍스트의 가독성과 모양을 제어하는 방법을 배웁니다. 이러한 속성은 시각적으로 매력적이고 읽기 쉬운 타이포그래피를 만드는 데 매우 중요합니다.
typography.html 파일을 열고 다음 CSS 로 <style> 섹션을 업데이트합니다.
<style>
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
line-height: 1.5;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 24px;
line-height: 1.4;
}
p {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
}
</style>주요 개념을 살펴보겠습니다.
폰트 크기:
줄 간격:
다양한 텍스트 크기를 표시하도록 HTML 을 확장합니다.
<body>
<h1>Main Heading (36px)</h1>
<h2>Subheading (24px)</h2>
<p>Paragraph text with increased line height for better readability.</p>
</body>브라우저에서의 예시 출력:
[다음을 보여주는 페이지:
- 큰 메인 제목
- 더 작은 부제목
- 편안한 줄 간격의 단락]이 단계에서는 CSS 를 사용하여 폰트 스타일 (font style) 과 굵기 (font weight) 를 사용하여 텍스트에 강조 효과와 다양성을 추가하는 방법을 배웁니다. 이러한 속성은 시각적 계층 구조를 만들고 타이포그래피의 전반적인 디자인을 개선하는 데 도움이 됩니다.
typography.html 파일을 열고 다음 CSS 로 <style> 섹션을 업데이트합니다.
<style>
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
font-style: italic;
font-weight: bold;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 24px;
font-style: normal;
font-weight: 600;
}
p {
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
}
.highlight {
font-style: italic;
font-weight: bold;
}
</style>주요 개념을 살펴보겠습니다.
폰트 스타일:
normal: 표준 텍스트 모양italic: 기울임꼴 텍스트oblique: 이탤릭체와 유사하지만 덜 일반적임폰트 굵기:
normal: 일반 텍스트 (400)bold: 더 두껍고 눈에 띄는 텍스트 (700)이러한 속성을 보여주도록 HTML 을 수정합니다.
<body>
<h1>Main Heading (Italic and Bold)</h1>
<h2>Subheading (Semi-Bold)</h2>
<p>
Regular paragraph text.
<span class="highlight">This text is highlighted</span>.
</p>
</body>브라우저에서의 예시 출력:
[다음을 보여주는 페이지:
- 이탤릭체 및 굵게 표시된 메인 제목
- 세미 볼드체 부제목
- 강조된 span 이 있는 단락]이 단계에서는 CSS font 단축 속성을 사용하여 여러 폰트 관련 속성을 단일하고 간결한 선언으로 결합하는 방법을 배웁니다. 이 접근 방식은 CSS 를 더 읽기 쉽고 효율적으로 만듭니다.
typography.html 파일을 열고 다음 CSS 로 <style> 섹션을 업데이트합니다.
<style>
h1 {
font:
bold italic 36px Arial,
sans-serif;
}
h2 {
font:
600 24px "Times New Roman",
serif;
}
p {
font:
normal 16px/1.6 Verdana,
sans-serif;
}
.highlight {
font:
bold italic 16px Verdana,
sans-serif;
}
</style>단축 속성 font 구문을 자세히 살펴보겠습니다.
기본 구문: font: [font-style] [font-weight] [font-size] [line-height] [font-family]
일반적인 단축 패턴:
font: style weight size familyfont: size/line-height familyfont: weight size family단축 속성을 보여주도록 HTML 을 수정합니다.
<body>
<h1>Main Heading (Shorthand)</h1>
<h2>Subheading (Compact Syntax)</h2>
<p>
Paragraph with line height. <span class="highlight">Highlighted text</span>.
</p>
</body>브라우저에서의 예시 출력:
[다음을 보여주는 페이지:
- 굵고 기울임꼴 스타일의 메인 제목
- 간결한 폰트 선언의 부제목
- 통합된 줄 간격의 단락]이 랩에서는 참가자들이 단계별 접근 방식을 통해 CSS 폰트 속성을 사용하여 텍스트 스타일링의 기본 사항을 배웁니다. 초기 단계는 기본 구조의 HTML 파일을 생성하고, 필수 메타데이터를 설정하고, 타이포그래피 실험을 위한 캔버스를 준비하는 것입니다. 학습자는 DOCTYPE 선언, 언어 설정 및 뷰포트 구성과 같은 주요 HTML 요소와 속성을 소개받습니다.
이 랩은 폰트 조작에 중점을 둔 실용적인 CSS 스타일링 기술로 진행됩니다. 참가자들은 폰트 패밀리를 제목에 적용하고, 폰트 크기와 줄 간격을 조정하고, 폰트 스타일과 굵기를 수정하는 방법을 탐구합니다. WebIDE 에서 직접 작업하고 HTML 및 CSS 코드를 점진적으로 구축함으로써 학생들은 텍스트 모양을 변환하고 다양한 폰트 속성이 효과적인 웹 타이포그래피에 어떻게 기여하는지 이해하는 실질적인 경험을 얻습니다.
