[HTML] HTML 입문 💬

📌 HTML이란?

HTML은 HyperText Markup Language의 준말로,

웹 페이지가 어떻게 구조화되어 있는지 브라우저에게 알려주는 마크업 언어이다.

대부분의 웹 페이지는 모두 <마우스 우클릭 - 페이지 소스 보기>에서 해당 페이지를 만들어주는 HTML 코드를 볼 수 있다. 이를 통해 앞선 포스팅에서도 언급한 것처럼 웹이 접근성이 높다는 것을 확인할 수 있다.

📌 HTML의 생김새

HTML은 크게 '요소(Element)'들로 이루어져 있으며, 둘러싸는 '태그(Tag)'를 통해 다른 페이지에 연결하거나 글씨를 변경하는 등의 작업을 수행한다.

↓

↓

📌 자주 쓰이는 HTML 태그 정리

여는 태그	닫는 태그	기능
<!DOCTYPE>	X	문서 유형을 지정해준다. 웹 브라우저가 해당 페이지를 어떻게 해석할 지 알려준다. 예시) <!DOCTYPE HTML> : 이 페이지를 HTML로 해석하세요.
<HTML>	</HTML>	웹 페이지 코드의 시작과 끝을 나타낸다.
<HEAD>	</HEAD>	웹 페이지의 정보들과 외부 파일들을 링크할 때 사용한다. <TITLE>, <META> 등이 들어간다.
<TITLE>	</TITLE>	웹 페이지의 이름을 나타낸다. 방문자나 검색 엔진은 웹 페이지의 이름을 보고 내용을 예측한다.
<META>	</META>	문자 인코딩 및 문서의 정보를 나타낸다. 예시) <META CHARSET = "UTF-8"> : UTF-8로 문서를 읽으세요.
<BODY>	</BODY>	웹 브라우저에 실제로 표시되는 내용을 나타낸다. 보통 <HEAD> </HEAD> 다음으로 쓰인다.
<DIV>	</DIV>	아무런 의미가 없는 태그이다. 코드 작성자가 요소들을 묶어야 할 때 사용한다. 자동 줄바꿈, 박스 단위로 영역을 지정(BOX LEVEL ELEMENT)
<SPAN>	</SPAN>	아무런 의미가 없는 태그이다. 코드 작성자가 요소들을 묶어야 할 때 사용한다. 옆으로 붙음, 문장 단위로 영역 지정(INLINE LEVEL ELEMENT)
<A>	</A>	Anchor의 준말로 웹 페이지나 외부 사이트를 링크해준다. HREF="연결할 링크의 경로" TARGET="링크를 열 탭" TITLE="링크의 툴팁" ID="앵커이름"
<SCRIPT>	</SCRIPT>	JavaScript 코드를 넣을 때 사용한다.
<IMG>	</IMG>	이미지를 삽일할 때 사용한다. 예시) <IMG SRC="이미지 경로">
<P>	</P>	단락을 설정할 때 사용한다. 앞 뒤로 빈 줄이 생긴다.
<BR>	X	줄바꿈 태그이다.
<LI>	</LI>	<UL>과 <OL> 안에서 항목을 나열할 때 사용한다.
<OL>	</OL>	Ordered List, 순서가 있는 list이다.
<UL>	</UL>	Unordered List, 순서가 없는 list이다.
<H1>	</H1>	제목을 나타내는 태그로, <H1> 부터 <H6>까지 있다. 숫자가 클수록 글자 크기가 작아진다.
<TABLE>	</TABLE>	테이블을 그릴 때 사용한다. <TR> 가로, 행 <TD> 세로, 열

저작자표시

📌 HTML이란?

📌 HTML의 생김새

📌 자주 쓰이는 HTML 태그 정리

티스토리툴바