💻 수업정리 (2020)/CSS & HTML

[7/8 HTML] 태그 이용하기

주다람 2020. 7. 8. 18:12

📌이미지 태그

  • 이미지 파일
    • alt속성 : 출력 이미지에 대한 설명을 속성값으로 설정
    • src속성 : 이미지 파일에 대한 URL 주소를 속성값으로 설정
                  👉 URL주소에 해당 이미지 파일이 없는 경우 404 상태코드를 발생시킨다
  •  상대경로
    • 현재문서를 기준으로 리소스 경로를 표현하는 방법
  • 절대경로(대형시스템에서 권장)
    • 서버를 기준으로 리소스 경로를 표현하는 방법

 

📌li태그

  • 목록을 출력하기 위한 태그
  • ol태그 또는 ul태그의 하위태그로 사용한다
    • ol태그 : 목록에 순서를 부여하여 출력
    • ul태그 : 목록에 블릿(기호)를 부여하여 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>li 태그</h1>
	<hr>
	<!-- li 태그 : 목록 출력 -->
	<!-- => ol 태그 또는 ul 태그의 하위태그로 사용 -->
	<!-- ol 태그 : 목록에 순서를 부여하여 출력 -->
	<!-- ul 태그 : 목록에 블릿(기호)을 부여하여 출력 -->
	<h3>유채방</h3>
	<ul>
		<li>도미토리, 동성(또는 가족) 1팀</li>
		<li>4인실</li>
		<li>공동 취사실 및 욕실(화장실)</li>
		<li>비용
			<ul>
				<li>비수기 : 1인 20,000원</li>
				<li>성수기 : 1인 25,000원</li>
			</ul>
		</li>
	</ul>
	<hr>
	<h3>유채방</h3>
	<ol>
		<li>도미토리, 동성(또는 가족) 1팀</li>
		<li>4인실</li>
		<li>공동 취사실 및 욕실(화장실)</li>
		<li>비용
			<ul>
				<li>비수기 : 1인 20,000원</li>
				<li>성수기 : 1인 25,000원</li>
			</ul>
		</li>
	</ol>
</body>
</html>

 

📌dl태그

  • 정의목록(Definition List)
  • 하위 태그로 dt(Definition List), dd(Definition Description)이 있다
    • dt태그 : 정의용어
    • dd태그 : 정의용어 설명
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>dl 태그</h1>
	<hr>
	<!-- dl 태그 : 정의 목록(Definition List) -->
	<!-- => 하위태그 : dt(Definition Term), dd(Definition Description) -->
	<!-- dt 태그 : 정의 용어, dd 태그 : 정의 용어 설명 -->
	<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태그 : 표 출력
  • 하위태그로 tr 이 있다(단, 모든 tr태그의 하위태그 갯수가 같도록 작성한다
    • tr태그 : 행을 출력한다 >> 하위태그로 th또는 td가 있다
      • th태그 : 열을 출력
      • td태그 : 내용을출력(셀)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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;
}

</style>
</head>


<body>
	<h1>Table태그</h1>
	<hr>
	<!-- Summary 속성 : 표에 대한 설명을 속성값으로 설정 -->
	<table summary="객실 안내">
		<!-- caption : 표에대한 설명 -->
		<caption>객실표</caption> 
		
		<!-- thead : 표의 머릿부를 표현하기 위한 태그 -->
		<thead>
			<tr>
				<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
			</tr>
		</thead>
		
		<!-- 표의 몸체부를 표현하기 위한 태그 -->
		<tbody>
			<tr>
				<!-- rowspan 속성 : 병합하고자 하는 행의 갯수를 속성값으로 설정 -->
				<td rowspan = "3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan = "2">1인 2만원</td>
			</tr>
			
			<tr>
				<td>동백방</td><td>5인실</td>
			</tr>
			
			<tr>
				<!-- colspan 속성 : 병합하고자 하는 열의 갯수를 속성값으로 설정 -->
				<td>천혜향방</td><td colspan="2">가족실(최대15만원)</td>
			</tr>			
		</tbody>
		
		<!-- tfoot 태그 : 표의 꼬릿부를 표현하기 위한 태그(tbody안에 있어도 똑같이 출력되긴함 -->
		<tfoot>
			<tr>
				<td colspan ="4"> 바깥채 전체를 독채로 대여합니다</td>
			</tr>
		</tfoot>
		
	</table>

</body>
</html>

 

📌tbody태그

  • table태그의 summary속성 : 표에 대한 설명을 속성값으로 설정
    • caption태그 : 표 머릿부를 표현하기 위한 태그
    • tbody 태그 : 표 몸체부를 표현하기 위한 태그
      • rowspan 속성 : 병합하고자 하는 행의 갯수를 속성값으로 설정
      • colspan속성 : 병합하고자 하는 열의 갯수를 속성값으로 설정
    • tfoot태그 : 표 꼬릿부를 표현하기 위한 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<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>table 태그</h1>
	<hr>
	<!-- summary 속성 : 표에 대한 설명을 속성값으로 설정 -->
	<table summary="객실 안내">
		<!-- caption 태그 : 표 제목 출력 -->
		<caption>객실표</caption>
		<!-- thead 태그 : 표 머릿부를 표현하기 위한 태그 -->
		<thead>
			<tr>
				<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
			</tr>
		</thead>
		
		<tfoot>
			<tr>
				<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
			</tr>
		</tfoot>
		
		<!-- tbody 태그 : 표 몸체부를 표현하기 위한 태그 -->
		<tbody>
			<tr>
				<!-- rowspan 속성 : 병합하고자 하는 행의 갯수를 속성값으로 설정 -->
				<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">1인 20,000원</td>
			</tr>
			<tr>
				<td>동백방</td><td>2인실</td>
			</tr>
			<tr>
				<!-- colspan 속성 : 병합하고자 하는 열의 갯수를 속성값으로 설정 -->
				<td>천혜향</td><td colspan="2">가족실 60,000원(최대 4인)</td>
			</tr>
		</tbody>
		<!-- tfoot 태그 : 표 꼬릿부를 표현하기 위한 태그 -->
		<!--
		<tfoot>
			<tr>
				<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
			</tr>
		</tfoot>
		-->		
	</table>
</body>
</html>

 

📌a link 태그

  • a 태그 : 클릭 이벤트에 대한 페이지 이동관련 이벤트 핸들러 제공
    • href 속성 : 서버에 요청하고자 하는 URL주소를 속성값으로 설정
    • 하이퍼링크(Hyper Link) : 클릭 이벤트가 발생될 경우 등록된 URL주소를 요청하여 다른 응답 결과를 출력(=페이지가 이동됨)
    • target 속성 : 요청을 처리하는 창을 속성값으로 설정
    • _blank 속성값 : 새로운 창을 생성하여 요청 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>a 태그</h1>
	<hr>
	<!-- a 태그 : 클릭 이벤트에 대한 페이지 이동 관련 이벤트 핸들러 제공 -->
	<!-- href 속성 : 서버에 요청하고자 하는 URL 주소를 속성값으로 설정 -->
	<!-- => 하이퍼 링크(Hyper Link) : 클릭 이벤트가 발생될 경우 등록된 URL 주소를 요청하여 다른 응답 결과 출력 - 페이지 이동 -->
	<a href="https://www.daum.net">다음</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.naver.com">네이버</a>&nbsp;&nbsp;&nbsp;
	<a href="https://www.google.com">구글</a>&nbsp;&nbsp;&nbsp;
	<hr>
	<!-- target 속성 : 요청을 처리하는 창을 속성값으로 설정 -->
	<!-- => _blank 속성값 : 새로운 창을 생성하여 요청 처리 -->
	<a href="07_kor.html" target="_blank"><img alt="한글" src="images/kor.png"></a>
	<a href="/web/html/07_eng.html" target="_blank"><img alt="영어" src="images/eng.png"></a>
</body>
</html>

*07_kor.html 과 07_eng.html 파일은 따로 만들어야함

 

📌anchor 태그

  • 앵커(Anchor) : 출력페이지의 위치이동
  • ★id속성 : 태그의 고유값을 속성값으로 설정
  • a태그의 href속성값으로 URL주소를 등록하여 페이지를 이동한다
  • => URL주소 뒤에 태그 고유값을 이용하여 원하는 출력위치로 이동
  • URL#id : 같은 문서인 경우 URL 주소 생략가능하다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- id속성 : 태그의 고유값을 속성값으로 설정 -->
	<h1 id = "top">a태그</h1>
	<hr>
	<!--a태그의 href속성값으로 URL주소를 등록하여 페이지 이동 -->
	<!-- => URL주소 뒤에 태그 고유값을 이용하여 원하는 출력위치로 이동 -->
	<!-- 앵커(Anchor) : 출력페이지의 위치이동 -->
	<!-- URL#ID - 같은 문서인 경우 URL 주소 생략가능 -->
	
	<a href = "08_anchor.html#product">제품설명</a>&nbsp;&nbsp;&nbsp;
	<a href = "08_anchor.html#review">구매후기</a>&nbsp;&nbsp;&nbsp;
	<a href = "#message">유의사항</a>

	<hr>
	<h3 id = "product">제품설명</h3>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<p>아주 좋은 제품입니다.</p>
	<a href = #top>위로가기</a>
	
	<hr>
	<h3 id = "review">구매후기</h3>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<p>아직 사용해 보지 않았지만 좋은것같아요</p>
	<a href = #top>위로가기</a>

	<hr>
	<h3 id = "message">유의사항</h3>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<p>알아서 잘 사용하시면 됩니다~</p>
	<a href = #top>위로가기</a>
	
</body>
</html>

 

📌map 태그

  • map태그 : 이미지의 영역에 대한 하이퍼링크 기능을 제공 
  • name속성 : 태그의 이름을 속성값으로 설정
  • 하위태그로 area가 존재
    • area 태그 : 이미지 영역 설정
    • shape 속성 : 영역을 지정하기 위한 도형을 속성값으로 설정
                        rect(기본) , circle, poly
    • coords 속성 : 영역에 대한 좌표값을 속성값으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>map 태그</h1>
	<hr>
	<!-- usemap 속성 : map 태그의 이름을 속성값으로 설정 -->
	<img alt="이미지 링크" src="images/map.png" usemap="#favorites">
	
	<!-- map 태그 : 이미지의 영역 대한 하이퍼링크 기능을 제공 => 하위태그 : area -->
	<!-- name 속성 : 태그의 이름을 속성값으로 설정 -->
	<map name="favorites">
		<!-- area 태그 : 이미지 영역 설정 -->
		<!-- shape 속성 : 영역을 지정하기 위한 도형을 속성값으로 설정 -->
		<!-- => rect(기본), circle, poly -->
		<!-- coords 속성 : 영역에 대한 좌표값을 속성값으로 설정 -->
		<area alt="트위터" shape="rect" coords="0,0,128,118" href="https://twitter.com" target="_blank">
		<area alt="페이스북" shape="rect" coords="129,0,250,118" href="https://facebook.com" target="_blank">
	</map>
</body>
</html>

 

📌iframe 태그

  • iframe태그 : 브라우저에 내장 윈도우를 생성
  • src속성 : 내장 윈도우에 출력될 URL주소를 속성값으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>iframe 태그</h1>
	<hr>
	<!-- iframe 태그 : 브라우저에 내장 윈도우 생성 -->
	<!-- src 속성 : 내장 윈도우에 출력될 URL 주소를 속성값으로 설정 -->
	<!-- <iframe src="https://m.daum.net" width="600" height="500"></iframe>  -->
	
	<iframe src="10_left.html" width="600" height="500"></iframe>
	<iframe src="10_right.html" width="600" height="500" name="right"></iframe>
</body>
</html>

*10_left.html 과 10_right.html파일은 따로 만들어야함

 

📌audio 태그

  • 음악파일(mp3파일, ogg파일 등) 재생
  • src 속성 : 음악파일의 URL 주소를 속성값으로 설정
  • autoplay속성 : 자동 재생 - 속성값 생략 가능함
  • controls 속성 : 제어판 출력 - 속성값 생략가능
  • loop 속성 : 반복 재생 - 속성값 생략가능
  • preload 속성 : 음악 파일 다운로드 관련 속성값 설정
                        none, metadata, auto(기본)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>audio 태그</h1>
	<hr>
	<!-- audio 태그 : 음악 파일(mp3 파일, ogg 파일 등) 재생 -->
	<!-- src 속성 : 음악 파일의 URL 주소를 속성값으로 설정 -->
	<!-- autoplay 속성 : 자동 재생 - 속성값 생략 가능 -->
	<!-- controls 속성 : 제어판 출력 - 속성값 생략 가능 -->
	<!-- loop 속성 : 반복 재생 - 속성값 생략 가능 -->
	<!-- preload 속성 : 음악 파일 다운로드 관련 속성값 설정 - none, metadata, auto(기본) -->
	<!-- <audio src="audio/old_melody.mp3" autoplay="autoplay" controls="controls"></audio> -->
	<!-- <audio src="audio/old_melody.ogg" autoplay="autoplay" controls="controls"></audio> -->
	
	<audio autoplay="autoplay" controls="controls">
		<!-- source 태그 : 다양한 형식의 음악파일 제공 -->
		<source src="audio/old_melody.ogg">
		<source src="audio/old_melody.mp3">
	</audio>
</body>
</html>

 

📌video 태그

  • video태그 : 동영상 파일(mp4 파일, ogm 파일, webm 파일 등) 재생
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>video 태그</h1>
	<hr>
	<!-- video 태그 : 동영상 파일(mp4 파일, ogm 파일, webm 파일 등) 재생 -->
	<!-- <video src="video/gate.mp4" autoplay="autoplay" controls="controls" width="450"></video> -->
	<!-- <video src="video/gate.video/gate.mp4" autoplay="autoplay" controls="controls" width="450"></video> -->
	
	<video autoplay="autoplay" controls="controls" width="450">
		<source src="video/gate.mp4">
		<source src="video/gate.webm">
		<source src="video/gate.ogm">
	</video>
</body>
</html>

 

📌figure 태그

  • 이미지 설명을 출력
  • 하위태그로 img(1개이상) figcaption(1개)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>figure태그</h1>
	<hr>
	<!-- figure태그 : 이미지 설명 출력 -->
	<!-- => 하위 태그 : img(1개 이상) figcaption(1개) -->
	<figure>
		<img alt = "천혜향 2인실" src = "images/che.png">
		<figure>천혜향은 동성 2인실 입니다</figure>
	</figure>
	

	<figure>
		<img alt = "동백방 4인실" src = "images/dong.png">
		<img alt = "유채방 4인실" src = "images/dong.png">
		<figure>동백방과 유채방은 4인실 입니다</figure>
	</figure>

</body>
</html>

 

📌details 태그

  • 상세설명을 추가해주는 태그
  • 하위태그로는 summary태그가 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>details 태그</h1>
	<hr>
	<!-- details 태그 : 상세 설명을 출력 -->
	<!-- => 하위태그 로 summary태그를 사용 -->
	<details>
		<summary>hello</summary>
		<p>안녕하세요</p>
	</details>
	
	<details>
		<summary>goodbye</summary>
		<p>안녕히가세요</p>
	</details>

</body>
</html>

 

누르면 하위태그가 보이게 된다

 

 

📌Meter태그

  • 값을 100분율을 이미지로 출력
  • value 속성 : 출력값을 속성값으로 설정
  • max속성 : 최대값을 속성값으로 설정
  • style속성 css스타일을 속성값으로 설정

meter태그를 이용

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>meter태그</h1>
	<hr>
	<h3>투표결과</h3>
	<p>1번 후보 : 전체 100명 중 10명 선택</p>
	<p>2번 후보 : 전체 100명 중 60명 선택</p>
	<p>3번 후보 : 전체 100명 중 30명 선택</p>
	<hr>
	
	<h3>투표결과</h3>
	<!-- meter태그 : 값을 100분율을 이미지로 출력 -->
	<p>1번 후보 : <meter value= "10" max = "100" style = "width = 300px"></meter>

</body>
</html>

 

 

📌progress태그 + javascript★

  • 진행상황을 이미지로 출력
  • button태그 : 버튼을 출력한다 -> 자바스크립트를 이용해야함
  • type속성 : button(일반버튼) , submit(전달버튼 - 기본) , reset(초기화버튼)
  • onclick 속성 : 클릭 이벤트에 대한 이벤트 핸들러(javascript)를 속성값으로 설정
  • onXXX속성 : 이벤트 속성  - 속성값으로 이벤트 핸들러 등록

 

  • script 태그 : 스크립트 프로그램을 작성할 수 있도록 한다
  • type속성 :  스크립트의 종류를 속성값으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>progress 태그</h1>
	<hr>
	<!-- progress 태그 : 진행상황을 이미지로 출력 -->
	<p>남은 시간 : 10초 <progress value="50" max="60"></progress></p>
	<p>진행률 : 30% <progress value="30" max="100"></progress></p>
	<hr>
	<!-- button 태그 : 버튼 출력 -->
	<!-- type 속성 : button(일반 버튼), submit(전달 버튼 - 기본), reset(초기화 버튼) -->
	<!-- onclick 속성 : 클릭 이벤트에 대한 이벤트 핸들러(JavaScript)를 속성값으로 설정  -->
	<!-- onXXX 속성 : 이벤트 속성 - 속성값으로 이벤트 핸들러 등록  -->
	<button type="button" onclick="download();">다운로드</button>
	<progress id="bar" value="0" max="100" style="width: 200px;"></progress>
	<span id="message"></span>
	
	<!-- script 태그 : 스크립트 프로그램 작성 -->
	<!-- type 속성 : 스크립트의 종류를 속성값으로 설정 -->
	<script type="text/javascript">
	function download() {
		var bar=document.getElementById("bar");
		var message=document.getElementById("message");
		
		var loaded=0;
		var load=function() {
			loaded+=5;
			bar.value=loaded;
			message.innerHTML="진행 = "+loaded+"%";
			if(loaded==100) {
				clearInterval(dummyLoad);
			}
		}
		
		var dummyLoad=setInterval(function() {
			load();
		},500);
	}
	</script>
</body>
</html>

 

📌mark태그

  • 텍스트를 강조할 수 있도록 한다
  • 텍스트 강조 태그 : b, i, strong(주관적인 강조), em(객관적인 강조)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>mark 태그</h1>
	<hr>
	<!-- mark태그 : 텍스트 강조 -->
	<!-- 텍스트 강조 태그 : b, i, strong(주관적인 강조), em(객관적인 강조) -->
	<p><strong>2020년 07월 08일</strong>은 <em>수요일</em> 입니다</p>
	<p>오늘은 최고기온이 <mark style="background-color: lime;">31도</mark> 입니다</p>
	

</body>
</html>

 

📌quote태그

  • blockquote : 인용문 출력 - 블럭레벨
  • cite속성 : 인용문을 발췌한 URL주소를 속성값으로 설정 

 

  • q 태그 : 인용문을 출력하기 위한 인라인레벨
  • " " <- 가 붙어서 출력된다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Quote 태그</h1>
	<hr>
	
	<h3>HTML 이란?</h3>
	<p>웹문서를 만드는 데에 이용는 문서 형식으로, 웹~</p>
	<hr>
	<!-- blockquote : 인용문 출력 - 블럭레벨 -->
	<!-- cite속성 : 인용문을 발췌한 URL주소를 속성값으로 설정 -->
	<h3>HTML 이란?</h3>
	<blockquote cite = "http://joodaram.tistory.com">웹문서를 만드는 데에 이용되는 문서형식!</blockquote>
	<hr>
	<h3>웹 접근성이란 ?</h3>
	
	<!-- q태그 : 인용문 출력 - 인라인레벨 -->
	<blockquote cite = "https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%A0%91%EA%B7%BC%EC%84%B1">웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

	웹 접근성에는 <q cite = "">다음의 사항들을</q> 고려하여야 한다:</blockquote>
	
	
</body>
</html>

 



저작자표시 비영리 동일조건 (새창열림)