이번 주는 SDL 자동화 실험실 설계 교육 들었더니 순식간에 지나갔다...

그동안 개인 공부도 못했음.....

그리고 창업 준비할 결심을 하였다...

 

 

이번 내용은 웹 문서에 다양한 내용을 입력하는 방법을 다루고 있는데 HTML 태그를 사용해서 텍스트, 이미지, 표, 오디오, 비디오, 하이퍼링크 등 다양한 형식의 멀티미디어들을 웹 문서에 삽입하는 과정을 다룬다.

주말에 밀린 녹화 강의도 들어야하고 집안일도 하고 해야 할 것들이 너무너무 많지만 일단 회피하기 위해 책을 펼쳤다;;ㅋㅋ

 

 

#1 텍스트 입력하기

텍스트를 입력할 때 사용하는 HTML 태그들에 대해서 배워본다.

<hn>  제목을 크고 굵게 표시 (n=1~6)
<p>  단락 만들기
<br>  줄 바꿈
<hr>  가로줄, 분위기 전환
<blockquote>  인용할 때 사용 (들여씀)
<strong>, <b>  텍스트를 강조하거나 굵게 표시
<em>, <i>, <cite>  기울인 텍스트 표시 (이텔릭체)

+
<abbr>  줄임말 표시 (title 속성 함께 사용)
<code>  소스 코드를 표시
<del>  문서에서 삭제된 텍스트를 나타냄
<ins>  문서에 추가된 텍스트를 나타냄
<mark>  태그를 적용한 부분에 하이라이트를 표시함
<small>  덧붙이는 글이나 저작권 등 부가 정보를 작게 표시
<sub>  아래첨자 표시
<sup>  위첨자 표시

 

 

 

 

* <hn> 태그 : 제목을 나타내기

 

  - 닫는 태그인 </hn>을 반드시 사용해야 한다.
  - h는 제목을 뜻하는 heading을 줄인 말이다.
  - n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시 가능하다.
    ex) <h1> : 가장 큰 제목 / <h6> : 가장 작은 제목

 

* <h1> 태그는 한 페이지에 1개만 사용한다. 여러 개 사용할 경우 화면 낭독기에서 문서 구조를 이해하는데 혼란이 생길 수 있음

* 제목은 h1부터 h6까지 순서대로 사용한다.

 

<h1>레드향</h1>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>

 

****** HTML 미리보기 ******

레드향

레드향 샐러드 레시피

상품 구성

*******************************

 

 

 

* <p> 태그 : 텍스트 단락 만들기 

* <br> 태그 : 줄 바꾸기

 

  - 닫는 태그인 </p>를 반드시 사용해야 한다.

  - p는 paragraph, br은 break row의 줄임말이다.

  - <p>...</p>태그 사이에 입력한 내용이 너무 길어서 브라우저 창에 한줄로 표시할 수 없을 경우, 자동으로 줄을 바꾼다.

  - 원하는 위치에서 줄을 바꿔서 표시하고 싶을 때는 <br> 태그를 사용한다.

 

* <br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시되지만, 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생긴다. 따라서 텍스트 단락을 만들 때는 <p> 태그를 사용해야 한다.

 

<h1>레드향</h1>
<p>껍질에 붉은빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>

 

****** HTML 미리보기 ******

레드향

껍질에 붉은빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

*******************************

 

 

 

* <hr> 태그 : 가로줄 / 분위기 전환

 

  - hr은 horizontal의 줄임말이다.

  - 처음에는 가로줄을 그리는 용도로 만들었으나 최근에는 여러 내용을 나열하는 도중에 분위기를 전환할 때 주로 사용한다.

  - <hr> 태그로 추가한 가로줄은 CSS를 사용해 화면에서 감춘다.

    (웹 문서에서 가로줄을 그릴 때는 <hr> 태그 대신 CSS를 사용한다.)

 

* HTML은 태그를 적절하게 사용해서 문서의 구조를 만들거나 각종 요소를 삽입하는 역할이지, 브라우저 화면에 어떻게 보이는지는 HTML에서 고려할 대상이 아니다. 문서 내용에 영향을 주지 않으면서 일부를 감추거나 위치를 옮겨놓는 역할은 CSS가 맡는다.

 

 

 

* <blockquote> 태그 : 인용할 때 사용

 

  - 닫는 태그인 </blockquote> 사용해줌.

  - 브라우저가 인용문을 인식할 수 있도록 함

  - 다른 텍스트보다 약간 들여 씀

  - 화면 낭독기에서 웹 문서를 읽을 때도 태그 안의 내용은 다른 텍스트와 구분 됨

 

<h1>레드향</h1>
<p>껍질에 붉은빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>

 

****** HTML 미리보기 ******

레드향

껍질에 붉은빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

*******************************

 

 

 

* <strong>, <b> 태그 : 텍스트를 강조하거나 굵게 표시

 

  - 닫는 태그인 </strong>, </b> 사용해줌.

  - 눈으로는 둘 사이에 차이가 없지만 화면 낭독기의 기능이 다름.

  - <strong> 태그는 경고나 주의 사항처럼 중요한 내용을 강조할 때 사용 / 화면 낭독기가 강조하여 읽어 줌.

  - <b> 태그는 키워드처럼 단순히 글자만 굵게 표시할 때 사용

 

<h1>레드향</h1>
<p>껍질에 붉은빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>비타민 C와 비타민 P가 풍부해 <br>
<strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</blockquote>

 

****** HTML 미리보기 ******

레드향

껍질에 붉은빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

*******************************

 

 

 

* <em>, <i>, <cite> 태그 : 기울인 텍스트 표시

 

  - 닫는 태그인 </em>, </i>, <cite> 사용해줌.

  - <em>은 강조를 뜻하는 emphasis의 줄임말로, 문장에서 특정 부분을 강조할 수 싶을 때 사용함.

  - <i> 태그는 마음속 생각, 용어, 관용구 등에 사용함. 최근에는 글꼴 아이콘을 표시하는 용도로 많이 사용됨.

  - <cite> 태그는 책이나 영화, 블로그 등의 저작물의 제목을 나타낼 때 사용

 

* 텍스트를 굵게 표시하거나 이탤릭체로 표시하는 것, 글자 크기를 크게 또는 작게 바꾸는 것처럼 단순히 겉으로 보이는 모습을 꾸미려면 HTML 태그보다 CSS를 사용해야 한다.

 

<h1>레드향</h1>
<p>껍질에 붉은빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>

 

****** HTML 미리보기 ******

레드향

껍질에 붉은빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

*******************************

 

 

 

 

 

 

 

 

'무한도전!! > 홈페이지 만들자!!' 카테고리의 다른 글

일지 #3 HTML 기본 문서 만들기 (HTML 문서, 시맨틱 태그)  (0) 2026.09.24
일지 #2 마크업(Markup)과 태그(Tag)  (0) 2026.09.20
일지 #1 서버(Server), 클라이언트(Client), 도메인(Domain), IP 주소  (2) 2026.09.19

+ Recent posts

티스토리툴바