[HTML#04] HTML FONT 태그
Font 태그는 글꼴 제어 태그이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html은 태그가 없으면 아무런 효과가 없다.
만약 <body> </body> 이 태그사이에
'가나다라마바사'
'가나다라마바사'
라고 친다면,
'가나다라마바사 가나다라마바사' 이렇게 입력된다. 마치 이클립스에서 print와 println 의 차이처럼 말이다.
두 '가나다라마바사'가 다른 글씨로 구분되도록 색깔을 빨간색과 파란색으로 나누어본다면,
<font color="red">가나다라마바사</font>
<font color="blue">가나다라마바사</font>
이렇게 color라는 옵션을 넣어주면된다.
위와 같이 color=" " 사이에 색을 넣어주면 미리보기창에 빨간색과 파란색으로 구분된 '가나다라마바사'가 창에 출력된 것을 볼 수 있다.
font는 글자에 관한 여러가지 제어 태그이기 때문에, 여러가지 기능은 어려울 수 있더라도 글꼴, 글자크기, 글자 색깔 등 몇 기능을 더 사용할 수 있다.
만약 글자 색깔말고도 글꼴을 궁서로 바꾸고 싶다면, (물론 컴퓨터에 있는 글꼴만 가능하다)
<font color="red" face="궁서">가나다라마바사</font> 라고하면 궁서체의 빨간색깔 '가나다라마바사'가 출력된다.
그리고 글자 크기를 더 붙이고 싶다면,
<font color="red" face="궁서" size="7">가나다라마바사</font> 이라고 하면 크기까지도 조절이된 상태로 출력된다.
+)
옵션은 태그마다 사용할 수 있는게 정해져있다.
옵션을 작성할때는 반드시 띄어쓰기를 한 칸 이상 해야한다.
<br>태그는 엔터와 같은 기능을 수행하는데, 엔터의 범위는 딱히 없기때문에 종료태그가 없다.
범위를 (줄과 줄 사이를) 늘리는 것은 <br><br><br>처럼 하나당 엔터하나라고 생각하면 된다.
font태그는 HTML5에서는 권장하지 않는 태그, 앞으로는 잘 않써야하는 태그이다.
예제)
예제로 어떤 신문기사를 인용해본다면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>[속보] 코로나 신규 확진 OOO명... 나흘만에 다시 OOO명대</h1>
<h4>국내 발생 OOO명, 해외 유입 OOO명</h4>
<font>OOO 기자</font>
<br>
<font color="gray">입력 2020.OO.OO OO:OO</font>
<hr>
<font>O일 국내 코로나 신규 확진자가 OOO명이라고 O일 중앙방역대책본부가 밝혔다. 국내 지역발생은 OOO명, 해외 유입 사례는 OOO명이다. 지난 주말 OOO명대로 줄었던 신규 확진자 수는 OO일만에 다시 OOO명을 넘어섰다.</font>
</body>
</html>
현재 h1이라는 별도의 텍스트창으로 주제문을 만들었고,
h1~4로 갈수록 글씨크기가 작아지는데, 부제로 h4정도로 만들었다.
다음 "OOO기자"와 "기사 입력 날짜" 그리고 "기사 내용"까지는 font로 이용하였고,
그중에서 입력날짜는 회색이였기에 color 옵션을 붙여주었고,
여기서 <hr>이란 구분선과 같은 역할을 해주는 태그이다.
이걸 사용하면 <br>을 굳이 사용할 필요는 없다.