Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

체험하기

HTML
<link href='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.js'></script>

<div style="background-color: #ffffff; width:99%; height:500px;">
        <div id="synapEditor">
			<p>
				<span>웹접근성 검사 ( 
				<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlDNzBBM0MzODZEMTFFODkxQUZENjI5NzU4OEIyODgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlDNzBBM0QzODZEMTFFODkxQUZENjI5NzU4OEIyODgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUM3MEEzQTM4NkQxMUU4OTFBRkQ2Mjk3NTg4QjI4OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOUM3MEEzQjM4NkQxMUU4OTFBRkQ2Mjk3NTg4QjI4OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrazrSAAAADjSURBVHjaYvz//z8DOrC1tS0AUv1A/AGIDQ8fPvyAAQdgwiHuD6UFgDiBAQ/AZcBGKA1ywQJ8BjBi8wIpAJcLQOHwH4QJGcCCpMEAGnAHgYHWQJILoJr3A7EDuV6YDw1xUKBtIMUARhsbGweo7QzQOL8ACwNCmoFqGZmQnH0AppkUwILPdHwxhGzAByhbAY+GACC1HpvBTEiBpgDNA+iaQYFbD+ViBDATNKNMgPL7gRoagFgByWZQABtA5RtxRSNIAhaAINvuQ/25HklzIrZARskLINuBVDxaeICc3YgrhgACDADh5VBZ1HIpIAAAAABJRU5ErkJggg=="/>
				 ) 기능을 이용해서 누구나 접근할 수 있는 웹 콘텐츠를 제작해보세요.</span>
			</p>
			<p><span></span></p>
			<p>
				<span class="se-drawing-object-wrapper se-image" data-drawing-object-id="se_49f38f9a-888f-425b-b069-257134736430" style="display: inline-block; text-indent: 0px; vertical-align: baseline;">
					<img src="http://www.synapeditor.com/resource/images/editor/desktop/editor_logo.png" style="vertical-align: bottom; width: 329px; height: 81px;">
				</span>
			</p>
			<table data-drawing-object-id="se_de134ddd-5bd4-490d-ac47-d6447cfa87ce" data-template-id="0" data-paragraph-id="se_83bd3e76-2937-4790-8141-adc6eb792d72" style="border-collapse: collapse; word-break: break-all; white-space: normal; line-height: normal; width: 100%; table-layout: fixed; margin: 0px; vertical-align: text-bottom;">
		<colgroup>
			<col style="width: 49.937264742785445%;">
			<col style="width: 50.062735257214555%;">
		</colgroup>
		<tbody>
			<tr>
				<th scope="col" data-table-row-index="0" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; width: calc(49.9373% - 0px); border-width: 2px 1px 1px; border-style: solid; border-color: rgb(0, 24, 165) rgb(0, 0, 0) rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span>구분</span>
					</p>
				</th>
				<th scope="col" data-table-row-index="0" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; width: calc(50.0627% - 0px); border-width: 2px 1px 1px; border-style: solid; border-color: rgb(0, 24, 165) rgb(0, 0, 0) rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span>정의</span>
					</p>
				</th>
			</tr>
			<tr>
				<td data-table-row-index="1" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span style="font-weight: bold; color: rgb(61, 127, 18);">장애인- 노인 등의 정보통신</span>
						<br>
						<span style="font-weight: bold; color: rgb(61, 127, 18);">접근성 향상을 위한 권장지침</span>
					</p>
				</td>
				<td data-table-row-index="1" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span>정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</span>
					</p>
				</td>
			</tr>
			<tr>
				<td data-table-row-index="2" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span style="font-weight: bold; color: rgb(61, 127, 18);">웹 접근성 이니셔티브</span>
						<br>
						<span>(</span>
						<a data-hyperlink-id="758e3650-5ba7-4a9b-919a-ca038b343f35" data-href="http://www.w3.org/WAI/intro/accessibility.php" title="WAI: Web Accessibility Initiative 사이트로 이동" target="_blank" href="http://www.w3.org/WAI/intro/accessibility.php" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;">
							<span>WAI: Web Accessibility Initiative</span>
						</a>
						<span>)</span>
					</p>
				</td>
				<td data-table-row-index="2" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span>장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를</span>
						<span>&nbsp;</span>
						<span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px;">인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable)</span>
						<span>, 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</span>
					</p>
				</td>
			</tr>
			<tr>
				<td data-table-row-index="3" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<a data-hyperlink-id="3b662b73-3896-4c3a-a79c-e718f9768a6b" data-href="http://en.wikipedia.org/wiki/Web_accessibility" title="Wikipedia 사이트로 이동" target="_blank" href="http://en.wikipedia.org/wiki/Web_accessibility" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;">
							<span style="font-weight: bold; color: rgb(61, 127, 18);">Wikipedia</span>
						</a>
					</p>
				</td>
				<td data-table-row-index="3" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span>표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</span>
					</p>
				</td>
			</tr>
			<tr>
				<td data-table-row-index="4" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<a data-hyperlink-id="73ecb492-327a-4c88-acd3-0156491bf5cb" data-href="http://www.nia.or.kr/" title="한국정보화진흥원 사이트로 이동" target="_blank" href="http://www.nia.or.kr/" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;">
							<span style="font-weight: bold; color: rgb(61, 127, 18);">한국정보화진흥원</span>
						</a>
					</p>
				</td>
				<td data-table-row-index="4" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);">
					<p style="white-space: pre-wrap; word-wrap: break-word; margin: 0px;">
						<span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px;">어떠한 사용자(장애인, 노인 등)</span>
						<span>, 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</span>
					</p>
				</td>
			</tr>
		</tbody>
	</table>
			<p><span></span></p>
		</div>
</div>
<script>
		window.editor = new SynapEditor("synapEditor", {
			"editor.license":"/resource/license.json",
			"editor.toolbar": [
				"new","|", 
				"accessibility"
			],
			"editor.menu.show": false
			}, document.getElementById('synapEditor').innerHTML);
</script>