FONT Element | Heading | Font style관련 Element 들

Font 란 인쇄 활자를 의미하는 단어로써, 웹 문서에서 사용하는 글꼴을 font 라고 합니다. font 역시 color와 마찬가지로 웹 문서에서 중요한 요소중에 하나죠. 브라우저 창에 눈으로 보여지는 부분으로서 Client의 브라우저에 표현되는 글꼴이니까요. 글씨체(font face)나 크기, 또는 글자색을 다르게 지정하므로해서 강조하고 싶은 부분을 눈에 띄게 표현할 수 있습니다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD [표 보는 방법]

Element

Start tag

End tag

Empty

Deprecated

DTD

FONT

감추기

Actions Bar 사용하기 [HTML-Kit Interface 보기]

아래는 HTML-Kit Interface 중에서 Actions Bar 부분입니다. Tools, Batch Action, Document, Style ... 등 제목이 보이는데, 그 부분들을 Tab 이라고 부릅니다. 즉 Tools 라고 된 부분은 Tools Tab이라고 부릅니다. Tab이란 전화 번호 수첩에 ㄱ, ㄴ, ㄷ... 식으로 홈을파고 제목을 붙여서 쉽게 원하는 부분을 찾을 수 있도록 한 것과 같습니다. HTML-Kit에서 매우 중요하고도 강력한 기능을 Category 별로 분류해 놓았습니다. 단추들을 살펴보면 두 가지고 분류할 수 있는데 단추 오른 쪽에 Drop Down 단추(오른쪽에 있는 아래로 향한 삼각형)가 있는 버튼과 없는 버튼이 있는데, Drop Down 단추가 있는 것들은 한 가지 이상의 Option이 있는 것이고, 없는 단추는 Option이 없는 단일 기능을 하는 단추입니다.

앞으로 Actions/Tools/Html Tags(

)라고 표기하면, Actions Bar의 Tools Tab의 Html Tags(그림 참조)의 Drop Down 단추를 누르하는 뜻이죠. 잘 알아 두세요. 그럼 한 번 연습을 해 보도록하져...

Tag으로 둘러싸기(Enclose with tag)
1. 먼저 아래 그림과 같이 'BODY' 부분에 입력하고 선택합니다.

2. Actions/Tools/Html Tags(

)하면 아래와 같이 HTML Element들이 Drop Down되어 펼쳐지지요... FONT 선택.

3. 아래와 같이 선택된 내용이 'FONT' Element로 싸여졌군요. Attribute 자동 입력하는 방법은 Tags Reminder 사용법을 참고하세요...

아래의 표는 Windows OS를 설치하면 기본적으로 설치되는 font 들 입니다. 아래의 표를 보면 알 수 있는 사실이지만 한글의 경우 글꼴이름 뒤에 '체'가 붙으면 영문글꼴의 자간(글자의 수평간격)이 좁아진다는 것을 알 수 있고, 영문 글꼴중에 Verdana, Tahoma를 글꼴로 지정하면 한글을 입력할 경우 '굴림' font가 나옵니다. 특히 Verdana는 Aspect Ratio(선명도)가 뛰어난 글꼴입니다. 선명도가 클수록 글씨 크기가 작아져도 잘 보입니다. 아래 표의 글꼴 중에 default는 윈도우 기본 글꼴인 'Verdana' 입니다.

위의 윈도우용 기본 글꼴 외의 글꼴을 쓸 경우
여러분들이 만든 웹 문서에 기본 글꼴 외의 글꼴을 사용했을 때, 그 문서를 보는 사람(Client)의 컴퓨터에 그 글꼴이 있으면 여러분들이 의도한 대로 Client가 그 글꼴을 볼 수 있지만, 만약 없다면 의도와는 다르게 여러분들이 지정한 글꼴이 나타나지 않습니다. 그 때는 Client의 시스템에 지정된 기본 글꼴로 보이져... 기본 글꼴은 위의 표에 표시한 'default font'입니다.

font 형태에 따른 Element들이 되겠습니다. 기울임(italic), 굵게(bold)등의 글꼴 스타일과 관련된 Element들입니다.

<HTML> <HEAD> <TITLE>FONT-style 관련 예제</TITLE> </HEAD> <BODY> bold bold 굵은 글꼴 italic italic 기울임 글꼴 <BIG>big</BIG> big : 크게, small small : 작게 underline underline 밑줄친 글꼴 <TT>teletype</TT> teletype 타자기 글꼴 <S>strike through</S> strike through 가운데 줄친 글꼴 Subscript(아래첨자)보통글자Superscript(위첨자) emphasis emphasis 강조된 끌꼴 </BODY> </HTML>

이번에는 Font Element 를 이용해서 문장 중에 강조하고 싶은 부분을 강조하는 예제를 하나 해 보져... 문장 중에서 특정 부분을 강조하는 방법은 이 페이지의 font 및 font 관련 Element 들을 이용하여 적절하게 사용할 수 있습니다. 알다시피 특정 부분을 강조하는 이유는 내가 웹 문서를 통해 전달하고저 하는 부분에 시선을 집중시켜서 내용을 빠트림 없이 전달하기 위해서 이져... 다음 예제에 나오는 <h3>...</h3> 과 ... 와 같은 Element 를 사용하여 어떻게 특정 부분을 강조하는지 알아봅니다.

<HTML> <HEAD> <TITLE>순서가 없는 목록 예제</TITLE> </HEAD> <BODY> <H3>인포섹, 전략 솔루션과 보안 서비스 사업에 집중한다.</H3> SK계열 정보보호전문업체 인포섹(대표 최을락 www.skinfosec.co.kr)은 최근 2003년도 인포섹 영업전략 세미나를 갖고, 전략 솔루션 관련 영업과 보안 서비스 사업에 집중키로 했다. 이번 세미나는  1. SK그룹내 정보보호사업 활성화 2. 대외사업 매출비중 확대 3. 안정적 수익구조 확대 및 개선  등 3대 경영중점추진과제와 이를위한 영업실행계획 등을 위해 마련됐다. 이에따라 인포섹은 타깃 고객을 적극 발굴해 전략상품 위주로 영업을 집중키로 했다. </BODY> </HTML>

Escape 문자란 주로 웹 문서에서 사용하는 '<' 나 '>' 같은 예약문자(Reserved character)나 ©, ® 같은 특수문자 등을 브라우저로 출력시키기 위해 사용하는 문자입니다. 특히 '<' 나 '>' 는 HTML Tag에 사용하는 기호로서 그 괄호 속에 HTML Element가 들어오면 출력했을 때 브라우저 창에 나타나지 않습니다. Tag으로 간주하기 때문이져. 그렇다면 브라우저 창에 바로 앞에서 실습했던 예제중에  와 같은 HTML Tag을 형태 그대로 브라우저 창에 출력하고 싶으면 어떻게 할까요? 바로 Escape 문자를 사용하는겁니다. 즉, 에디터 상에

 로 Coding 하면 브라우저 창에는

 로 출력된다는 거져... 이건 제가 무쟈게 많이 쓰고 있습니다.

앞의 HTML 개론 페이지에서 제가 분명히 space를 아무리 많이 쳐도 1개 밖에 인정이 안되다는 설명을 했던거 기억하시는지... 예 그 사실은 변함이 없습니다만 Escape 문자를 사용하면 space를 주고 싶은 만큼 줄 수 있습니다. 그런데 쓸데없이 space는 머하러 그렇게 여러개 주냐구요?...^^ 절대 쓸데없지 않습니다. 오히려 쓸데가 아주많죠. 뒤에 나올 Anchor 라는 페이지에서 링크를 정리 할 때 칸을 맞추어 주는 역할을 합니다. 일단 칸 맞추기나 한 번 해 봅시다. 아래와 같이 글자 수가 틀릴 경우

보기가 안 좋지 않습니까? 특히 줄이 안 맞는 꼴은 절대 못본다는 사람들... 정말 맘에 안들겠져? 바로 이때... 이 대목에서 사용하는게  (non-breaking space)가 되시겠습니다. 아래는  를 사용해서 4개의 문자열을 맞추는 Source code 입니다.

<HTML> <HEAD> <TITLE> 로 문자열 정리하기</TITLE> </HEAD> <BODY> 야후코리아 네   이   버 네이트닷컴 하 나 포 스  </BODY> </HTML>

실행 결과처럼 문자열을 정리했습니다. 한글 문자열을 이와 같이 정리할 경우 글자 한 자의 폭은 space 3개의 폭이 되져. 물론 같은 글자 크기 였을 때 말이죠. 위의 '네 이 버' 는 글자 사이에   가 3개 들어갔고, '하 나 포 스'의 경우는 각 글자 사이의 space가 1개면 되기 때문에 구태여   를 사용하지 않고 그냥 space로 처리했습니다.

제 목 1

제 목 2

제 목 3

제 목 4

제 목 5

제 목 6