[HTML] HTML 기본 태그

728x90

HTML이란?

웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

HTML의 변화

시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장

HTML 태그 구성 요소

<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>

.태그명

: HTML이 가지고 있는 고유의 기능.

<열린태그> </닫힌태그> 형태로 입력

.컨텐츠

열린 태그와 닫힌 태그 사이에 있는 내용물

.속성

HTML 태그가 갖고 있는 추가 정보

.속성값

어떤 역할을 수행할지 구체적인 명령을 진행하는 것

HTML 문서의 기본 구조

<!DOCTYPE html>		<!-- HTML5 문서 선언 -->
<html>			<!-- HTML 문서의 시작과 끝 -->
<head>			<!-- 문서와 관련된 요약 정보 정리 -->
	<meta charset="UTF-8">		<!-- 문자 코드 -->
	<title>웹프로그래밍</title>	<!-- 웹사이트 제목-->
</head>
<body>				<!-- 웹사이트 내용 -->
</body>
</html>

<!DOCTYPE html>

HTML5라는 신조어로 문서를 선언하는 태그

<html> ... </html>

HTML 문서의 시작과 끝을 의미
모든 HTML 태그들은 <html> 태그 안쪽에 입력

<head> ... </head>

웹사이트의 간단한 요약 정보를 담는 영역
웹사이트에서 노출되지 않는 정보

<body> ... </body>

웹사이트에서 눈에 보이는 정보를 담는 영역
이미지나 텍스트처럼 출력되는 정보

<meta charset="UTF-8">

character setting의 약자를 나타내는 문자 코드
모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미

<title> ... </title>

웹사이트 탭에 나타나는 제목을 적는 태그

<img> 태그

<img src="logo.png" alt="회사로고">

.<img> 태그

정보성을 갖고 있는 이미지를 삽입. 닫힌 태그 없음.

.src 속성

삽입할 이미지 파일 경로

.alt 속성

웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체.

➡️ 웹 표준, 웹 접근성을 고려한 속성. 시각장애인이 이미지를 보지 못할 때 쓰이기도 하는 부분

<h> 태그

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

Heading의 약자로 제목이나 부제목을 표현

숫자 값이 클수록 폰트 사이즈가 작음. 즉, 숫자는 정보의 중요도를 나타냄.

<h1>태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용됨.

<p> 태그

<p>Nice to meet you</p>

Paragraph의 약자로 본문 내용을 표현

웹사이트의 중요 정보를 담는 태그

나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력

<ul> 태그

<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>

메뉴1
메뉴2
메뉴3

Unordered list의 약자로, 순서가 없는 리스트 생성.

메뉴 버튼을 만들 때 사용되는 태그