[Html] 텍스트 관련 태그 와 링크(Link) 에 대해서

텍스트 관련 태그

텍스트와 관련된 태그는 물리적(Physical) 태그와 논리적(Logical) 태그로 구분됩니다. 1. 물리적(Physical) 태그 텍스트가 화면에 출력되는 형식을 지정하는 태그입니다. 소스 설명 화면출력 <i>텍스트</i> 기울임 글꼴(Italics) 텍스트 <b>텍스트</b> 굵은 글꼴(Bold) 텍스트 <tt>텍스트</tt> 타자기 글꼴(Teletype) 텍스트 <u>텍스트</u> 밑줄친 글꼴(Underline) 텍스트 <s>텍스트</s> 취소선(Strikethrough) 텍스트 <strike>텍스트</strike> 취소선(Strikethrough) 텍스트 <sub>텍스트</sub> 아래첨자(Subscript) 텍스트 <sup>텍스트</sup> 위첨자(Superscript) 텍스트 <big>텍스트</big> 크게, Bigger font (one size bigger) 텍스트 <small>텍스트</small> 작게, Smaller font (one size smaller) 텍스트 물리적 태그중에서 많이 쓰이는 태그는 <b>, <u> 정도가 있습니다. 물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 결정합니다. 그리고 이는 CSS로 대체해서 사용할 수 있으므로 중요하지 않은 태그라고 할 수 있습니다. 2. 논리적(Logical) 태그  물리적 태그가 텍스트가 화면에 어떻게 출력될것인가를 결정하는 반면 논리적 태그는 화면에 출력되는 형식보다는 태그 자체가 의미를 가지고 있는 태그입니다. 소스 설명 화면출력 <abbr>텍스트</abbr> Abbreviation (for example, Mr.) 텍스트 <acronym>텍스트</acronym> Acronym (for example, WWW) 텍스트 <cite>텍스트</cite> 인용(Citation) 텍스트 <code>텍스트</code> 코드(Code listing) 텍스트 <dfn>텍스트</dfn> Definition 텍스트 <em>텍스트</em> 강조(Emphasis) 텍스트 <kbd>텍스트</kbd> Keystrokes 텍스트 <q>텍스트</q> Inline quotation 텍스트 <samp>텍스트</samp> Sample text (example) 텍스트 <strong>텍스트</strong> 강한 강조(Strong emphasis) 텍스트 <var>텍스트</var> 변수(Programming variable) 텍스트 화면출력 부분을 보시면 기울임 글꼴이나 굵은 글꼴외에 특별한 형태로 출력되는것은 없습니다. 단지 이 텍스트가 어떤 성격인지를 규정하는 역할을 합니다.

HTML을 처음 배울때는 CSS를 모르는 상태이기에 물리적 태그를 자주 사용하지 논리적 태그는 거의 사용하는 경우가 없습니다. 그러나 HTML태그의 성격은 화면에 출력하는 형태를 규정한다기 보다는 텍스트의 의미를 중요시 합니다. 예를들면 <b> 와 <strong> 태그 둘다 화면에서는 굵은 텍스트로 표시됩니다. 그러나 이 두가지 태그는 그 의미가 다릅니다. <b>태그는 bold의 약자로 단순히 텍스트를 굵게 표시하라는 의미를 가지고, <strong>태그는 강조의 의미를 가집니다. <strong>태그로 둘러싸인 텍스트가 중요하다는 의미죠. 그러므로 보다 의미있는 HTML문서를 만들기 위해서는 물리적태그(<b>태그) 보다는 논리적 태그(<strong>태그)를 중점적으로 사용해야 합니다.

FONT 태그

<font>태그는 글자를 꾸미는데 가장 기본이 되는 태그입니다. <font>태그는 size, color, face 3가지의 속성을 가집니다. size 속성은 글자의 크기를 지정합니다. <font size="5">텍스트 크기를 지정하는 size 속성</font> 텍스트 크기를 지정하는 size 속성 color 속성은 글자의 색상을 지정합니다. <font color="red">텍스트 색상</font>을 지정하는 size 속성 텍스트 색상을 지정하는 size 속성 face 속성은 글꼴을 지정합니다. <font face="돋움">돋움 글꼴로 지정된 텍스트입니다.</font> 글꼴은 홈페이지 방문자의 컴퓨터에 그 글꼴이 설치되어 있어야 지정한 글꼴대로 출력이 됩니다. 그러므로 윈도우에 기본적으로 설치되어 있는 기본글꼴로 지정해야 방문자의 웹브라우저에서도 제대로 출력됩니다. 돋움 글꼴로 지정된 텍스트입니다. <font>태그의 3가지 속성을 모두 사용해서 표현하면 다음과 같습니다. <font size="5" color="red" face="돋움">3가지 속성을</font> 모두 사용하였습니다. 3가지 속성을 모두 사용하였습니다.

<font>태그는 글자를 화면상에 어떻게 표현할까를 지정할지를 결정하는 물리적 태그입니다. <font>태그 자체가 어떤 의미를 가지고 있지는 않습니다. HTML태그를 사용하여 문서의 구조를 표현하고, CSS를 사용하여 문서의 스타일을 표현하여 문서의 구조와 스타일을 분리하는 쪽으로 홈페이지 제작기법이 발전하고 있습니다. 그러므로 <font>태그는 언젠가는 사장될 운명을 가지고 있는 태그입니다. 그러나 현재 시점에서는 광범위하게 사용하고 있기에 그냥 지나치기는 힘들어서 기본강좌에 포함하였습니다.

특수문자(Character Entities)

HTML태그는 "<" 기호로 시작하여 ">" 기호로 끝납니다. 그러므로 "<"는 웹브라우저가 해석할때 HTML 태그를 입력하기 위해서 사용하는 기호로 인식합니다. 그러므로 화면상에 "<"를 표현하기 위해서는 "&lt;"와 같은 Character Entities를 사용해야 합니다. 3 &lt; 4는 참이다. 3 < 4는 참이다. Character Entities는 3부분으로 나누어집니다. &로 시작하여, 엔터티이름 혹은 #엔터티번호, 그리고 세미콜론(;)으로 끝납니다. 엔터티 이름을 사용해도 되고, 엔터티 번호를 사용해도 됩니다. 아래는 가장 자주 사용되는 Character Entities입니다. 화면출력 설명 엔터티 이름 엔터티 번호   non-breaking space 공백문자(스페이스 키를 누른효과) &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; " quotation mark &quot; &#34;

링크(Link)

<a> 태그를 사용하면 링크를 만들 수 있습니다. "a"는 앵커(Anchor)를 의미합니다. href <a> 태그는 기본적으로 href 속성을 가집니다. 이동할 페이지 주소를 적어주면 되죠. <a href="http://www.naver.com">네이버</a> target <a> 태그에서 사용할 수 있는 또하나의 중요한 속성은 target입니다. target 속성은 링크가 걸린 페이지를 어떻게 열것인가를 결정합니다. <a href="http://www.naver.com" target="_blank">네이버</a> 위와 같이 target 속성의 값을 _blank로 지정하면 새창에서 네이버 홈페이지가 열립니다. 네이버 title <a>태그에서 살펴볼만한 3번째 속성은 title 속성입니다. 이는 링크의 이름을 지정하는 속성입니다. <a href="http://www.naver.com" target="_blank" title="네이버 홈페이지 열기">네이버</a> title을 지정해 주면 링크에 마우스를 올렸을때 타이틀이 표시됩니다. 아래 링크에 마우스를 올려서 확인해 보세요. 네이버

내부링크(책갈피 기능)

<a>태그의 속성중에 name이라는 속성이 있습니다. 이는 링크의 이름을 지정합니다. 링크에 이름을 지정하면 문서내에서도 이 이름을 이용하여 이동이 가능합니다. (페이지 이동이 아니라 스크롤을 통한 이동) 문서내부로 링크를 걸때는 #과 내부링크의 name 속성값을 적어주면 됩니다. <p><a href="#bottom">문서의 하단으로</a></p> <p style="height:600px;">스크롤이 되는 효과를 나타내기 위해서 이 문단의 높이를 높게 지정합니다.</p> <p><a name="bottom">여기가 문서의 하단</a></p> 위의 소스에서 style="height:600px;" 이 부분은 CSS 입니다. CSS 부분을 공부하면 간단하게 이해가 됩니다. 만일 위의 소스를 가지고 확인시 스크롤바가 생기지 않으면 height:600px 이 부분을 증가시켜 주면 됩니다.