HTML

organize/웹기초

HTML

001cloudid 2024. 10. 2. 11:20

728x90

목차

1. HTML이란?

2. HTML 구조

3. 태그

1. HTML이란?

웹 문서를 만드는 언어이다.

HTML은 Hyper Text Markup Language의 약자이다.

HyperText란? 문서를 서로 연결해주는 링크를 의미한다. 인터넷에서 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결할 수 있다.

Markup이란? 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시한다는 의미이다.

2. HTML 구조

<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
<html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 <html>태그를 만나면 </html>까지 소스를 읽어 화면에 표시
<head>~</head> : 웹 브라우저가 웹 문서를 헤석하는 데 필요한 정보를 입력하는 부분
<title>~</title> : 웹 문서의 타이틀
<body>~</body> : 실제로 웹 브라우저 화면에 나타나는 내용

3. 태그

제목을 나타내는 태그
h1이 가장 큰 제목이고, 점점 작아짐.

ex)
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

텍스트 단락을 만드는 태그

내용

ex)
본문의 내용은 여기에1
본문의 내용은 여기에2
본문의 내용은 여기에3

줄 바꿈

편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시

brake를 뜻한다.
ex)
HTML(Hyper Text Markup Language) : 웹 문서를 만드는 언어 
안녕하세요 
안녕하세요

인용할 때 쓰는 태그

사용빈도는 그리 높지 않음.

<blockquote> 인용문 내용 </blockquote>

ex)
<blockquote>인용문 내용1 인용문 내용2</blockquote>

글자 진하게 태그

내용

글자 진하게 강조 태그

내용

기울기 태그

내용

밑줄 태그

내용

취소선 태그

<s> 내용 </s>

위첨자 태그

내용

아래첨자 태그

내용

영역 표시 태그 : <div> 내용 </div>

작은 영역 표시 태그 : 내용

※ 주로 영역 표 시작은 영역 표시로 쓰인다.

<div>영역 표시 작은 영역 표시</div>

텍스트 굵게 강조

굵게 강조할 텍스트

주석 달기

Ctrl + Shift + C
Ctrl + Shift + /

모양 정렬

Ctrl + Shift + F

공백

 

※공백과 띄어쓰기 차이

공백(\&nbsp\;)를 여러 번 작성하면 여러 번 작성한 만큼 공백이 생기지만, 띄어쓰기(space bar)는 여러 번 작성해도 한 번만 인식

목록에는 순서가 있는 것과 순서가 없는 것이 있다.

목록 태그는 <li></li>인데, 단독으로 사용할 수 없다. 부모 태그가 있어야 하는데 ,

부모 태그로는 '순서가 있는 목록 태그 : <ol> </ol> / 순서가 없는 목록 태그 : <ul> </ul>'이다.

<ol>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ol>

<ol>태그의 속성으로는 type과 start가 있다.

<ol>태그 안에 type="A", type="a", type="I", type="i"를 써준다면 순서목록의 타입을 바꿀 수 있다.

기본적으로는 숫자이다.

<ol type="A">
<li>목록1</il>
<li>목록2</il>
<li>목록3</il>
</ol>

또한 시작점도 바꿀 수 있는데,

<ol type="A" start="4">
<li>목록4</li>
<li>목록5</li>
<li>목록6</li>

순서가 없는 목록 태그

<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>

ul 속성(type)을 이용하여 타입을 변경해 줄 수 있다.

<ul type="circle">
<ul type="square">

설명 목록을 만드는 태그

용어와 그에 대한 설명 리스트 형식으로 정의 때 사용하는 태그 : <dl> 내용 </dl>

용어나 이름을 나타내는 태그 : <dt> 내용 </dt>

요소와 해당 용어에 대한 설명을 나타내는 태그 : <dd> 내용 </dd>

<h1>설명 목록</h1>
<dl>
<dt>이름</dt>
<dd>설명1</dd>
<dd>설명2</dd>
</dl>

표를 만드는 태그

표 만들기 위해서 필요한 태그는 기본적으로 <table>,<caption><tr>,<td>,<th>으로 있다.

표의 시작과 끝을 알려주는 태그 : <table></table>

표 제목을 알려주는 태그 : <caption></caption>

행을 만드는 태그 : <tr>

셀을 만드는 태그 : <td></td>, <th></th>

※tr은 table row, td는 table date, th는 table head

<table>
<caption>표 제목</caption>
<tr><th>1열 제목</th><th>2열 제목</th></tr>
<tr><td>1행 1열</td><td>1행 2열</td></tr>
<tr><td>2행 1열</td><td>2행 2열</td></tr>
</table>

그림 13과 같이 행이 합쳐진 경우를 만들고 싶다면, rowspan, colspan 속성을 사용한다.

<table border="2">
<caption>선물용과 가정용 상품 구성</caption>
<tr><th>용도</th><th colspan="3">중량, 개수, 가격</th></tr>
<tr><td rowspan="2">선물용</td><td>3kg</td><td>11~16과</td><td>35,000원</td></tr>
<tr> <td>5kg</td><td>18~26과</td><td>52,000원</td></tr>
<tr><td rowspan="2">가정용</td><td>3kg</td><td>11~16과</td><td>30,000원</td></tr>
<tr> <td>5kg</td><td>18~26과</td><td>47,000원</td></tr>
</table>

colspan과 rowspan을 이용해서 합쳐주면 된다.

표의 구조를 지정하는 태그

표의 제목 태그 : <thead></thead>

표의 본문 태그 : <tbody></tbody>

표의 요약 태그 : <tfoot></tfoot>

이미지 삽입

웹에서 사용하는 이미지 형식은 jpg/jpeg, gif, png를 가장 많이 사용할 것이다.

html에 이미지를 삽입해 보자. <img>태그를 사용하면 된다.

<img src="이미지 파일 경로" alt="대체용 텍스트">

<img>태그에 쓰이는 속성은 이미지 파일 경로를 나타내는 src 속성과 이미지를 텍스트로 대신 설명하는 alt 속성,

이미지 크기를 조절하는 width, height 속성이 있다.

이미지가 html파일과 같은 경우에는 <img>태그 안에 폴더명/파일명으로 어렵지 않게 찾을 수 있을 것이다.

<img src="1.jpg" width="400" height="400">
<img src="2.jpg" width="40%" height="40%">
px : 이미지 크기를 픽셀단위로 지정, 고정값
% : 이미지 크기를 % 지정, 웹 브라우저 너비, 높이 기준으로 이미지 크기를 표시.

하지만 이미지 경로가 같은 폴더에 없는 경우에는 하나하나 찾아줘야 한다.
../폴더명/파일명 같은 경우에는 상위(부모) 폴더로 가기
../폴더명/폴더명/파일명 : 좀 더 상위 폴더에 이미지가 있는 경우

※절대참조

이미지 파일을 절대 참조로 찾고자 한다면, <img src="프로젝트/폴더/내부폴더1/내부폴더2/.../찾고자하는이미지>로 하면 된다.

webProject/src/main/webapp/Html1 안의 1.jpg 이미지 파일을 찾고자 한다.

그렇다면 <img src="/webProject/Html1/ 1.jpg"> 이렇게 작성하면 된다.

※<img src="/webProject/src/main/webapp/Html1/1.jpg"> 이렇게 작성하지 않는 이유는 Dynamic Web Project 생성 시 Content directory로 세팅되어 "src/main/webapp"이 기본적으로 세팅되어 있기 때문이다.

<http://localhost:8080/webProject/Html1/1jpg

/프로젝트/폴더1/폴더2/.../이미지.이미지형식

<img src="/webProject/src/main/webapp/Html1/1.jpg" alt="경로가 잘못됨">


<img src="/webProject/Html1/1.jpg">
<img src="/webProject/Html1/2.jpg">
<img src="/webProject/Html1/img/3.jpg">
<img src="/webProject/Html1/img/4.jpg">
<img src="/webProject/imgs/5.jpg">
<img src="/webProject/imgs/6.jpg">
<img src="/webProject/imgs/img/7.jpg">
<img src="/webProject/imgs/img/8.jpg">

멀티미디어 파일 삽입

다양한 멀티미디어 파일(오디오, 비디오, 자바 애플릿, PDF 등)을 삽입할 때는 <object>태그를 사용함.

<object width="너비" height="높이" date="파일"></object>

date 속성에 보여줄 멀티미디어 파일을 지정하고, width, height 속성을 사용해 플레이어의 크기를 지정함

오디오, 비디오, 이미지 등 다양한 멀티미디어를 삽입할 수 있는 태그는 <embed>이다.

<embed src="파일 경로" width="너비" height="높이">

src 속성을 사용해 삽입할 멀티미디어 파일을 지정하고, width, height 속성을 사용해 플레이어의 크기를 지정함.

<audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed>태그를 사용하여 멀티미디어 파일을 삽입함.

PDF 파일 삽입

<object width="900" height="800" data="medias/product.pdf"></object>

오디오, 비디오, 이미지 멀티미디어 파일 삽입

<embed src="medias/spring.mp3">-

<audio src="medias/spring.mp3" controls></audio>

<video src="medias/salad.mp4" controls width="700"></video>
<video src="medias/flower.mp4" controls width="640" muted autoplay loop></video>

※멀티미디어 파일의 종류
비디오 : mp4(모든 브라우저에서 동작), webm
오디오 : mp3(모든 브라우저에서 동작), mp4, m4a

하이퍼링크

다양한 파일 형식을 넣을 수 있음.

링크를 삽입하는 태그 <a>태그와 href 속성

<a href="링크할 주소">텍스트 또는 이미지</a>

네이버

<a href="test1.html">test1</a> 
<a href="ex1.html">ex1</a> 
<a href="../imgs/img/7.jpg">7.jpg</a> 
<a href="medias/product.pdf">product.pdf</a>

하이퍼링크 새로운 창에서 연결하기

target="_blank"를 a태그에 넣어주면 된다.
<a href="
https://www.naver.com" target="_blank">네이버

<a href="test1.html"target="_blank">test1</a> 
<a href="ex1.html"target="_blank">ex1</a> 
<a href="../imgs/img/7.jpg"target="_blank">7.jpg</a> 
<a href="medias/product.pdf" target="_blank">product.pdf</a>

이미지에 하이퍼링크 삽입하기

a태그+img태그
<a href="test2.html" target="_blank"><img src="1.jpg"></a> 
<a href="test3.html" target="_blank"><img src="img/3.jpg"></a>

하이퍼링크에 걸린 파일을 다운로드하기

a태그 href="파일명" download" 
<a href="../imgs/5.jpg" download>5.jpg</a> 
<a href="medias/product.pdf" download>product.pdf</a>

<ol>
<li><a href="ex2.html">ex2.html 연결</a></li>
<li><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></li>
<li><a href="2.jpg" download>2.jpg 다운로드</a></li>
</ol>

<dt>
<dd><a href="ex2.html">ex2.html 연결</a></dd>
<dd><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></dd>
<dd><a href="2.jpg" download>2.jpg 다운로드</a></dd>

문서 내 하이퍼링크

문서 내에 특정 위치를 찾아가는 하이퍼링크 페이지 안에 페이지 찾기

<ul>
<li><a href="#m1">메뉴1(href="#1")</a></li>
<li><a href="#m2">메뉴2(href="#2")</a></li>
<li><a href="#m3">메뉴3(href="#3")</a></li>
</ul>

 
 
 
 
 
<h2 id="m1">메뉴 1</h2>
id='m1'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m2">메뉴2</h2>
id='m2'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m3">메뉴3</h2>
id='m3'표시 
<a href="#top">맨 위로</a>

폼 태그

<form [속성="속성값"]>여러 폼 요소</form>

form 태그의 속성

method="get" : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남

method="post" : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음.

name=" " : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정(백엔드에서는 반드시 써줘야 함.

action=" " : form태그 안의 내용을 처리해 줄 서버 프로그램을 지정

target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.

autocomplete="on/off" : 자동 완성 기능. 기본값은 on.

폼 요소를 그룹으로 묶는 태그

<fieldset> 태그는 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용

<fieldset [속성="속성값"]> </fieldset>

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있음

<fieldset>
<legend> 그룹 이름 </legend>
</fieldset>

여러 줄을 입력하는 텍스트 영역 태그

<textarea>태그는 게시판에 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용

<textarea>내용</textarea>

속성으로는 텍스트 영역의 가로 너비를 문자 단위로 지정하는 cols, 텍스 영역의 세로 길이를 줄 단위로 지정하는 rows가 있음.

드롭다운 목록을 만들어주는 태그

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용.

<select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option>태그를 사용해 원하는 항목을 추가.

<option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정

<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select>

<select>태그의 속성

size : 화면에 표시할 드롭다운 항목의 개수를 지정

multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

<option>태그의 속성

value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정

selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정

버튼을 만들어주는 태그

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

폼 요소에 레이블을 붙이는 태그

<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용.

레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말함.

<lable>태그를 사용하면 폼 요소와 레이블 ㅌ텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음.

<label>레이블명<input></label>

웹 폼의 다양한 곳에서 사용하는 태그

아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input>태그를 이용.

<input>태그의 type과 속성

텍스트와 비밀번호를 나타내는 type 속성

<input type="text">
<input type="password">

size : 텍스트와 비밀번호 필드의 길이를 지정

value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용, 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시, 비밀 번호 필드에서 사용하지 않는 속성

maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정

자동으로 입력 커서를 갖다 놓는 속성

<input type="텍스트입력 필드" autofocus required>

페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있음.

힌트를 표시해 주는 속성

<input type="텍스트입력필드" placeholder=텍스트 필드에 표시될 내용">

읽기 전용 필드를 만들어주는 속성

<input type="텍스트입력필드" readonly">

사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음. readonly 속성은 해당 필드를 읽기 전용으로 바꿈

필수 입력 필드를 지정하는 속성

반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.

<input type="텍스트입력 필드" autofocus required>

다양한 용도에 맞게 입력하는 type 속성

<input type="search">
<input type="url">
<input type="email">
<input type="tel">

체크 박스와 라디오 버튼을 나타내는 type 속성

<input type="checkbox"> : 주어진 여러 항목에서 2개 이상을 선택할 수 있는 체크 박스를 넣음
<input type="radio"> : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음

value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정. 이 값은 영문 또는 숫자여야 하며 필수 속성

checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. 속성값은 따로 없음

숫자 입력 필드를 나타내는 type 속성

<input type="number">
<input type="range">

min : 필드에 입력할 수 있는 최솟값을 지정. 기본값 0

max : 필드에 입력할 수 있는 최댓값을 지정. 기본값 100

step : 숫자 간격을 지정. 기본값 1

value : 필드에 표시할 초깃값

날짜 입력을 나타내는 type 속성

<input type="date | month | week">

min : 범위를 제한할 때 사용

max : 범위를 제한할 때 사용

step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정

value : 기본적으로 표시할 날짜 지정

시간 입력을 나타내는 type 속성

<input type="time | datetime | datetime-local">

min : 범위를 제한할 때 사용

max : 범위를 제한할 때 사용

step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정

value : 기본적으로 표시할 시간 지정

전송, 리셋 버튼을 나타내는 type 속성

<input type="submit" value="버튼에 표시할 내용">
<input type="reset" value="버튼에 표시할 내용">

submit은 폼에 입력한 정보를 서버로 전송. 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐

reset은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 지우는 역할을 함. value 속성을 사용해서 버튼에 표시할 내용을 지정

이미지 버튼을 나타내는 type 속성

<input type="image" src="이미지 경로" alt="대체 텍스트">

submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냄

기본 버튼을 나타내는 type 속성

<input type="button" value="버튼에 표시할 내용">

파일을 첨부할 때 사용하는 type 속성

<input type="file">

히든 필드 만들 때 사용하는 type 속성

<input type="hidden" name="이름" value="서버로 넘길 값">

히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력

728x90

'organize > 웹기초' 카테고리의 다른 글

백엔드 엔드(Back-End) (0)	2024.12.18
CSS (0)	2024.10.03

현재글HTML

001cloudid

HTML

1. HTML이란?

2. HTML 구조

3. 태그

'organize > 웹기초' 카테고리의 다른 글

'organize/웹기초'의 다른글

티스토리툴바

HTML

1. HTML이란?

2. HTML 구조

3. 태그

'organize > 웹기초' 카테고리의 다른 글

'organize/웹기초'의 다른글

관련글

티스토리툴바