다양한 Tag

박종호·2024년 1월 5일

FrontEnd

목록 보기

2/17

🔴div & span

div

콘텐츠 분할 요소입니다. 여러 태그들을 그룹핑하기 위한 태그입니다.
블록 요소입니다.
CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않습니다.

💡 프론트엔드 개발에서는 div 태그 사용은 스타일 적용을 위한 용도로 사용할것을 권장합니다. (검색엔진최적화, 코드 가독성, 접근성 등의 이유) header, footer, main, section, article, nav 등 다양한 시맨틱한 태그들을 사용하여 콘텐츠를 분할하고 그룹핑 합니다.

span

인라인 요소입니다
div와 마찬가지로 CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않습니다.

🟠Sections

소개 및 탐색에 도움을 줍니다.
회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 될 수 있어요.
head 태그와 혼동하지 마세요!

헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없습니다

<!-- 잘못된 예 -->
<header>
	<header></header>
</header>

<header>
	<footer>
	</footer>
</header>

nav

navigation bar- 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여줍니다.

메뉴, 목차, 브레드크럼(breadcrumb)으로 사용됩니다.

메뉴

<nav>
	<ul>
		<li><a href="#">위니브</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

브레드크럼

<nav>
	<ol>
		<li><a href="#">위니브</a></li>
		<li><a href="#">캐릭터소개</a></li>
		<li>라이캣</li>
	</ol>
</nav>

문서의 모든 링크가 안에 있을 필요는 없어요. 페이지의 주요 탐색 링크를 위한 태그입니다.
하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 웹페이지에 여러 개의 nav 태그를 가질 수 있습니다.

페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담습니다.

main

body의 주요 콘텐츠를 나타냅니다.
웹페이지에서 한 번만 사용할 수 있습니다.
사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안 됩니다.
- 검색 폼이 주요 기능이라면 예외입니다.

article

독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아갑니다.
아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다.
- 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다.
- 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.
게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
제목 요소를 자식으로 포함하여야 합니다!

section

제목 요소를 자식으로 포함하여야 합니다!

💡 article vs section 일단 article 사용을 우선 고민해보세요. 독립적으로 사용한다면 article 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용하세요! 단순 스타일링이 목적이라면 div 요소를 사용합니다!

aside

문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다.
문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.
각주, 광고 배너등에 사용합니다.

🟡 Contents

h1, h2, h3, h4, h5,h6
Heading: 제목
웹 페이지가 하나의 책이라고 생각한다면 제목 태그는 목차와 같습니다.
h1 ~ h6 순서대로 작성해야 합니다

또한 같은 비슷한 주제로 묶고싶다면, section을 따로 나눌게 아니라,
이런식으로 section안의 또 다른 section을 생성해 h2->h3 의 형식으로 표현

a(앵커)

다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
href : *hypertext reference* (하이퍼텍스트 참조)
- **tel: 전화번호
- mailto: 이메일주소** = 조금 중요함!
target 속성값
- _self: 현재 페이지(기본값)
- _blank: 새 탭
download: 링크 이동 대신 사용자에게 URL에 위치하는 대상을 저장할지 물어봅니다. 이때 브라우저에서 바로 열 수 있는 파일 포멧이라면 바로 실행합니다.

💡 **인라인 요소**이지만, 예외적으로 블록 요소들을 감쌀 수 있습니다!

<a href="b.html">b.html으로 이동</a>
<a href="b.html" **target="_blank"**>b.html **새탭으로** 이동</a>
<a href="b.html" **download**>b.html 파일 **다운로드**</a>
<a href="**mailto**:google@gmail.com">mailto:google@gmail.com</a>
<a href="**tel**:010-0000-0000">010-1234-1234</a>

href 속성과 id를 사용하여 페이지 내에서 이동하는 해시 링크를 만들 수 있습니다.

p

paragraph의 약어로 하나의 문단을 나타냅니다.
HTML에서 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있습니다.
블록 요소입니다
p태그 내에서 줄바꿈을 원할 경우, br 태그를 통해서 가능하다! 직접 적용해보았다.
이는 적용 결과물.
또한,이처럼 h1태그를 이용했을 때, 왜 p태그와 같이 위 쪽으로 이동하지 않고 아랫줄에 작성되냐면? h태그는 블록라인 요소이기 때문에 한 줄을 단독으로 차지해야하기 때문!

strong

중대하거나 긴급한 콘텐츠를 나타냅니다. 단어 또는 문장일 수 있습니다.
기본적으로 굵은 글꼴이 적용됩니다.
스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때 strong 사이에 있는 문자는 거센 억양으로 소리를 내어 발음합니다

Q. 그럼 strong이랑 b태그와의 차이는 뭘까? b태그도 굵은 글꼴이잖아.

A. 단순히 스타일의 차이! b태그는 아무런 의미가 없을 때 사용된다고 해. 그리고 b 태그는 과거 html에서 굵은 글씨를 표현하고 싶어서 만들어졌다고하는데 왜 사라지지 않았을까? 이유는 하위 호환성이기 때문이야. 과거에 b태그를 사용해서 만들어진 페이지들을 모두 바꿀 수는 없겠지?? 그렇기에 아직도 남아있다고 해.

br

break(line break)의 약어로 줄을 나눈다는 뜻입니다
HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보입니다.

hr

이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용합니다.
단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않습니다!

code

짧은 코드 조각(한 줄)을 나타날 때 사용합니다.
텍스트의 고정 폭 글꼴(monospace font: 모든 문자가 동일한 너비를 가지는 글꼴)을 사용합니다.

<code>push()<code>

pre

HTML에 작성한 내용 그대로를 표현합니다.
텍스트는 고정 폭 글꼴을 사용하고, 공백을 그대로 유지합니다.
공백이 필요한 코드, 혹은 텍스트를 사용해 그림을 그릴 때 사용합니다.

🟢 목록 태그

ol

ordered list의 약자, 순차적 목록을 말합니다.
정렬된, 순서가 있는 보통 숫자 목록을 의미합니다.
type: 항목을 셀 때 사용할 카운터 유형
- 1: 숫자(기본값)
- a: 소문자 알파벳
- A: 대문자 알파벳
- i: 소문자 로마 숫자
- I: 대문자 로마 숫자
```
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>
```

start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능.

<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

reversed: 순서 역전
순서가 중요한 목록에 적용합니다.

ul

unordered list의 약자, 비순차적 목록을 말합니다.
정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미합니다.
순서가 중요하지 않는 목록에 적용합니다.

li

목록의 항목을 나타냅니다.
단독으로 사용할 수 없습니다. ol, ul 의 자식요소로만 사용할 수 있습니다!

💡 **ol,ul의 자식요소로는 li만 사용할 수 있습니다!**

자식요소로는 li만!

<!-- **X** -->
<ol>
	**<div>item</div>**
	<li>item</li>
	<li>item</li>
</ol>

자식이 아닌 자손요소로는 다른 태그도 사용가능합니다

<!-- **O** -->
<ol>
	<li>item
			**<div>first item</div>**
	</li>
	<li>item</li>
</ol>

🔵 목록 태그

ol

ordered list의 약자, 순차적 목록을 말합니다.
정렬된, 순서가 있는 보통 숫자 목록을 의미합니다.
type: 항목을 셀 때 사용할 카운터 유형
- 1: 숫자(기본값)
- a: 소문자 알파벳
- A: 대문자 알파벳
- i: 소문자 로마 숫자
- I: 대문자 로마 숫자
```
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
```

start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능.

<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

reversed: 순서 역전
순서가 중요한 목록에 적용합니다.

ul
unordered list의 약자, 비순차적 목록을 말합니다.
정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미합니다.
순서가 중요하지 않는 목록에 적용합니다.

li

목록의 항목을 나타냅니다.
단독으로 사용할 수 없습니다. ol, ul 의 자식요소로만 사용할 수 있습니다!

💡 **ol,ul의 자식요소로는 li만 사용할 수 있습니다!**

**중요 자식요소로는 li만!

<!-- **X** -->
<ol>
	**<div>item</div>**
	<li>item</li>
	<li>item</li>
</ol>

자식이 아닌 자손요소로는 다른 태그도 사용가능합니다

<!-- **O** -->
<ol>
	<li>item
			**<div>first item</div>**
	</li>
	<li>item</li>
</ol>

🟣 Media

(정말 배우고 싶었던 파트)

img

image. 문서에 이미지를 삽입합니다
예전에는 이미지를 보려면 링크를 클릭해 새 창에서 확인했었습니다. 이미지도 하나의 문서로 생각되었던 거죠
마크 로웰 앤드리슨(모자이크 웹 브라우저 및 넷스케이프 내비게이터를 개발)
- ‘🤔거쳐야 하는 단계 없이, 글자와 이미지를 한 번에 보여주면 어떨까?’와 같은 생각을 하게 되었고 모자이크 브라우저에 이미지 태그를 만들어 적용하게 되었습니다!

<img src="chilli.jpg" alt="위니브 다람쥐 캐릭터 칠리" >

src: 경로
alt: 대체 텍스트. 이미지에 대한 설명
- src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.
- 시각장애인을 위한 스크린리더를 지원합니다
- 이미지를 대체하는 텍스트가 중복이라면 alt="" 생략이 아닌 빈 값으로 둡니다.
🤔 **이미지 하단에 빈 공간이 생겨요!**

해당 현상은 img가 인라인 요소라서 발생하는 현상입니다.

인라인 요소이기 때문에 img의 세로 정렬이 글자의 baseline을 따르게 됩니다.

해당 현상을 해결하기 위해서는 아래와 같은 초깃값을 넣어주면 됩니다

img{
	vertical-align:top;
}

박종호

Hey🖐️

이전 포스트

HTML 기초

다음 포스트