HTML의 기초. 태그부터 차이까지! (1)

HTML태그의 기초부터 시작하도록 하겠습니다. 뭐든지 기초가 탄탄해야 결과가 좋으니까요. 

HTML과 CSS만 조금 배워두면 티스토리 블로그를 예쁘게 꾸미는데 참 도움이 되겠죠?

텍스트 관련 태그

1. 물리적 태그

물리적 태그는 화면에 출력되는 형태를 지정해 주는 태그 입니다. 

소스	설명	화면출력
<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)	텍스트

물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 정합니다. 이것은 css로도 지정할 수 있는 것이므로 중요하지 않는 태그라고 할 수 있습니다.

2.논리적 태그

화면에 출력되는 형태 보다는 태그 자체의 의미를 가지고 있습니다.

소스	설명	화면출력
<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)	텍스트

결과를 보시면 아시겠지만 실제로 기울임이나 굵은 글꼴 이외에는 다른 형태로 보이는 것은 없습니다. 다만 이 텍스트가 어떤 의미를 가지는 지를 지정하는 역할입니다.

HTML5가 웹 표준으로 지정 되고 나서부터는 시맨틱 태그가 대두되고 있습니다. 이는 의미론적으로 더욱 중요해 졌다는 것인데요. 단순히 이용자가 느끼게 만들어 주는 것은 아닙니다. SEO가 중요시 되면서 더욱 검색에 노출이 잘 되도록 하는 역할도 하는데요. 강조<strong> 태그나 문서제목<title>태그, 혹은 큰제목<h1>같이 특별한 의미의 텍스트를 알려줍니다. HTML5에 관한것은 또 이야기 하도록 하겠습니다.

내용을 표현하는 태그

1.<h1~6>태그

<h1>태그는 섹션의 제목을 지정합니다. 위에서 말씀드린 바와 같이 내용을 포괄적이며 직관적으로 나타내는 의미를 담아야 합니다.

<h1>섹션 큰제목</h1>

<h2>섹션 작은 제목</h2>

h1이 가장 상위의 제목을 의미하며 숫자가 뒤로 갈 수록 그 아래에 속하는 소제목을 의미 합니다. 이것은 html문서 속에서 단계를 구성하는 것이기 때문에 정확하게 적어야 하며, h1은 한 섹션에 한개씩만 사용할 수 있습니다.

2. <p>태그.

p태그는 하나의 문단을 구성합니다. 

<p>첫번째 문단</p> 

<p>두번째 문단</p> 

<p>

첫번째 행.

두번째 행.

</p>

이렇게 크게 한 문단으로 묶을 수 있습니다. 

3. <br>태그

줄바꿈 태그입니다. 

<p>

첫번째 행. <br>

두번째 행.

</p>

실제로는 이렇게 적어야 합니다. p태그의 설명에서와 같이 엔터로 코딩하면 실제 출력물에서는 한 줄로 나오게 되죠. 

4.특수문자

화면출력	설명	엔터티 이름	엔터티 번호
	non-breaking space 공백문자(스페이스 키를 누른효과)	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	quotation mark	&quot;	&#34;

링크 태그

<a>태그를 이용해서 하이퍼링크를 만들 수 있습니다.

a는 앵커(anchor)를 의미합니다.

href

a태그는 기본적으로 href 속성을 가집니다. 링크로 이동할 목적이죠.

<a href="http://www.google.com">구글</a>

target

사용할수 있는 또 하나의 속성인데요. href로 걸어준 목적지에 어떻게 갈 것인가를 결정합니다.

<a href="http://www.google.com" target="_blank">구글</a>

target의 값을 _blank로 적어주면 새창이 열리며 구글로 이동합니다.

title

문서제목의 title이 아닙니다. ㅎㅎ. a태그에 사용할수 있는 아주 중요한 title 속성입니다. 

<a href="http://www.google.com" target="_blank" title="구글 새창으로 열기">구글</a>

title속성은 이 링크가 어디로 가는지를 명확하게 설명해 주어야 합니다. 이는 웹 접근성에 따르는 방법인데요. 몸이 불편한 분들의 경우 스크린 리더기가 이 title의 내용을 읽어줍니다. 

아직 기본도 다 못풀었는데 시간이 휙휙 지나갔네요. 2편은 다음번에 또 이어서 올리도록 하겠습니다. 

기초는 탄탄히!