강의를 참고해 간단한 홍보책자를 만듭니다.
간단한 웹페이지이므로 <h1> <h2> <h3> 태그와 CSS의 폰트스타일을 통해 구현합니다.
Introduction
안내문 형식으로 작성해야하므로, 그림자와 색 조합, 글씨 크기 등의 속성을 사용해야합니다.
필요한 속성 : 그림자 스타일(text-shadow) / 폰트 크기(font-size) / 폰트 굵기(font-weight) / 폰트 색깔(color)
텍스트 정렬(text-align) / 밑줄(text-decoration : underline) / 폰트(font-style : italic)
속성 값 :
└ font-size : px 단위로 지정합니다. ex) 2px / 5px / 10px
└ font-weight : normal / 숫자(100~900) / bolder(상위요소보다 진하게) / lighter(상위요소보다 흐리게), 이번 실습에서는 bold 를 사용하였습니다. 폰트를 굵게하는 속성입니다.
└ color : purple, green 등 영어로 지정가능하고, #888888 처럼 # 태그 뒤 6자리의 문자구성으로도 표현 가능합니다.
└ text-align : left / right / center / justify(좌우에 맞춰 화면을 늘림)
└ text-decoration : none / line-through(취소선) / overline(글자 위) / underline(밑줄) / inital(기본값 설정) / inherit(상위 요소의 값을 상속받음), 특징으로 overline underline 과 같이 속성 값을 여러개 사용할 수 있다는 점입니다.
└ font-style : normal(기본값) / Italic(이탤릭체) / oblique(기울어짐)
text-shadow: offset-x offset-y blur-radius color | none | initial | inherit
└ text-shadow : offset-x(그림자 수평거리) / offset-y(그림자 수직거리) >> 필수로 지정
/ blur-radius(흐림의 정도) 등이 있습니다.
전체 코드 (notice.html)
<!DOCTYPE html>
<html>
<head>
<title>자연휴양림 홍보책자 예제</title>
<style type="text/css">
h1 {font-size : 50px; font-weight : bold; color : purple;
text-align : center; text-shadow : 5px 5px 5px #888888}
h2 {font-size : 30px; font-weight : bold;
text-decoration : underline; color : green}
h3 {font-size : 20px; foent-weight :bold;
font-style : italic}
</style>
</head>
<body>
<h1> Natural Recreation Forest </h1>
<h2> 한여름 밤에 꿈같은 자연 휴양림</h2>
<h3>자연 휴양림은 치유와 건강을 선사합니다.</h3>
<p>산림이 갖고 있는 좋은 것들, 즉 울창한 숲, 맑은 공기, 깨끗한 물, 아름다운 경관 등의 모든 기능을 살려
산림내에서 양, 휴식에 필요한 최소한의 기본 시설만을 설치하여 국민 정서를 함양하고 보건 증진에 기영할 목적으로 산림 내에 조성한 휴식공간이다. </p>
</body>
</html>Result
HTML의 폰트 관련 속성을 알아보았습니다. 보여지는 예시화면처럼 간단한 안내문을 작성할 수 있습니다.
다양한 색과 스타일로 개인화된 홍보책자를 꾸밀 수 있습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
|---|---|
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [CSS 기초] 선택자 (클래스선택자 / 구조선택자) 예제 (0) | 2022.04.11 |
| [HTML 기초] 회원가입 사이트 만들기 (1) | 2022.03.22 |
