[HTML] HTML 언어란? / HTML 태그와 속성

html 주석문처리

<!-- -->

HTML(Hyper Text MarkUp Language)

태그(Tag)를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
브라우저 엔진에 의해 해석되어 실행(출력)되는 언어 - CSL(Client Script Language) : HTML, CSS, JavaScript 등
태그를 사용하여 웹문서(웹에서 사용되는 문서 - HTML 파일)를 작성한다.
시작태그와 종료태그가 하나의 짝으로 구성되어 있다. - HTML 태그에는 독립태그가 존재한다.
시작태그와 종료태그 사이에 하위태그 또는 태그내용을 표현한다.
시작태그에는 속성과 속성값을 사용하여 태그를 다양하게 표현할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

DOCTYPE
: 웹문서의 종류를 표현한다. → HTML5를 사용하여 작성된 웹문서

html 태그
: HTML 문서를 작성하기 위해 사용하는 최상위 태그
→ 하위태그 : head,body

head 태그
: HTML 문서에 대한 정보를 제공하기 위한 태그
→ 하위태그 : meta, title, style, script, link

meta 태그
: HTML 문서에 대한 부가적인 정보(Meta Data)를 태그 속성과 속성값으로 제공하는 태그

charset 속성
: HTML 문서의 문자형태(CharacterSet - Encoding)를 속성값으로 제공
→ 브라우저는 HTML 문서를 해석하여 실행하기 위한 문자의 인코딩 방식을 제공한다.
→ 기본 속성값 : ISO-8859-1(서유럽어)
→ 한글 관련 캐릭터셋 : euc-kr(완성형), utf-8(조합형) (utf-8의 속도가 더 빠르다)

title 태그
: HTML 문서의 제목을 설정하기 위한 태그

body 태그
: 웹문서를 출력하기 위한 Document 영역을 제공하기 위한 태그
→ 하위태그 : header(머릿부), navi(메뉴), section(몸체부), article(본문), aside(보조문), footer(꼬릿부), h1(제목), p(단락), img(이미지 출력), form(사용자로부터 입력받아 출력) 등
→ body 태그의 하위태그를 박스모델(Box Model) 태그로 표현할 수 있으며 블럭 레벨 태그와 인라인 레벨 태그로 구분할 수 있다.

블럭 레벨 태그의 하위태그로 인라인 레벨의 태그 사용이 가능하다.
(인라인 레벨 태그의 하위 태그로 블럭 레벨 태그를 사용하는 것은 불가능하다.)

블럭 레벨 태그(Block Level Tag)
: 하나의 태그가 전체 라인을 모두 사용하는 태그
→ div, h1, p, ol, ul 등

인라인 레벨 태그(Inline Level Tag)
: 하나의 태그가 전체 라인(Line)의 일부분만 사용하는 태그
→ span, img, input, select 등

hn 태그 : 태그내용을 문단의 제목으로 출력하기 위한 태그 (n : 1~6 - 크기)
align 속성 : 태그내용을 정렬하기 위한 속성 : left(기본 정렬), right, center, justify
title 속성 : 툴팁 기능을 이용하여 설명문(속성값)을 제공하는 속성

<h1 align="left" title = "문단의 제목을 표현합니다.">문단제목-1</h1> 
	<h2 align="center">문단제목-2</h2>
	<h3 align="right">문단제목-3</h3>
	<h4 align="justify">문단제목-4</h4> <!-- 양쪽정렬 -->
	<h5>문단제목-5</h5>
	<h6>문단제목-6</h6>

hr 태그 : 수평선을 출력하기 위한 태그
width 속성 : 태그의 폭을 변경하기 위한 속성 - 속성값에는 '크기'를 작성하면 된다.
→ 크기 또는 위치를 표현하는 단위 : px(기본), %(백분율) - 상대값

<hr>
<hr align="left" width="600">
<hr align="left" width="50%"> <!--상대값-->

p 태그
: 태그내용을 문단으로 출력하기 위한 태그
→ 태그내용이 박스모델의 폭을 벗어날 경우 자동으로 줄바꿈 처리된다.
→ HTML 문서에서 엔터(Enter)로 줄바굼 처리 불가능하며 다수의 공백은 하나의 공백으로 처리된다.

<p>CSL(Client Script Language - HTML, CSS, JavaScript)와
SSL(Server Script Language - Servlet, JSP)를            배우도록 하겠습니다.</p>

br 태그
: 줄바꿈 처리하기 위한 태그

<p>HTML은 웹문서를 구조적으로 표현하기 위한 언어이며<br> CSS는 웹문서를 디자인하기 위한 언어입니다.

HTML에서 사용 불가능한 문자는 회피문자(Escape Character)로 표현된다.
→   : 공백 / < : < 문자 / > : > 문자 / & : & 문자 등

<p>&lt;홍길동&gt;님 &amp; &lt;임꺽정&gt;님&nbsp; &nbsp; &nbsp; &nbsp; 반갑습니다.</p>

pre 태그 : 태그내용을 있는 그대로 출력하는 태그 (보여지는 그대로 출력)

<pre>홍길동님,     만나서 반갑습니다.
다음에 다시 만나요.</pre>

div 태그 : 범위를 설정하기 위한 태그 - 블럭 레벨 태그

span 태그 : 범위를 설정하기 위한 태그 - 인라인 레벨 태그

style 속성 : CSS 스타일 관련 속성과 속성값 설정

<div style="font-size: 24px;" >오늘은 <span style="color:red;">2023년 05월 24일 수요일</span>입니다. 
내일은 <span style="color: green;">2023년 05월 25일 목요일</span>입니다.</div>

img 태그
: 이미지 파일을 제공받아 출력하기 위한 태그
→ 웹에서 사용하는 이미지 파일 : GIF 파일, PNG 파일, JPEG 파일 등

가장 크기가 작고 해상도가 낮은 파일은 GIF 파일이다.(간단한 그림 출력할 때 많이 사용)
PNG는 GIF보다 해상도가 더 높다. (로고 등 출력할 때 많이 사용)
JPEG 해상도와 압축률 모두 가장 높다.

alt 속성 : 출력이미지에 대한 설명을 속성값으로 설정 - 음성 지원이 가능하다는 장점이 있다.

src 속성 : 이미지 파일을 경로(URL 주소)를 속성값으로 설정
→ src 속성으로 설정된 이미지 파일이 없는 경우 404 상태코드를 전달한다.

<img alt="다음로고" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">

img 태그의 폭을 변경하여 출력될 이미지의 크기 변경이 가능하다.
→ 이미지의 폭을 변경하면 높이는 자동 변경된다.

<img alt="코알라" src="http://localhost:8000/web/html/Koala.jpg" width="200">

웹문서와 동일한 서버에 존재하는 웹자원(WebContext)은 URL 주소에서 서버 접속 관련 정보를 생략하여 표현이 가능하다.
- 프로토콜, 서버명, 포트번호 생략 가능

절대경로 표현 방법 : 웹자원의 경로를 서버의 최상위 디렉토리(Root Directory)를 기준으로 표현
상대경로 표현 방법 : 웹자원의 경로를 현재 요청한 웹자원의 경로를 기준으로 표현

<!-- 절대경로 표현 방법 -->
<img alt="코알라" src="/web/html/Koala.jpg" width="200">
	
<!-- 상대경로 표현 방법 -->
<img alt="코알라" src="Koala.jpg" width="200">

<!-- 절대경로 -->
<img alt="펭귄" src="/web/html/images/Penguins.jpg" width="200">
<!-- 상대경로 -->
<img alt="펭귄" src="images/Penguins.jpg" width="200">
	
<!-- 절대경로 -->
<img alt="튤립" src="/web/Tulips.jpg" width="200">
<!-- 상대경로 -->
<img alt="튤립" src="../Tulips.jpg" width="200">

li 태그
: 목록을 출력하기 위한 태그
→ ol 태그 또는 ul 태그의 하위태그로 사용

ul 태그 : 목록에 블릿(기호)을 제공하여 출력하기 위한 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>li 태그</h1>
	<hr>
	<h3>유채방</h3>
	
	<ul>
		<li>도미토리, 동성(또는 가족)</li>
		<li>4인실</li>
		<li>공동 취사실 및 욕실(화장실)</li>
		<li>비용
			<ul>
				<li>비수기 : 1인 20,000원</li>
				<li>성수기 : 1인 25,000원</li>
			</ul>
		</li>
	</ul>
</body>
</html>

ol 태그 : 목록에 순서값을 제공하여 출력하기 위한 태그

</ul>
	<hr>
	<h3>동백방</h3>
	<!-- ol 태그 : 목록에 순서값을 제공하여 출력하기 위한 태그  -->
	<ol>
		<li>도미토리, 동성(또는 가족)</li>
		<li>4인실</li>
		<li>공동 취사실 및 욕실(화장실)</li>
		<li>비용
			<ol>
				<li>비수기 : 1인 20,000원</li>
				<li>성수기 : 1인 25,000원</li>
			</ol>
		</li>
	</ol>

dl 태그
: 정의 목록(Definition List)을 출력하기 위한 태그 (어떤 목록에 대한 정의를 내릴 때)
→ 하위태그 : dt, dd

dt 태그 : 정의 용어를 출력하기 위한 태그
dd 태그 : 정의 설명(Definition Description)를 출력하기 위한 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>dl 태그</h1>
	<hr>
	<h3>유채방</h3>
	<dl>
		<dt>대상</dt>
		<dd>도미토리, 동성(또는 가족) 1팀</dd>
		
		<dt>크기</dt>
		<dd>4인실</dd>
		
		<dt>주의사항</dt>
		<dd>공동 취사실 및 욕실(화장실)</dd>
		
		<dt>비용</dt>
		<dd>비수기 : 1인 20,000원</dd>
		<dd>성수기 : 1인 25,000원</dd>
	</dl>
</body>
</html>

table 태그
: 표(Table)를 출력하기 위한 태그
→ 하위태그 : 행(Row)를 출력하기 위한 태그 - 하위태그 : th 또는 td

tr 태그 : 행(Row)를 출력하기 위한 태그 - 하위태그 : th 또는 td
→ 모든 tr 태그의 셀의 갯수는 같도록 설정하는 것을 권장

border 속성 : 0(외곽선 미출력 - 기본) 또는 1(외곽선 출력)을 속성값으로 설정하면 된다.
→ 상위태그에 적용된 디자인 속성은 하위태그로 상속되어 적용된다.

th(td) 태그 : 열(Column)을 출력하기 위한 태그
→ th 태그 또는 td 태그의 태그 내용을 이용하여 값 출력 - 셀(Cell)이라고 부르기도 한다.
→ th 태그는 태그내용을 가운데 정렬하여 굵게 출력 - 컬럼명 출력할 때 많이 사용한다.
→ 셀의 폭은 태그내용에 의해 자동 변경된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>table 태그</h1>
	<hr>
	<table border="1">
		<tr>
			<th>번호</th><th>이름</th><th>주소</th>   <!-- 1행 3열 -->
		</tr>
		<tr>
			<td>1000</td><td>홍길동</td><td>서울시 강남구</td> <!-- 일반적으로 값 출력할 땐 td 사용 -->
		</tr>
		<tr>
			<td>2000</td><td>임꺽정</td><td>수원시 팔달구</td> 
		</tr>
		<tr>
			<td>3000</td><td>전우치</td><td>인천시 월미구</td> 
		</tr>
	</table>
</body>
</html>

HTML5에서는 표를 구조적으로 표현하기 위한 thead 태그, tbody 태그, tfooter 태그를 사용한다.

summary 속성 : 표에 대한 설명을 속성값으로 설정
caption 태그 : 표 제목을 출력하기 위한 태그

rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정
colspan 속성 : 병합할 열의 갯수를 속성값으로 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>

<!-- 스타일 속성은 추후 css에서 배움 -->
<style type="text/css">
table {
	border: 1px solid black;
	border-collapse: collapse;
}

th, td {
	border: 1px solid black;
	width: 100px;
	padding: 20px;
	text-align: center;
}	

caption {
	font-size: 24px;
	line-height: 40px;
	letter-spacing: 15px;
}

</style>
</head>
<body>
	<h1>tbody 태그</h1>
	<hr>
	<table summary="객실 안내">
		<caption>객실표</caption>
		<thead>
			<tr>
				<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">20,000원</td>
			</tr>
			<tr>
				<td>동백방</td><td>2인실</td>
			</tr>
			<tr>
				<td>가족실</td><td colspan="2">60,000원(최대 4인)</td>
			</tr>
		</tbody> 
		<tfoot>
			<tr>
				<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
		</tfoot>
	</table>
</body>
</html>

a 태그 : 클릭 이벤트로 다른 웹문서(웹프로그램)를 요청하기 위한 태그
→ 하이퍼 링크(Hyper Link) 기능을 제공하는 태그 - 페이지를 이동할 때 사용한다.

href 속성 : 클릭 이벤트가 발생될 경우 요청한 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정
→ 태그내용(텍스트 또는 이미지)을 클릭한 경우 클라이언트 브라우저의 주소창의 URL 주소가 href 속성값으로 변경되어 요청하고 웹문서(웹프로그램)의 결과를 응답받아 출력

	<a href = "http://www.daum.net">다음</a>&nbsp;&nbsp;&nbsp;
	<a href = "http://www.naver.com">네이버</a>&nbsp;&nbsp;&nbsp;
	<a href = "http://www.google.com">구글</a>

요청 URL 주소 뒤에 ? 기호를 붙이고 [이름=값&이름=값&...] 형식으로 요청 웹프로그램에게 값 전달 가능 - 질의문자열(QueryString)를 이용한 값 전달

<a href="/web/html/07_kor.html?name=kim"><img alt="kor" src="/web/html/images/kor.png"></a>

target 속성 : _self(현재 브라우저 - 기본), _blank(새로운 브라우저), _top(최상위 브라우저), _parent(부모 브라우저), _child(자식 브라우저), 내부 브라우저(iframe 태그)의 name 속성값

<a href="07_eng.html" target="_blank"><img alt="eng" src="images/eng.png"></a>

>> 새 창으로 열린다.

저작자표시

'학원 > 복기' 카테고리의 다른 글

[HTML] 제출이벤트 / label태그 / textarea 태그 / select 태그 / datalist 태그 / fieldset 태그 (0)	2023.05.28
[HTML] 리퀘스트 메세지 / form 태그 / input 태그 (0)	2023.05.25
[HTML] HTTP 요청과 응답 (0)	2023.05.24
[JDBC] JAVA에서 저장 프로시저 호출 / Properties 파일 / DBCP 클래스 / UCP 라이브러리 / DAO 디자인 패턴 (0)	2023.05.17
[JDBC] JDBC란? / JDBC 설치 / JDBC 프로그램 작성법 (0)	2023.05.15

개뿌

[HTML] HTML 언어란? / HTML 태그와 속성

HTML(Hyper Text MarkUp Language)

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 언어란? / HTML 태그와 속성

HTML(Hyper Text MarkUp Language)

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바