03. HTML의 태그 - 텍스트, 앵커, 컨테이너, 리스트, 이미지 태그

박지윤·2023년 3월 13일

html

HTML

목록 보기

3/6

제목 태그

제목 태그는 문서의 제목을 표현할 때 사용하는 태그로 Heading의 첫 글자를 딴 h를 사용한다. 제목 태그 사용 시 줄바꿈이 적용되고, 텍스트가 굵게 표현된다.

글자 크기와 내용의 중요도에 따라 <h1>에서 <h6>까지 나누어지며, 숫자가 낮을수록 글자 크기가 커지고 내용의 중요도가 높다는 것을 나타낸다.

• 보통 <h1>은 해당 페이지의 제목을 표현할 때 주로 사용

<!-- 숫자가 커질수록 글자크기는 작아짐 -->

<h1>h1 제목1</h1>
<h2>h2 제목2</h2>
<h3>h3 제목3</h3>
<h4>h4 제목4</h4>
<h5>h5 제목5</h5>
<h6>h6 제목6</h6>

💡 출력 결과

h1 제목1

h2 제목2

h3 제목3

h4 제목4

h5 제목5

h6 제목6

문단 태그

문단 태그는 하나의 문단을 정의할 때 사용하는 태그로, Paragraph의 첫 글자를 딴 p를 사용한다. 문단 태그 사용 시 줄바꿈이 적용되고, 태그의 위쪽과 아래쪽에 약간의 여백이 추가된다.

<h3>문단태그</h3>
<p>문단태그는 하나의 문단을 정의할 때 사용하는 태그</p>
<p>
  줄바꿈을 하기 위해서는 
  엔터가 아닌 br태그를 사용해야 합니다. <br>
  짠! 줄바꿈이 실행되었습니다 :)  
</p>

💡 출력 결과

문단태그

문단태그는 하나의 문단을 정의할 때 사용하는 태그

줄바꿈을 하기 위해서는 엔터가 아닌 br태그를 사용해야 합니다.
짠! 줄바꿈이 실행되었습니다 :)

텍스트 형태 태그

<1번 그룹>
<b>: Bold 태그, 텍스트를 굵게 표현
<i>: Italic 태그, 텍스트를 기울여 표현
<u>: Underline 태그, 텍스트의 밑줄을 표현
<s>: Strike 태그, 텍스트의 중간선을 표현

<2번 그룹>
<strong>: Strong 태그, 텍스트를 굵게 표현, 중요하다는 의미
<em>: Emphasized 태그, 텍스트를 기울여 표현, 강조하는 의미
<ins>:Insert 태그, 텍스트의 밑줄을 표현, 새롭게 추가되었다는 의미
<del>:Delete 태그, 텍스트의 중간선을 표현, 삭제되었다는 의미
<mark>: Mark 태그, 형광펜으로 줄을 그은 것처럼 표현

태그의 차이점

1번 그룹 태그와 2번 그룹 태그의 차이점은 무엇일까? 바로 2번 그룹의 태그는 시멘틱 태그라는 것이다. 시멘틱 태그란 사람보다는 검색엔진, 스크린 리더 등의 프로그램에게 추가적인 정보를 제공하는 것을 목적으로 하는 태그를 말한다.

예를 들어, b 태그와 strong 태그 둘 다 텍스트를 굵게 표현하지만, b 태그는 텍스트를 강조하기만 할 뿐 의미적으로 강조하지는 않는다. 하지만 strong 태그는 웹페이지 내에서 이 태그로 감싸진 내용이 중요한 내용이라는 것을 브라우저에게 알려주는 역할을 한다.

최근에는 b 태그 대신 css의 font-weight를 사용해 텍스트를 굵은 글씨로 변경시키거나, strong 태그를 사용해 중요한 텍스트를 나타내고 있다.

<p> 
  <strong>이 태그는 <em>중첩 사용</em> 가능합니다.</strong><br>
  텍스트 중간에도 <i>적용 가능</i> 합니다.<br>
  이 텍스트는 <mark>하이라이팅</mark>한 텍스트입니다.<br>
</p>

💡 출력 결과

이 태그는 중첩 사용 가능합니다.
텍스트 중간에도 적용 가능 합니다.
이 텍스트는 하이라이팅한 텍스트입니다.

앵커 태그

a 태그는 다른 페이지로 이동하거나, 현재 페이지의 특정 위치로 이동시키는 링크를 생성하는 태그이다.

절대경로와 상대경로

절대경로와 상대경로는 앵커 태그 뿐만 아니라 모든 연결방식에서 사용된다.

절대경로는 웹 페이지나 파일이 가지고 있는 고유한 경로를 말한다. 파일의 경우 최상위 디렉토리에서 해당 파일까지의 모든 경로로 구성되어있고, 웹 페이지의 경우 http:도메인 혹은 https:도메인으로 구성되어있다.

절대경로의 예: http://naver.com, C:\Program Files\Google

<a href="https://www.naver.com/">네이버</a>
<img src="C:/image/profile.png">

상대경로는 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로를 말한다.


index.html이 기준! 
<!--현재 파일과 해당 파일이 같은 디렉토리에 존재할 경우-->
<img src="favicon.png">

<!--현재 파일 기준 해당 파일이 하위 폴더 안에 있을 경우-->
<img src="images/title.png">


style.css가 기준! 
<!--현재 파일 기준 해당 파일이 상위 폴더 안에 있을 경우-->
<a href="../images/title.png">

즉, 폴더에 들어갈 때는 / 기호를 사용하고, 상위 폴더로 이동해야할 때는 ../ 기호를 사용해 해당 파일까지의 경로를 표현한다.

href 속성

href 속성은 링크의 목적지가 되는 URL을 지정한다. a 태그를 통해 링크를 생성하고, a 태그에서 사용되는 target, download, rel 속성을 사용하기 위해서는 href 속성을 필수로 사용해야 한다.

<a href="https://velog.io/">velog</a>

위처럼 작성 시 아래와 같은 링크가 생성된다.
velog

target 속성

target 속성은 링크된 문서를 어디에 표시할지 나타내는 속성이다. target 속성에서 지정할 수 있는 속성값 중 자주 사용되는 속성값으로는 _self, _blank이 있다. target을 설정하지 않을 경우 _self가 기본값으로 설정된다.

• _self: 링크된 문서를 현재화면에 표시
• _balnk: 링크된 문서를 새 창에 표시

<a href="https://velog.io/" target="_blank">velog</a>

위 처럼 작성 시 링크된 문서를 새 창에 여는 링크가 생성된다.
velog 새창으로 열기

download 속성

download 속성은 링크의 리소스를 다운로드 받을 수 있도록 하는 속성이다. IE에서는 지원되지 않는 속성이다.

<a href="https://cdn.pixabay.com/photo/2022/08/03/13/09/moon-7362632_960_720.jpg" download>photo_moon</a>

위 처럼 작성 시 이미지 주소에 있는 사진을 다운받을 수 있는 링크가 생성된다.
photo_moon

내부 링크

a 태그는 외부 페이지 뿐만 아니라 현재 페이지의 특정 위치로 이동하는 것도 가능하다. 이러한 형태의 링크를 내부링크라고 부른다. 내부 링크의 예로는 페이지 하단에 있는 '맨 위로 이동하기' 가 있다.

<h1 id="title">웹페이지 타이틀</h1>

... 중략

<a href="#title">맨 위로 이동하기</a>

링크타입

href 속성은 링크로 이동할 수 있는 URL을 지정하는 것 뿐만 아니라 전화번호, 이메일, 문자로 연결하는 기능도 가능하다.

mailto

이메일을 발송할 수 있도록 도와주는 링크타입이다.

1. 이메일 주소 연결
<a href="mailto:abc@example.com">메일</a>

1-1. 메일 제목 지정
<a href="mailto:abc@example.com?subject=제목을 지정합니다.">제목지정_메일</a>

1-2. 메일 내용 지정 (줄바꿈은 %0D%0A)
<a href="mailto:abc@example.com?body=내용을 지정합니다.%0D%0A 안녕하세요!">내용지정_메일</a>

1-3. 메일 참조 지정 
<a href="mailto:abc@example.com?cc=def@example.com">참조지정_메일</a>

1-4. 응용하기
<a href="mailto:abc@example.com?subject=제목을 지정합니다.&body=내용을 지정합니다.&cc=def@example.com">abc@example.com</a>

mailto를 활용하여 메일과 연결하고, 메일의 내용과 제목을 지정할 수 있다.
abc@example.com

tel과 sms

tel은 링크를 통해 통화를 할 수 있도록 도와주는 링크타입이고, sms는 링크를 통해 문자를 보낼 수 있도록 도와주는 링크타입이다.

국가번호.전화번호 앞자리.전화번호 뒷자리 순으로 작성한다.

<a href="tel:+82.1234.5678">전화 걸기</a>
<a href="sms:+82.1234.5678">문자 보내기</a>

tel과 sms를 활용하여 전화를 걸거나 문자를 보낼 수 있다.

010-1234-5678 (📞)
010-1234-5667 (✉️)

컨테이너 태그

컨테이너 태그란 컨텐츠나 레이아웃에 영향을 주지 않는 태그를 말한다. 컨텐츠의 내용을 구분하거나, 특정 레이아웃에 공통적인 스타일을 적용할 때 컨테이너 태그를 사용한다. 컨테이너 태그는 크게 시맨틱 태그와 논 시맨틱 태그로 구분된다.

시맨틱 태그

텍스트 형태 태그 뿐만 아니라 컨테이너 태그에도 시맨틱 태그가 존재한다. 시맨틱 태그를 사용해 웹페이지를 구성할 경우, 검색 엔진은 문서의 구조와 정보를 효과적으로 분석하여 검색 최적화 작업을 하게 된다. 또 태그 자체가 의미를 담고 있기 때문에 내부 코드를 보지 않고도 태그의 역할을 예측할 수 있고, 더욱 정확하게 컨텐츠를 전달할 수 있다.

HTML 문서나 섹션에 대한 도입부를 나타낼 때 사용하는 태그
예: 사이트 로고, 사이트 제목, 검색창

nav

네비게이션 메뉴를 나타낼 때 사용하는 태그
보통 내부에 ul과 li을 사용하며, header에 포함되는 경우가 많음

main

문서의 메인 컨텐츠
2개 이상 존재 가능하지만, 단 1개만 보여짐
section, article, asdie, nav 요소를 포함할 수 있음
하지만 header, footer 요소는 main 요소 내부에 포함할 수 없음

section

서로 연관된 컨텐츠를 묶는 용도로 사용하는 태그
보통 각 섹션은 머리글과 컨텐츠로 구성되어 있음

article

전체적인 내용과 독립적인, 재사용 가능한 컨텐츠를 나타낼 때 사용하는 태그
예: 잡지, 신문 등의 기사, 블로그 포스트, 주석 등

aside

본문 내용 외의 컨텐츠를 표현해야 할 때 사용하는 태그
예: 사이드바, 퀵메뉴, 광고 배너 등

HTML 문서나 섹션의 가장 아랫부분을 나타낼 때 사용하는 태그
예: 저작권 및 저작자, 연관 링크, 연락처 등

논 시맨틱 태그

div 태그와 블록 태그

div 태그는 부모 요소의 가로 영역에 맞게 블록 형태로 영역이 설정되는 태그이다. 양 옆으로 다른 요소가 배치되지 않게 줄바꿈을 적용하여 블록을 생성한다. 가로와 세로 크기를 속성값으로 지정 가능하며, 바깥 여백(margin)이 4방향 모두 적용된다.

<div>와 같은 속성을 가진 태그를 블록(block) 태그라고 하며, <p>, <h1~h6>, <ul>, <ol>, <form>이 블록 태그의 대표적인 예이다.

span 태그와 인라인태그

span 태그는 내용의 길이만큼 영역이 설정되는 태그이다. 줄바꿈이 되지 않고 옆으로 나열되며, 가로와 세로 크기를 속성값으로 지정할 수 없다. 바깥 여백(margin)이 양 옆으로만 적용되며 겹쳐지지 않는다.

<span>과 같은 속성을 가진 태그를 인라인(inline) 태그라고 한다. 인라인 태그는 블록 태그의 자식 태그로 분류되기 때문에 블록 태그를 자식태그로 설정할 수 없지만, <a>의 경우 블록 태그를 자식 태그로 설정할 수 있다.

인라인 태그의 대표적인 예로는 <img>, <a>, <strong>, <i> 등이 있다.

리스트 태그

ul 태그

ul태그는 순서가 없는 리스트를 표현할 때 사용한다. 먼저 ul 태그를 사용한 뒤 자식 태그로 li 태그를 사용하여 항목을 나타낸다.

<p>장바구니</p>
<ul>
  <li>햇반</li>
  <li>스팸</li>
  <li>신김치</li>
  <li>대파</li>
</ul>

💡 출력 결과

장바구니

햇반

스팸

신김치

대파

ol 태그

ol 태그는 순서가 있는 리스트를 표현할 때 사용한다. 먼저 ol 태그를 사용한 뒤 자식 태그로 li 태그를 사용하여 항목을 나타낸다.

ol 태그의 속성

type: 카운팅 방법을 정의하는 속성
• a: 소문자 알파벳순
• A: 대문자 알파벳순
• i: 소문자 로마숫자순
• I: 대문자 로마숫자순

start: 카운팅 시작을 정의하는 속성
reversed: 역순으로 카운팅 할 때 사용하는 속성

<p>• 김치 볶음밥 레시피</p>
<ol>
  <li>식용유를 두르고 대파를 넣어 중약불로 볶는다.</li>
  <li>대파 오일이 만들어지면 스팸을 넣고 볶는다.</li>
  <li>김치를 넣고 프라이팬 바닥이 달구어지면 양조 간장 1스푼을 붓는다.</li>
  <li>밥을 넣고 재료가 잘 섞이도록 골고루 볶는다</li>
</ol>

<p>• ol 태그 속성 사용해보기</p>
<ol type="A" start="3" reversed>
  <li>start의 속성값은 숫자로 지정해줍니다!</li>
  <li>reversed 속성을 추가했기 때문에</li>
  <li>리스트 번호가 역순으로 카운팅됩니다.</li>
</ol>

💡 출력 결과

• 김치 볶음밥 레시피

식용유를 두르고 대파를 넣어 중약불로 볶는다.

대파 오일이 만들어지면 스팸을 넣고 볶는다.

김치를 넣고 프라이팬 바닥이 달구어지면 양조 간장 1스푼을 붓는다.

밥을 넣고 재료가 잘 섞이도록 골고루 볶는다

• ol 태그 속성 사용해보기

start의 속성값은 숫자로 지정해줍니다!

reversed 속성을 설정했기 때문에

리스트 번호가 역순으로 카운팅됩니다.

dl 태그

dl 태그는 용어와 용어의 정의를 표현할 때 사용한다. 용어를 나타내는 태그인 dt와 용어에 대한 정의를 설명하는 dd 태그를 자식태그로 사용한다.

<dl>
  <dt>사건의 지평선</dt>
  <dd>어떤 사건이 외부의 관측자에게 영향을 미치지 못하는 경계</dd>
  <dt>먹구름</dt>
  <dd>몹시 검은 구름.</dd>
  <dd>어떤 일의 좋지 않은 상태를 비유적으로 이르는 말</dd>
</dl>

💡 출력 결과
사건의 지평선 어떤 사건이 외부의 관측자에게 영향을 미치지 못하는 경계 먹구름 몹시 검은 구름. 어떤 일의 좋지 않은 상태를 비유적으로 이르는 말

이미지 태그

img 태그

img 태그는 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.

src 속성

src 속성은 삽입할 이미지의 경로를 설정해주는 속성이다. <a>에 href를 필수로 넣어야 되는 것처럼 <img> 역시 src를 필수로 넣어주어야 한다. 상대경로와 절대 경로 두 가지 모두 사용 가능하다.

alt 속성

alt 속성은 이미지에 오류가 생길 경우 이미지를 대체할 텍스트를 설정하는 속성을 말한다.

width/height 속성

width와 height 속성은 이미지의 가로/세로 크기를 설정하는 속성이다. 속성이 없을 경우 원본 크기대로 출력되며, 둘 중 하나만 설정할 경우 이미지의 비율에 맞게 자동으로 설정된다.

<img src="./image/profile.png" alt="프로필" width="500">

<img src="C:/image/profile.png" alt="프로필" height="300">
<img src="https://naver.com/profile.png" alt="프로필">

상대경로 이미지 출처

시멘틱 태그 이미지 출처

박지윤

프론트엔드 개발 및 실무 프로젝트 구현과정 수료

이전 포스트

02. HTML의 기본 구조

다음 포스트