HTML 강좌 3강 - HTML 태그 익히기#2

HTML 강좌 3강 - HTML 태그 익히기#2

이번 강좌도 지난 강좌에 이어 HTML의 태그를 예제를 통해 연습해 보도록 하겠다.

참고로 HTML 태그에 관련된 내용을 모두 암기 할 필요는 없다.

이런 저런 태그들이 있다는 정도만 인지하고, 테스트를 해보고 넘어가는 정도로 생각하자.

왜냐하면 HTML에서 모든 태그를 사용하지는 않고, 일부 태그만 자주 사용하기 때문이다.

일부 자주사용하는 태그는 굳이 외우지 않아도 사용하면서 자연스럽게 외울 수 있다.

*HTML 텍스트에 관련된 태그

<i>텍스트</i> 기울임 글꼴(Italics) 

<b>텍스트</b> 굵은 글꼴(Bold) 

<tt>텍스트</tt> 타자기 글꼴(Teletype) 

<u>텍스트</u> 밑줄친 글꼴(Underline) 

<s>텍스트</s> 취소선(Strikethrough) 

<strike>텍스트</strike> 취소선(Strikethrough) 

_텍스트 아래첨자(Subscript) 

^텍스트 위첨자(Superscript) 

<big>텍스트</big> 크게, Bigger font (one size bigger) 

<small>텍스트</small> 작게, Smaller font (one size smaller)

<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)

*줄바꿈 태그

본문에서 엔터키를 입력하면 하나의 스페이스로 인식을 하고, 줄 바꿈을 하지 않는다.

줄바꿈을 하기 위해 다음과 같은 태그를 사용한다.

(1)P태그는 텍스트를 하나의 문단으로 만들어준다. 시작태그와 종료태그로 텍스트를 감싸준다.

<p> 텍스트1 </p>

<p> 텍스트2 </p>

(2)BR태그는 문장 끝에서 강제로 줄바꿈을 한다.

텍스트3 <br>

텍스트4 <br>

위 태그들을 직접 테스트 하여 결과를 보면 쉽게 이해를 할 수 있을 듯 하다.

오늘부터는 '에디트플러스' 라는 편집기를 사용하여 코딩을 하려 한다.

(필요하시면 댓글로 메일주소를 남겨주세요.)

 

위 그림처럼 코딩을 하고, 실행을 하여 웹문서를 확인해 보자.

보는바와 같이 일부는 <p>태그를 사용하였고, 일부는 <br>태그를 사용하여 줄바꿈을 하였다.

(실제로 코딩을 하여 확인을 하는 습관을 가지시길 바랍니다.)

 

텍스트의 태그에 따라 위와같은 효과를 낼 수가 있다.

*font 태그

이번에는 정말 많이 사용하는 태그 중 하나인 font 태그를 공부해보자.

폰트태그는 텍스트의 색을 변경하거나, 크기를 변경하는 등의 기능을 가지고 있다.

사용법은 시작태그와 종료태그로 텍스트를 감싸준다.

<font> 텍스트 </font>

폰트태그의 속성은 다음과 같은 것들이 있다.

(1)색상을 변경하는 속성

<font color="skyblue"> 텍스트 </font>

(2)사이즈를 변경하는 속성

<font size="3"> 텍스트 </font>

<font size="2"> 텍스트 </font>

<font size="1"> 텍스트 </font>

(3)글꼴을 변경하는 속성

<font face="궁서"> 텍스트 </font>

<font face="돋움"> 텍스트 </font>

 

위와 같이 코딩을 하고 테스트를 해보자~

(직접 코딩을 해보세요~)

 

텍스트의 크기 및 색상, 그리고 글꼴이 달라지는걸 볼 수가 있다.

(이전에 이미 언급한바 있지만 색상은 RGB 색상표를 참고하길 바랍니다.)

다음 강좌에 이어서 더 많은 태그를 익혀보도록 하자~

(예제파일은 첨부파일에 올려놓으니 필요한 분들은 다운받으세요.)

03.zip