HTML - 핵심태그

쑤·2024년 1월 20일

CSS html tag 태그

HTML/CSS

목록 보기

2/8

HTML Tag

1. Heading `<h>`

Heading 태그는 제목을 나타낸다.
<h1>부터 <h6>까지 총 6개의 레벨이 있다.
- < h1 >이 가장 크고, < h6 >이 가장 작다.
- 레벨을 중간에 건너뛰지 않고 순차적으로 작성하는 것이 좋다.
  - 예) < h1 > 하위에 바로 < h3 > 사용 (X)
Heading 태그는 한 라인에 하나만 출력된다.
- 같은 라인에 2개 이상의 Heading 태그를 작성해도, 라인이 나뉘어서 출력된다.
- 이는 Heading 태그가 블록 레벨 요소이기 때문이다. (블록 레벨 vs 인라인)

input

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

output

h1

h2

h3

h4

h5

h6

2. P, Text Formatting

2-1. Paragraph `<P>`

<p> 태그는 하나의 문단을 나타낸다.
- 즉, 문단과 문단을 구분짓는 태그
< p > 태그가 왜 필요한가?
- 태그 없이 본문 내용을 작성하면, Enter로 내용 구분을 시도해도 문단 구분이 되지 않는다.
- p 태그로 작성하면, 마치 엔터를 친 것처럼 문단을 구분해서 작성할 수 있다.
< p > 태그는 블록 레벨 요소이기 때문에 new line으로 시작한다.
- p 사이의 간격은 css로 조정할 수 있다.
참고) HTML에서는 공백, 줄바꿈을 아무리 많이 해도 브라우저는 이를 무시하여 하나의 공백으로 표현한다.
- 그래서 필요한 태그가 <br>, <hr>
  - <hr> : 문단과 문단 사이 분리하는 가로줄
  - <br> : 텍스트 사이 줄바꿈
Tip) 내용 채우기 : lorem + 탭 or lorem + 엔터

2-2. Text Formatting

b, i, strong, em, mark, del, sub, sup

아래 인라인 태그를 활용하면 문단 안에서 텍스트에 효과를 줄 수 있다.
구버전 (단순히 텍스트를 꾸미는 목적)
<b> : 굵게(bold)
<i> : 기울임(italic)

input

<b>굵게</b>
<i>기울임</i>

output

굵게
기울임

외국어, 구어체, 인용 구문 등을 기울여서 표현
신버전 (semantic element, 의미론적 요소)

<strong> : 굵게
- 중요하거나 긴급한 컨텐츠를 강조하고 싶을 때
<em> : 기울임(Emphasized)
- i보다 컨텐츠 강조의 느낌

input

<strong>굵게</strong>
<em>기울임</em>

output

굵게
기울임

참고) 기타
<mark> : 마킹(like 형광펜)
<del> : 취소선
<sub> : 아래 첨자
<sup> : 위 첨자

input

<mark>마킹</mark>
<del>취소선</del>
h<sub>2</sub>o
2<sup>5</sup>

output

마킹
~~취소선~~
h2o
25

3. Image, 절대경로, 상대경로

3-1. Image

<img> 태그로 웹 페이지에 이미지를 삽입할 수 있음
문법
- 빈 요소
- src 속성이 반드시 필요함
주요 속성(Attribute)
- src(필수) : 삽입하고자 하는 이미지를 가리키는 경로
  - src에 들어갈 수 있는 것
    - 프로젝트 내의 이미지 파일

절대경로 : <C:\Users\MYCOM\Desktop\web\img\snow.png">

상대경로 : <img src="snow.png">

웹 주소

<img src="https://cdn.pixabay.com/photo/2017/03/23/09/34/artificial-intelligence-2167835_1280.jpg">

Tip : 브라우저에서 이미지 우클릭 > 이미지 주소 복사

alt : 이미지가 보여지지 않을 경우, 사용자에게 이미지를 설명할 수 있는 글(Alternative text)
- 경로가 잘못된 경우, 파일이 삭제된 경우, 네트워크가 끊긴 경우 등

input

<img src="../snow4.png" alt="눈 이미지 입니다">

output

width, height : 이미지의 크기 지정

3-2. 절대경로, 상대경로

<img>의 src, <a>의 href 값을 작성할 때 알아야 하는 개념
- 자주 하는 실수! 이미지나 링크가 제대로 출력되지 않는다면, 대부분 경로를 잘못 작성한 것

1. 절대 경로(absolute path)

로컬 PC(내 컴퓨터)를 기준으로 한 경로(Full path, 변하지 않는 고유 경로)
보통 다른 사람의 문서나 파일을 이용할 때 사용
어느 곳에서든 경로에 접근할 수 있다는 장점
그러나 경로가 변경되면 경로를 일일히 수정해야한다는 단점

예)

Windows : <img src="c:\User\images\cat.jpg">

Mac(Linux) : <img
src="/Users/easy/Desktop/zerobase-fe-html-css-summary/3_HTML_Tags/images/cat.jpg">

Tip : Window의 파일 탐색기 상단 주소, VS Code에서 파일 우클릭 > ‘경로 복사’하면 절대 경로 획득 가능

2. 상대 경로(relative path)

현재 작성중인 파일을 기준으로 상대적으로 표현한 경로
상대 경로 표현 방법
- /(슬래쉬)로 디렉토리 구분
- .(점 하나) : 현재 디렉토리
- ..(점 두개) : 부모 디렉토리
기본적으로 항상 ./ 가 생략되어있기 때문에, 파일명을 아무것도 없이 그냥 작성하면 현재 디렉토리에서 이미지를 가져오게 된다.
상대경로 예제
현재 작성중인 파일이 02_image_anchor.html 일 때,

1번 이미지
<img src="./images/dog.jpg">
또는
<img src="images/dog.jpg">

2번 이미지
<img src="./cat.jpg">
또는
<img src="cat.jpg">

3번 이미지
<img src="../resources/dog.jpg">

4. `<a>`

Anchor 태그
<a> 태그는 다른 웹페이지로 이동할 수 있는 하이퍼링크를 만들 수 있는 태그이다.
문법 : href 속성이 필수이다.
주요 속성(Attribute)
- href (필수) : 이동할 링크의 주소
- href에 들어갈 수 있는 것
  - 프로젝트 내의 다른 HTML 파일
    - 상대경로
    - 절대경로
  - 웹 페이지 주소 등

input

상대경로:
<a href="./01.Heading, P, Text Formatting.html">상대경로로 이전페이지로 이동</a>

절대경로:
<a href="C:\Users\MYCOM\Desktop\web\html\10.5시간만에 완성하는 핵심 마크업\02.HTML - 핵심태그\01.Heading, P, Text Formatting.html">절대경로로 이전페이지 이동</a>

웹 페이지
<a href="https://naver.com">네이버로 이동</a>

output

상대경로:
이전페이지로 이동

절대경로:
절대경로로 이전페이지 이동

웹 페이지
네이버로 이동

title : 마우스를 hover했을 때 표시되는 추가적인 제목이나 설명
target : 페이지를 열 방법 지정
- _self: 현재 페이지에서 열기(Default)
- _blank: 새 탭 or 새 창으로 열기
- 참고) _parent, _top
이미지 링크
- a 태그는 텍스트 뿐만 아니라, 어떤 HTML 요소이든 올 수 있다.
- 이미지가 자주 쓰인다.

input

<a href="https://google.com">
	<img src="https://blog.kakaocdn.net/dn/dGq3GP/btqGIqddu8T/BjHFtmkRJM5f9TMXpWl8n0/img.gif" alt="">
</a>

output

input

<p>자세한 내용은 <a href="https://google.com">여기</a>를 참고하세요</p>

output

자세한 내용은 여기를 참고하세요

5. List - ol, ul, li

목록(List)을 나타내는 태그는 < ol >과 < ul > 두가지
하위요소에 < li > (List item)

1) <ol>

순서가 있는 리스트(Ordered List).
기본 스타일은 아라비아 숫자(css로 변경 가능)
참고) Attribute
- type : 순서 표시 타입 지정(a-소문자 알파벳, A-대문자 알파벳, 1-숫자(기본값), i-로마자 소문자, I-로마자 대문자)
- start : 시작 번호

2) <ul>

순서가 없는 리스트(Unordered List)
기본 스타일은 Bullet point(점)(css로 변경 가능)

3) <li>

목록의 내용

<작성법>

먼저 상위에 리스트의 타입(< ol > 또는 < ul >)을 명시하고,
그 하위에 < li >(list item) 태그로 리스트의 항목을 나열한다.
- 리스트를 중첩, 교차해서 작성할 수 있다.
- < ol, ul >안에는 type, start, reversed / style 지정가능
- < li >안에는 value

<ol> + <li>

<ol>
	<li>하나</li>
	<li>둘</li>
	<li>셋</li>
</ol>

하나
둘
셋

<ol type> + <li>

<ol type="a">
	<li>하나</li>
	<li>둘</li>
	<li>셋</li>
</ol>

하나
둘
셋

<ol strat> + <li>

<ol start="10">
	<li>하나</li>
	<li>둘</li>
	<li>셋</li>
</ol>

하나
둘
셋

<ol type + start> + <li>

<ol type="A" start="6">
	<li>하나</li>
	<li>둘</li>
	<li>셋</li>
</ol>

하나
둘
셋

<ol> + <li value>

<ol>
<li value="3">하나</li>
	<li>둘</li>
	<li>셋</li>
	<li value="100">넷</li>
	<li>다섯</li>
</ol>

하나
둘
셋
넷
다섯

<ul> + <li>
<ul>
	<li>가나다</li>
	<li>마바사
</ul>	
가나다

마바사

<ol> + <ul> + <li>

<ol>
	<li>가나다</li>
	<li>마바사
		<ol>
			<li>가나다</li>
			<li>마바사</li>
				<ul>
					<li>가나다</li>
					<li>마바사</li>
				</ul>
			<li>abc</li>
			<li>def
				<ol>
					<li>def</li>
					<li>abc</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>abc</li>
	<li>xyz</li>
</ol>

가나다
마바사
1. 가나다
2. 마바사
3. abc
4. def
  1. def
  2. abc
abc
xyz

6. Table

HTML로 표를 표현할 수 있음
관련 태그
- 핵심 : <table>, <tr>, <td>
- 선택 : <thead>, <tbody>, <tfoot>
작성법

<table> 태그로 테이블을 선언한다.(전체 테이블을 감싸는 태그)
<tr>로 테이블의 row(행, 가로)을 한 줄씩 추가한다.
<tr>안에 테이블의 셀(Cell, Column, 열)을 채워준다.
- 맨 첫째줄이라면, <th> 로 테이블 헤더를 만들어준다.
- 헤더가 아니라면, <td>로 일반 데이터를 채워준다.

다양한 테이블 헤더

주의 : 테이블을 페이지의 레이아웃을 잡기 위해 사용해서는 안된다.
참고 : Header for multiple column : <th>의 colspan 속성

7. Div & Span

<div>와 <span>은 레이아웃을 구성하기 위해 사용하는 태그이다.
- 눈으로 보이는 변화는 없다. 아무것도 표현하지 않는다.
- HTML 코드에서 영역을 나누기 위해 필요함
- 일종의 Container 역할
  - 컨테이너 태그: 컨텐츠나 레이아웃에 영향을 주지 않는 태그들을 의미함
    레이아웃해서 스타일링 하는 게 목적
자주 쓰는 속성 : class, id
- CSS를 적용하는 단위(==선택자)로써 쓰일 수 있음

div와 span의 차이점

div는 블록 레벨 요소

span은 인라인 요소

div는 블록 레벨 Container

span은 인라인 Container

div는 안에 다른 HTML 요소들을 포함한다

span은 문단의 일부 등 더 작은 부분을 포함한다.

자세한 내용은 블록레벨 요소와 인라인 요소 강의 참고

8. 전역속성

Global attributes
모든 HTML 요소에서 공통적으로 사용할 수 있는 속성
- 예외) 일부 요소에는 적용되지 않는 경우도 있음
대표적인 속성
- class : 해당 요소를 식별할 수 있는 식별자(중복 가능)
- id : 해당 요소를 식별할 수 있는 식별자(중복 X. 유일하게 하나)
- style : css 적용
- hidden : 해당 요소를 숨김
- title : 마우스를 오래 올려놓았을 때 뜨는 tooltip
- 이벤트 핸들링 관련 속성 : onclick, onmouseenter, onmouseleave

input

<p>우리집 고양이는 <span class="blue">파란색</span> 눈을 가졌다</p>
<p>우리집 고양이는 <span style="color: green;">초록색</span> 눈을 가졌다</p>
 <h1>div</h1>
 <div class="red" hidden>
 	<h2>경고</h2>
    	<p>조심하세요. 아주 조심하세요.</p>
 </div>

우리집 고양이는 파란색 눈을 가졌다

우리집 고양이는 초록색 눈을 가졌다

div

경고

조심하세요. 아주 조심하세요.

9. 시맨틱 태그 (Semantic Tag)

HTML5 에서 등장한 개념
시맨틱(Semantic)이란? 의미론적
- 시맨틱 요소(태그)란? 의미를 갖고있는 요소 (시맨틱 웹, 시맨틱 태그 모두 유사한 의미로 쓰이는 용어)
시맨틱 태그를 사용하는 목적
- 코드를 보는 개발자에게 명확하게 해당 요소의 의미, 목적을 전달하기 위함
- 검색 엔진 최적화
- 접근성 등
예 1)
- div와 span은 시맨틱 태그가 아니다.
- h1, img, table, form은 시맨틱 태그이다.
예 2)
<header> : 소개, 제목, 로고 등
- <main> : 메인 컨텐츠 영역. 전체 문서에서 단 하나
- <section> : 컨텐츠 영역. 일반적인 컨텐츠 구획. 여러개 가능
  - <article> : 독립적인 컨텐츠를 구분
  - <figure> : 비디오, 이미지, 코드 영역
- <nav> : 네비게이션 영역. 링크. 메뉴
- <aside> : 메인 컨텐츠 이외의 사이드 컨텐츠. 별개 정보, 연관 정보
문법적으로 ‘반드시 이렇게 해야 동작한다’는 규칙은 없음. 각 시맨틱 태그의 의미를 이해하고, 각자 다양한 형태로 사용함

쑤

프론트엔드로 남들보다 앞서갑니다

이전 포스트

HTML - Basic

다음 포스트

HTML - 핵심태그

HTML/CSS

HTML Tag

1. Heading `<h>`

h1

h2

h3

h4

h5

h6

2. P, Text Formatting

2-1. Paragraph `<P>`

2-2. Text Formatting

b, i, strong, em, mark, del, sub, sup

3. Image, 절대경로, 상대경로

3-1. Image

3-2. 절대경로, 상대경로

4. `<a>`

5. List - ol, ul, li

6. Table

7. Div & Span

8. 전역속성

div

경고

9. 시맨틱 태그 (Semantic Tag)

HTML - Basic

HTML - Form

0개의 댓글

HTML - 핵심태그

HTML/CSS

HTML Tag

1. Heading <h>

h1

h2

h3

h4

h5

h6

2. P, Text Formatting

2-1. Paragraph <P>

2-2. Text Formatting

b, i, strong, em, mark, del, sub, sup

3. Image, 절대경로, 상대경로

3-1. Image

3-2. 절대경로, 상대경로

4. <a>

5. List - ol, ul, li

6. Table

7. Div & Span

8. 전역속성

div

경고

9. 시맨틱 태그 (Semantic Tag)

HTML - Basic

HTML - Form

0개의 댓글

1. Heading `<h>`

2-1. Paragraph `<P>`

4. `<a>`