안녕하세요 아기크롱입니다.
작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^
그럼 시작합시다
<Font> 태그에 대해 알아봅시다.
1) font를 이용한 글자의 입력
글자를 입력할 수 있는 태그의 기본은 <font> 태그입니다. 그런데 이것만으로는 아무런 효과도 줄 수 없습니다. body와 마찬가지로 font에도 몇 가지 속성이 있는데, 원하는 표현을 얻기 위해서는 개별 속성 하나하나를 일일이 지정해주어야 합니다. 요즘에는 이런 번거로움 때문에 대부분의 사람들이 스타일시트를 사용하여 글자를 표현하고 있기는 하지만, 그렇다고 HTML의 기본 중의 기본인 font를 몰라도 된다는 것은 아닙니다.
자, 그럼 지금부터 <font> 태그의 색상, 크기, 글꼴 등을 지정하는 속성들에 대해서 알아보겠습니다.
face는 글자의 글꼴을 지정하는 속성입니다. 따옴표의 안에 글씨체를 입력하여 글꼴을 지정합니다. 글씨체란 굴림체, 돋움체, 바탕체, 궁서체등 글자의 모양을 일컫는 것입니다.
비슷하지만 조금 다른 방법으로 HTML 내에 스타일시트를 삽입하여 글자를 입력하는 방법입니다. HTML은 font에서 보셨듯이 글자를 입력할 때마다 매번 각 속성을 일일이 하나하나 지정해야 하는 번거로운 작업을 해주어야 했습니다. 이와 같은 HTML의 단점을 보완해주는 언어가 스타일시트입니다. 스타일시트를 사용하여 문장의 처음에서 단 한번만 각 속성을 지정을 해놓으면, 해당 문서에서는 더 이상 번거롭게 수고로운 작업을 하지 않아도 됩니다. 스타일시트를 사용하여 글자의 크기, 색, 배경색, 글꼴을 표현하는 방법이, HTML만으로 글자를 표현하는 것보다 더욱 효과적인 표현을 가능하게 합니다. 그럼 본격적으로 어떻게 스타일시트를 사용하여 글자의 각 속성을 지정하는지 알아보겠습니다.
font-size는 글자의 크기를 지정하는 속성입니다. 8∼∞의 수치를 입력하여 글자의 크기를 지정합니다. 숫자가 커질수록 글자의 크기가 커집니다.
<body>
<font style="font-family:굴림체; font-size:9pt; background-color:white; color:black;"> /*이 곳에 글자를 입력하시면 됩니다.*/ </font>
</body>
(1) color는 글자의 색을 지정하는 속성입니다. 색상코드나 영문으로 된 색상이름을 입력하여 글자색을 지정합니다.
(2) background-color는 글자의 배경색을 지정하는 속성입니다. 색상코드나 영문으로 된 색상이름을 입력하여 배경색을 지정합니다.
(3) font-family는 글자의 글꼴을 지정하는 속성입니다. 다른 글씨체로는 돋움체, 돋움, 바탕체, 바탕, 궁서체, 궁서 등이 있습니다.
3) 스타일시트를 활용한 글자의 입력
스타일시트를 찾으셨나요?
head 내에 쓰인 것이 스타일시트입니다. 주석 표시 '<!--'와 '-->'는 해주지 않아도 되지만, 브라우저가 지금처럼 똑똑하지 못하던 시절에는 브라우저가 스타일시트를 HTML로 인식하여 스타일시트가 문서의 내용으로 나타나는 경우가 있었습니다. 그와 같은 오류를 미연에 방지하기 위하여 <head>내에서 주석 표시 태그를 스타일시트 본문의 시작과 끝에 사용하게 되는 경우도있습니다.
'WEB 기초 > HTML' 카테고리의 다른 글
| [ul/ol Tag] 리스트 태그와 정렬태그 (0) | 2018.11.15 |
|---|---|
| 멀티미디어(이미지, 오디오, 비디오) 태그 (0) | 2018.11.15 |
| [a Tag] 링크 태그 (0) | 2018.11.15 |
| Html의 기본구조 (0) | 2018.11.15 |
| 웹표준이란? (0) | 2018.11.15 |