[HTML] 웹 문서에 다양한 내용 입력하기

이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

---

텍스트 작성하기

 

태그

제목을 나타내는 태그이다.

웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다.

<hn>에서 n은 1~6까지 입력할 수 있고, 숫자가 작아질수록 글씨의 크기가 작아진다.

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

검색 엔진은 hn태그를 검색할 때 h1 태그부터 단계적으로 검색한다.
만약 h4태그를 사용하지 않고 h5, h6태그를 사용한다면 검색 엔진은 h1부터 단계적으로 태그를 검색하다가 h4태그가 없으면 h5, h6태그를 검색하지 않는다.

 

p태그

텍스트 단락을 만드는 태그, 줄을 바꾸는 태그이다.

<p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.

텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우에는 자동으로 줄이 바뀐다.

제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p태그를 자주 사용한다.

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

 

br 태그

텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 <br> 태그를 사용하면 줄을 바꿀 수 있다.

<br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없다.(인라인)

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

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

 

blockquote 태그

인용할 때 쓰는 태그

브라우저가 인용문을 인식할 수 있게 해 준다.

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

blockquote 태그는 반드시 한 개 이상의 p태그를 포함해야 한다.
그래서 p태그 내용에 blockquote 태그는 포함될 수 없다.

 

q태그

q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용하는 태그이다.

<p>차세대웹기술지원센터의 데이터에 따르면 <q cite="인용 사이트 주소">2021년 대한민국에서 가장 높은 점유율을 가지고 있는 웹 브라우저는 구글의 크롬입니다.</q></p>

 

ins와 del 태그

ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용하고, del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다.

ins태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다.

<p>세일 기간을 맞이하여 온라인 강의 수강권을 할인된 금액(정가<del>36,000원</del><ins>20,000원</ins>)에 판매합니다.</p>

 

sub와 sup태그

sub태그와 sup태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다.

<p>공기의 원소 기호는 H<sub>2</sub>O</p>
<p>4<sup>2</sup>은 16입니다.</p>

 

그룹 짓기

HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.

웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있다.

이런 그룹 짓기 작업을 div 태그와 span태그로 수행한다.

 

div태그

div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

 <div class="movie">
    <p>영화 소개</p>
    <p>영화를 소개하는 페이지입니다.</p>
  </div>
  <div class="tv">
    <p>TV 프로그램 소개</p>
    <p>TV 프로그램을 소개하는 페이지입니다.</p>
  </div>

 

span 태그

span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.

<h1>영화 소개</h1>
  <p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>

이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있다.

아직은 스타일을 적용하기 전이므로 '하이라이트'부분에 변화가 없다.

 

목록 만들기

목록은 목차와 메뉴를 구성할 때 주로 사용하지만, 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다.

목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다.

 

ul태그

ul태그는 순서가 없는 비순서형 목록을 생성할 때 사용한다.

이때, 목록 내용은 li태그로 구성한다.

<h1>판매 중인 과일</h1>
  <ul>
    <li>바나나</li>
    <li>사과</li>
    <li>수박</li>
  </ul>

 

ol태그

ol태그는 순서형 목록을 생성할 때 사용한다.

ul태그와 마찬가지로 li태그로 목록 내용을 구성한다.

<h1>오늘 할일</h1>
  <ol>
    <li>아침 먹기</li>
    <li>점심 먹기</li>
    <li>저녁 먹기</li>
  </ol>

 

dl 태그

dl태그는 정의형 목록을 만들 때 사용한다.

정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이라고 보면 된다.

dl태그로 목록을 생성할 때는 li태그 대신에 dt태그로 용어를, dd태그로 용어 설명을 작성한다.

 <dl>
    <dt>HTML</dt>
    <dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
    <dt>CSS</dt>
    <dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
  </dl>

 

링크와 이미지 넣기

링크는 문서와 문서 간 연결을 의미하며, 기본적으로 a 태그를 사용한다.

사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.

 

a 태그

a 태그는 HTML에서 내부나 외부 링크를 생성한다.

a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있다.

href 속성
링크의 대상 경로를 입력할 때 사용한다.
속성 값은 대상 경로의 주소이거나 내부 분서의 id 속성값일 수 있다.

target 속성
링크를 생성할 때 대상이 연결되는 방식을 지정한다.
속성 값으로 _blank, _parent, _self, _top을 사용할 수 있지만, 새 창으로 열리는_blank를 제외하고 거의 사용하지 않는다.
이 속성은 생략이 가능하다.

title 속성
링크를 설명할 수 있는 텍스트를 작성한다.

<a href="https://www.gilbut.co.kr" target="_blank" title="도서출판 길벗">길벗 홈페이지</a>

 

img 태그

이미지 객체를 삽입하고 싶을 때는 img 태그를 사용한다.

img 태그는 src 속성과 alt 속성으로 구성된다.

src 속성
삽입하려는 이미지 경로를 입력하는 속성이다.
HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다.

삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 images 폴더에 있고 이미지 파일의 이름과 확장자가 beach.jpg라면 현재 폴더를 의미하는 ./ 기호를 사용해서 작성한다.

alt 속성
삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.

웹 표준에서는 src 속성과 alt 속성을 필수로 사용하도록 권고하고 있다.

<img src="./beach.png" alt="아름다운 여름 해변">

 

 

이미지 링크

a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다.

그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다.

이를 HTML에서는 이미지 링크라고 한다.

<a href="https://www.google.com" target="_blank">
    <img src="./google_logo.png" alt="구글 로고">
  </a>

 

 

텍스트 강조하기

텍스트에서 특정 내용을 강조해 표현하고 싶을 때가 있다.

이럴 때는 strong 태그와 em 태그를 사용한다.

 

strong 태그

텍스트의 의미를 강조하고 싶을 때 사용한다.

strong 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐만 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역할을 한다.

<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>

 

strong 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.

따라서 strong 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.

 

em 태그

em 태그 역시 텍스트의 의미를 강조하고 싶을 때 사용한다.

em 태그를 사용하면 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있다.

<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>

em 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.

따라서 em 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.

b태그와 i태그는 strong 태그와 em태그와 차이가 없을 정도로 유사하다.
하지만 HTML이 발전하면서 b태그와 i태그는 점점 사용하지 않는 추세이다.
b태그와 i태그는 구조적으로 중요함을 나타내는 것이 아닌 단순히 텍스트를 굵게 만들거나 기울이는 것뿐이기 때문이다.