![[7/8 HTML] 태그 이용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7LunD%2FbtrSHKkXA15%2FkWcPUbToIkNlX6ERteACGK%2Fimg.png)
📌이미지 태그
- 이미지 파일
- 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태그 : 내용을출력(셀)
- tr태그 : 행을 출력한다 >> 하위태그로 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>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
<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>
<a href = "08_anchor.html#review">구매후기</a>
<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스타일을 속성값으로 설정
<!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>
'💻 수업정리 (2020) > CSS & HTML' 카테고리의 다른 글
| [7/13] 박스모델 (0) | 2020.07.13 |
|---|---|
| [7/10] font의 사용과 이미지 사용 (0) | 2020.07.10 |
| [7/9] 폼태그와 CSS시작 - 선택자 (1) | 2020.07.09 |
| [7/7] WAS와 아파치 톰캣을 이용하여 웹서버 환경설정하기 (0) | 2020.07.07 |