Study Web Development

12월 9일

이전으로

HTML5

2. HTML의 기본 구조

2-2 글자 태그

  1. 새 HTML 파일 s03_text.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트</title>
</head>
<body>
<h3>abbr 태그 : 약자 표시, title 속성을 함께 사용할 수 있음</h3>
<abbr title="Internet of Things">IoT</abbr>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.

<h3>blockquote 태그 : 인용문 넣기, 인용한 문장은 다른 텍스트보다 안으로 들여 쓰여지므로 다른 텍스트와 구별됨</h3>
<blockquote cite="https://www.naver.com">인용 내용</blockquote> 보통 내용 <!-- cite 속성에 출처를 입력하면 화면에는 표시되지 않지만, 시각장애인을 위한 화면 낭독 등 HTML을 기계적으로 읽는 경우에는 출처도 함께 전달됨 -->

<h3>q 태그 : quote의 약자로 인용문 넣기, blockquote와 달리 줄바꿈이 되지 않음</h3>
<q cite="https://www.naver.com">인용 내용</q> 보통 내용

<h3>cite 태그 : 웹 문서나 포스트에서 참고 내용 표시</h3>
내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. - 영화 <cite>"비포선셋"</cite> 등

<h3>code 태그: 컴퓨터 인식을 위한 소스 코드</h3>
<code>function savetheLocal(){}</code>

<h3>kbd 태그 : 키보드 입력이나 음성 명령 같은 사용자 입력 내용</h3>
웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.

<h3>small 태그 : 부가 정보처럼 작게 표시해도 되는 텍스트</h3>
<p>가격 : 13,000원 <small>(부가세 별도)</small></p>

<h3>sup 태그 : 위 첨자</h3>
자동차<sup>하하</sup>

<h3>sub 태그 : 아래 첨자</h3>
자동차<sub>하하</sub>
</body>
</html>
  1. 새 HTML 파일 s04_letter.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특수문자 처리</title>
</head>
<body>
<h3>문자 엔티티</h3>
<!-- 
&nbsp;	공백
&lt;	<	less than
&gt;	>	greater than
&amp;	&	ampersand
&quot;	"	quotation mark
&copy;	©	copyright
&trade;	™	trademark의 약자
 -->
공백 처리 : 공백 사용시 &nbsp;&nbsp;&nbsp;&nbsp; 공백으로 보여짐<br> <!-- &nbsp;는 디자인을 파괴하기 때문에 사용하지 않는 것 권장; CSS로 처리해야 함 -->

&lt;하하&gt;
<하하><br> <!-- 꺽쇠는 태그로 인식됨 -->
자바 &amp; JSP
자바 & JSP<br> <!-- &는 문자 엔티티로 인식됨 -->
&quot;즐거운 하루&quot;
"즐거운 하루"<br> <!-- 큰따옴표는 속성의 값으로 인식됨 -->
<!-- 꺽쇠, &, 큰따옴표를 직접 명시해도 브라우저에서 일반 문자처럼 처리해주지만, 문법적으로 올바른 형식은 아니며 오류 누적시 디자인이 깨질 수 있음 -->

&copy; 한국상사<br>
오메가&trade;
</body>
</html>

2-7 이미지 태그

  1. webapp 폴더 오른쪽 클릭하고 새 폴더 images 생성
  2. 임의의 이미지 파일 landscape.jpg를 C:\javaWork\workspace_jsp\HTML\src\main\webapp\images로 이동
  3. 새 HTML 파일 s05_image.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 표시</title>
</head>
<body>
<h3>이미지 표시</h3>
<img src="../images/landscape.jpg"><br> <!-- HTML 문서가 포함된 폴더(=ch01-basic)는 .으로, 해당 폴더의 상위 폴더(=webapp)는 ..으로 상대 경로 표시 -->
<img src="../images/landscape.jpg" width="200" height="200"><br> <!-- 절대 크기 지정 -->

<h3>이미지에 페이지 링크</h3>
<a href="https://www.naver.com"><img src="../images/landscape.jpg" width="10%" height="10%"></a><br> <!-- %로 상대 크기 지정(브라우저 크기에 비례) -->

<h3>figure, figcaption : 이미지에 설명 글 붙이기</h3>
<figure>
	<img src="../images/landscape.jpg" alt="바다 풍경" width="100" height="100"> <!-- alt 속성에 이미지에 대한 설명을 입력하면 화면에는 표시되지 않지만, 화면 낭독기에서는 해당 설명을 읽어줌 -->
	<figcaption>바다 풍경(Sea View)</figcaption> <!-- 이미지 밑에 설명 표시 -->
</figure>
</body>
</html>

2-1 태그의 사용

  1. 새 HTML 파일 s06_body.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>body 태그의 속성</title>
</head>
<body text="gray" link="orange" vlink="green" alink="yellow"
	bgcolor="#fefbca" background="../images/landscape.jpg">
<!-- 
body 태그의 주요 속성
bgcolor : 배경색 지정; 구글에 colorpicker를 검색하여 원하는 색상의 16진수 코드를 얻을 수 있음
background : 배경 이미지 지정
text : 글자 색상 지정
link : 하이퍼 링크 색상 지정
alink : 하이퍼 링크를 마우스로 클릭할 때의 색상 지정
vlink : 이미 방문한 하이퍼 링크의 색상 지정
일반적으로는 body 태그의 속성이 아니라 CSS를 이용하여 색상 지정
 -->
텍스트 색상 지정<br>
<a href="http://www.korea.com">코리아닷컴</a><br>
<a href="https://www.naver.com">네이버</a>
</body>
</html>

2-4 목록 태그

  1. 새 HTML 파일 s07_list.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록</title>
</head>
<body>
<h3>순서 없는 목록</h3> <!-- 웹, 모바일 모두에서 사용 빈도 높음 -->
<ul>
	<li>서울</li>
	<li>인천</li>
	<li>광주</li>
	<li>부산</li>
	<li>대구</li>
</ul>
<ul type="circle"> <!-- type 속성으로 circle 지정시 목록 표시 기호가 빈 원형으로 출력됨 -->
	<li>서울</li>
	<li>인천</li>
	<li>광주</li>
	<li>부산</li>
	<li>대구</li>
</ul>
<ul type="square"> <!-- type 속성으로 square 지정시 목록 표시 기호가 빈 사각형으로 출력됨 -->
	<li>서울</li>
	<li>인천</li>
	<li>광주</li>
	<li>부산</li>
	<li>대구</li>
</ul>

<h3>순서 있는 목록</h3>
<ol>
	<li>일요일</li>
	<li>월요일</li>
	<li>화요일</li>
	<li>수요일</li>
	<li>목요일</li>
	<li>금요일</li>
	<li>토요일</li>
</ol>
<ol type="A"> <!-- type 속성으로 A 지정시 알파벳 대문자로 순서를 표시 -->
	<li>일요일</li>
	<li>월요일</li>
	<li>화요일</li>
	<li>수요일</li>
	<li>목요일</li>
	<li>금요일</li>
	<li>토요일</li>
</ol>
<ol type="a"> <!-- type 속성으로 a 지정시 알파벳 소문자로 순서를 표시 -->
	<li>일요일</li>
	<li>월요일</li>
	<li>화요일</li>
	<li>수요일</li>
	<li>목요일</li>
	<li>금요일</li>
	<li>토요일</li>
</ol>
<ol type="I"> <!-- type 속성으로 I 지정시 로마 숫자 대문자로 순서를 표시 -->
	<li>일요일</li>
	<li>월요일</li>
	<li>화요일</li>
	<li>수요일</li>
	<li>목요일</li>
	<li>금요일</li>
	<li>토요일</li>
</ol>
<ol type="i"> <!-- type 속성으로 i 지정시 로마 숫자 소문자로 순서를 표시 -->
	<li>일요일</li>
	<li>월요일</li>
	<li>화요일</li>
	<li>수요일</li>
	<li>목요일</li>
	<li>금요일</li>
	<li>토요일</li>
</ol>
<!-- 순서 있는 목록, 100번부터 시작해서 200번으로 점프하기; 사용 빈도 매우 낮음 -->
<ol start="100">
	<li>서울</li>
	<li>인천</li>
	<li value="200">광주</li>
	<li>부산</li>
	<li>대구</li>
</ol>
<!-- reversed : 목록 표시 기호를 역순으로 표시 -->
<ol reversed="reversed">
	<li>서울</li>
	<li>인천</li>
	<li>광주</li>
	<li>부산</li>
	<li>대구</li>
</ol>

<h3>ul 태그 하위에 ol 태그 표시하기</h3>
<ul>
	<li>로맨틱 코미디
		<ol>
			<li>해리가 샐리를 만났을 때</li>
			<li>당신이 잠든 사이에</li>
		</ol>
	</li>
	<li>액션
		<ol>
			<li>글래디에이터</li>
			<li>나쁜 녀석들</li>
		</ol>
	</li>
	<li>SF
		<ol>
			<li>어벤져스</li>
			<li>듄</li>
		</ol>
	</li>
</ul>

<h3>dl, dt, dd 태그 : 설명 목록 만들기</h3>
<!-- <dl> 태그는 사진 구성처럼 제목과 설명이 한 쌍인 설명 목록을 만듦 -->
<dl>
	<dt>올레 1코스</dt>
	<dd>코스 : 시흥 초등학교 - 광치기 해변</dd>
	<dd>거리 : 14.6km(4~5시간)</dd>
	<dt>올레 2코스</dt>
	<dd>코스 : 광치기 해변 - 온평 포구</dd>
	<dd>거리 : 14.56km(4~5시간)</dd>
</dl>
</body>
</html>

2-6 테이블 태그

  1. 새 HTML 문서 s08_table.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
</head>
<body>
<h3>기본 테이블</h3>
<table border="1"> <!-- border 속성 값을 지정해야 테두리가 표시됨 -->
	<tr>
		<td>셀 내용</td>
		<td>셀 내용2</td>
	</tr>
	<caption>제목</caption> <!-- caption 태그는 밑으로 이동해도 렌더링된 페이지에서 제목이 테이블 위에 표시됨 -->
</table>

<h3>figure 태그를 이용한 테이블에 제목 넣기</h3>
<figure> <!-- figure 영역이 만들어져서 테이블이 들여쓰기됨 -->
	<figcaption>테이블 제목</figcaption> <!-- caption 태그와 달리 figcaption 태그는 제목을 왼쪽 정렬로 표시 -->
	<table border="1">
		<tr>
			<td>셀 내용1</td>
			<td>셀 내용2</td>
		</tr>
	</table>
</figure>

<figure> <!-- figure 영역이 만들어져서 테이블이 들여쓰기됨 -->
	<table border="1">
		<tr>
			<td>셀 내용1</td>
			<td>셀 내용2</td>
		</tr>
	</table>
	<figcaption>테이블 제목</figcaption> <!-- figcaption 태그는 밑으로 이동하면 렌더링된 페이지에서 제목이 테이블 밑에 표시됨 -->
</figure>

<h3>표 구조 정의하기</h3>
<!-- 
<thead> : 표의 머리말 부분을 표시하는 태그
<tbody> : 표의 내용을 표시하는 태그
<tfoot> : 표의 꼬리말 부분을 표시하는 태그
렌더링된 페이지에서 시각적인 차이는 없지만(=선택 사항), 화면 낭독기 등에 표의 구조 의미를 전달해줌
 -->
<table border="1">
	<caption>가격표</caption>
	<thead>
		<!-- 행 정의 -->
		<tr>
			<!-- th : 가운데 정렬, 글자를 굵게 표시 -->
			<th>메뉴명</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>해물 스파게티</td>
			<td>8,000원</td>
		</tr>
		<tr>
			<td>까르보나라</td>
			<td>9,000원</td>
		</tr>	
	</tbody>
	<tfoot>
		<tr>
			<td>총합</td>
			<td>17,000원</td>
		</tr>
	</tfoot>
</table>
</body>
</html>

다음으로