Chap.1 HTML[HTML5 기본 태그] - 제목 글자 태그, 본문 태그, 하이퍼링크 태그, 글자 모양 태그, 목록 태그, 테이블 태그, 이미지 태그, 기본 공간 분할 태그, 시맨틱 태그, 입력 양식 태그
HTML5 기본 태그
제목 글자 태그, 본문 태그, 하이퍼링크 태그, 글자 모양 태그, 목록 태그, 테이블 태그, 이미지 태그, 기본 공간 분할 태그, 시맨틱 태그, 입력 양식 태그
제목 글자 태그
-
제목 글자 태그
- 문서의 제목을 표현할 때 사용
- h : Heading을 의미
-
text_header.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 + CSS3 Text</title>
</head>
<body>
<h1>제목 글자 태그 1</h1>
<h2>제목 글자 태그 2</h2>
<h3>제목 글자 태그 3</h3>
<h4>제목 글자 태그 4</h4>
<h5>제목 글자 태그 5</h5>
<h6>제목 글자 태그 6</h6>
</body>
</html>결과
-
특수문자 표기
- 연속된 공백을 모두 표시하려면 사용
- 외에 다음과 같은 특수문자를 사용하여 공백, 괄호 등을 화면에 표시할 수 있음
<!DOCTYPE html>
<html>
<head>
<title>Documents</title>
</head>
<body>
<h1>Hello © < > & Hello</h1>
<p>안녕
하세요...
</p>
<p>테
스트
</p>
</body>
</html>결과
본문 태그
-
p 태그
- Paragraph를 의미하며 문단 하나를 생성
- 제목 다음에 나오는 본문 입력시 사용
- 본문 태그 – p 태그
-
br 태그
- 다른 글자 내부에 삽입 가능
-
hr 태그
- 다른 글자 내부에 삽입 불가능하나 정상적으로 출력됨
text_content.html
<body>
<h1>홍차</h1>
<hr/>
<h2>정의</h2>
<p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. 동양에서는 찻물
의 빛이 붉기 때문에 홍차라고 부르지만, 서양에서는 찻잎의 색깔 때문에 'black tea'라
고 부른다.</p>
<br/>
<h2>등급</h2>
<p>홍차는 여러 가지로 등급이 매겨진다. 일반적으로 찻잎의 모양에 따른 등급과 가
공 상태에 따른 등급을 조합하여 표시한다.</p>
<p>- 브로큰 페코</p>
<p>- 브로큰 페코 수숑</p>
<p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>결과
하이퍼링크 태그
-
하이퍼텍스트
- 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서
- a 태그 사용 : 줄을 바꾸지 않음 (br/ 필요)
-
a 태그
- Anchor 를 의미
- 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용
-
a 태그의 href 속성
- Hyper Reference를 의미
- 어떤 페이지로 이동할지 웹 브라우저에 알려줌
- href 속성의 여러 경로
▪ 절대 경로 : 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는 파일의 위치를 나타내 는 경로
▪ 상대 경로 : 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로
▪ 아이디 경로 : 현재 웹 페이지 내부에 있는 다른 태그의 id 속성
▪ 메일 경로 : 메일 주소
-
text_anchor.html
<!DOCTYPE html>
<html>
<head>
<title>HTML TEXT Basic Page</title>
</head>
<body>
<a href="http://google.co.kr">구글</a><br/>
<a href="http://naver.com/">네이버</a><br/>
<a href="http://daum.com/">다음</a><br/>
<a href="/test01.html">테스트</a><br/>
<!-- 절대경로 -->
<a href="sub/test02.html">테스트2</a><br/>
<!-- 상대경로 sub 폴더 -->
</body>
</html>결과
-
웹 페이지 내부에 연결하기 - text_anchorInner.html
- h1 태그에서 id 속성 입력후 a 태그의 속성에 ‘#id 속성’ 입력
<body>
<a href="http://hanb.co.kr">한빛미디어</a><br/>
<a href="http://naver.com/">네이버</a><br/>
<a href="http://daum.com/">다음</a><br/>
<a href="#alpha">Alpha 부분</a>
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
<hr/>
<h1 id="alpha">Alpha</h1>
<p> . . . </p>
<h1 id="beta">Beta</h1>
<p>. . . </p>
<h1 id="gamma">Gamma</h1>
<p>....</p>
</body>
</html>결과
- 빈링크
▪ 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 “#"을 입력. 이를 빈 링크라고 부름
최상위 스크롤 이동
<body id="top">
...
<a href="#top">Top</a>
다른 파일의 스크롤 이동
<a href="/text_anchorInner.html#Beta">Beta로 이동</a>
글자 모양 태그
-
글자 모양 태그
- HTML5 에는 big 태그가 사라짐
-
글자 모양 태그의 특징
- 글자 모양 태그는 모두 단독으로 사용 가능
- 제목 과 본문 글자 모양 태그 내부에 입력가능
- 글자 모양 태그 내부에 다른 글자 모양 태그를 삽입 가능
- 글자 모양 태그 내부에 제목과 본문 글자 태그는 사용 불가능
요즘은 CSS에서 처리한다.
-
웹 표준을 위반한 글자 모양 태그 사용 예
<i>
<hl>웹 표준 위반</hl>
<p>웹 표준 위반</p>
</i>
목록 태그
-
네비게이션 목록
- 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼을 모아둔 것
-
글머리 기호 목록 만들기 - list_unorderd.html
<!DOCTYPE html>
<html>
<head>
<title>HTML List Basic Page</title>
</head>
<body>
<ul>
<li>사과</li>
<ul>
<li>빨간 사과</li>
<li>노란 사과</li>
<li>파란 사과</li>
</ul>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
</html>결과
-
순서 번호 목록 만들기 - list_orderd.html
<!DOCTYPE html>
<html>
<head>
<title>HTML List Basic Page</title>
</head>
<body>
<ol>
<li>사과</li>
<ol>
<li>빨간 사과</li>
<li>노란 사과</li>
<li>파란 사과</li>
</ol>
<li>바나나</li>
<li>오렌지</li>
</ol>
</body>
</html>결과
테이블 태그
-
테이블 태그의 종류
-
테이블 태그는 다음과 같은 계층 구조로 작성
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Basic Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>th</th>
<th>th 볼드체 중앙 정렬</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody 태그 내부</td>
<td>tbody 태그 내부</td>
</tr>
<tr>
<td>td 좌측 정렬</td>
<td>td</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot 태그 내부</td>
<td>tfoot 태그 내부</td>
</tr>
</tfoot>
</table>
</body>
결과
-
th와 td 태그에는 셀 병합 속성 입력 가능
- colspan과 rowspan 속성
-
행/열 합침 표 만들기 - table_span.html
<body>
<table border="0">
<tr>
<th colspan="2">지역별 홍차</th>
</tr>
<tr>
<th rowspan="3">중국</th >
<td>정산소종</td>
</tr>
<tr><td>기문</td></tr>
<tr><td>운남</td></tr >
<tr>
<th rowspan="4">인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr><td>실론</td></tr>
<tr><td>다질링</td></tr>
<tr><td>닐기리</td></tr>
</table>
</body>결과
이미지 태그
-
이미지 태그
- img 태그 사용
- 단독으로 사용
-
img 태그의 속성
-
image_basic.html
- Penguins.jpg 파일을 같은 디렉토리에 저장
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Basic Page</title>
</head>
<body>
<a href="images/Penguins.jpg"><img src="images/Penguins.jpg" alt="펭귄
" width="300"/></a>
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300"/>
</body>
</html>결과
-
img 태그의 src 속성에는 웹에 존재하는 이미지의 경로 사용 가능
-
의미 없는 이미지
- 의미 없는 이미지는 http://placehold.it 에서 생성가능.
- 이미지 경로에 ‘http://placehold.it/너비x높이’ 형식으로 입력하면 다음과 같은 이미지를 얻을 수 있다.
기본 공간 분할 태그
-
공간을 분할하는 이유
- CSS로 원하는 레이아웃을 구성할 수 있기 때문
-
div
- 대표적인 공간 분할 태그
-
div 태그
- 공간을 블록 형식으로 분할
<!DOCTYPE html>
<html>
<head>
<title>HTML Space Basic Page</title>
</head>
<body>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
</body>
</html>결과
-
span 태그
- 공간을 인라인 형식으로 분할
<!DOCTYPE html>
<html>
<head>
<title>HTML Space Basic Page</title>
</head>
<body>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
</body>결과
-
블록 형식과 인라인 형식은 일반 태그에도 적용
- h1과 p 태그는 블록 형식
- a와 i 태그는 인라인 형식
시맨틱 태그
-
시맨틱의 의미
- 시맨틱(semantic) : “의미론적인”
-
시맨틱 웹
- 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹
-
플러그인을 사용하면 모든 웹 브라우저에서 사용 가능
-
시맨틱 태그를 사용해 페이지를 구성하면 가독성이 좋아짐
입력 양식 태그
-
입력 양식
- 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법
- 입력 양식 태그 사용
-
form 태그
- 입력 양식 생성 코드와 실행 결과
<body>
<form>
<input type="text" name="search" />
<input type="text" name="query" />
<input type="submit" />
</form>
</body>결과
-
form 태그
- action 속성: 주소
- method 속성: 값 전달 방법 지정
-
GET 방식과 POST 방식
-
입력 양식 태그
-
form_basic.html
<body>
<form>
<!-- 사용자가 입력하는 입력 양식 -->
<input type="text" name="text" value="text"/><br/>
<input type="password" name="password" value="password"/><br/>
<input type="file" name="file" value="file"/><br/>
<input type="checkbox" name="checkbox" value="checkbox"/>체크박스<br/>
<input type="radio" name="radio" value="radio"/>라디오<br/>
<!-- 보이지 않는 입력 양식 -->
<input type="hidden" name="hidden" value="hidden"/><br/>
<!-- 버튼 -->
<input type="button" value="button"/><br/>
<input type="reset" value="reset"/><br/>
<input type="submit" value="submit"/><br/>
<input type="image" src="http://placehold.it/100x100"/>
</form>
</body>결과
-
label 태그
- label 태그의 for 속성에 input 태그의 id 속성을 입력하여 label 태그가 어떤 input 태그를 설명하는지 지정가능.
- label 태그를 더블 클릭하면 자동으로 input 태그에 초점이 맞춰짐. - focus
-
form_radio.html
- 라디오 버튼의 name 속성을 이용하여 여러 대상 중 하나만 선택 (name이 같아야한다.)
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username"/></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="m"/>
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" value="w"/>
<label for="woman">여자</label>
<input id="man" type="radio" name="sports" value="m"/>
<label for="man">축구</label>
<input id="woman" type="radio" name="sports" value="w"/>
<label for="woman">야구</label>
</td>
</tr>
</table>
<input type="submit" value="가입"/>
</form>
</body>결과
-
한 항목만 선택하게 하기 - form_selectBasic.html
- select 태그 사용시 optgroup , option 태그 함께 사용
<!DOCTYPE html>
<html>
<head>
<title>Form Basic</title>
</head>
<body>
<select name="lunch">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
</html>결과
<!DOCTYPE html>
<html>
<head>
<title>Form Basic</title>
</head>
<body>
<form>
<select name="lunch">
<option value="1">김밥</option>
<option value="2">떡볶이</option>
<option value="3" selected>순대</option>
<option value="4">어묵</option>
</select>
<br>
<input type="submit" value ="확인">
</form>
</body>
</html>결과
-
여러 개의 항목 선택하게 하기 - form_selectMulti.html
- select 태그의 multiple 속성 사용 (Ctrl + 마우스 왼쪽 버튼)
<!DOCTYPE html>
<html>
<head>
<title>Form Basic</title>
</head>
<body>
<select multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
</html>결과
-
선택 옵션 묶기
- optgroup 태그 사용
<!DOCTYPE html>
<html>
<head>
<title>Form Basic</title>
</head>
<body>
<select>
<optgroup label="HTML5">
<option>Multimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
</html>결과
-
연관 있는 입력 양식 그룹으로 묶기 - form_group.html
- fieldset 과 legend 태그 사용
<body>
<form>
<fieldset>
<legend>입력 양식</legend>
<table>
<tr>
<td><label for="name">이름</label></td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email" /></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
</body>결과
-
여러줄 텍스트 입력하기 - form_textarea.html
- <textarea>태그 사용, 속성 cols : 한 줄에 나타날 글자수, rows: 행의 수
<body>
<form>
<textarea cols="80" rows="5">디폴트</textarea>
</form>
</body>결과
댓글