A web standards checklist\ub97c \ubc88\uc5ed\ud588\uc2b5\ub2c8\ub2e4.
\n\uc6f9 \ud45c\uc900\uacfc \uad00\ub828\ud574 \uc810\uac80 \ud574\uc57c \ud560 \uac83\ub4e4\uc5d0 \uad00\ud55c \uac04\ub2e8\ud55c \ubb38\uc11c \uc785\ub2c8\ub2e4.<\/p>\n
A web standards checklist(\uc6d0\ubb38)<\/a> by Max Design<\/a><\/sub><\/p>\n [su_highlight background=”#99e7ff”]2018.08.15 \uc6f9 \ud45c\uc900\uc774\ub77c\ub294 \uc6a9\uc5b4\ub294 \uc0ac\ub78c\ub4e4 \ub9c8\ub2e4 \ub2e4\ub978 \uac83\uc744 \uc758\ubbf8\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc790\uba74, ‘\ud14c\uc774\ube14\uc774 \uc5c6\ub294 \uc0ac\uc774\ud2b8’\uc77c \uc218\ub3c4 \uc788\uace0, \ub610 \ub2e4\ub978 \uc774\ub4e4\uc5d0\uac90 ‘\uc720\ud6a8\ud55c \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud588\ub2e4’ \uc77c\uc218\ub3c4 \uc788\ub2e4. \ud558\uc9c0\ub9cc \uc6f9 \ud45c\uc900\uc740 \uadf8\uac83 \ubcf4\ub2e4 \ud6e8\uc52c \uad11\ubc94\uc704\ud558\ub2e4.\u00a0\uc6f9 \ud45c\uc900\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \uc815\uc758 \ud560 \uc218 \uc788\ub2e4: \uc774\uac83\uc740 \ucd5c\uace0\uc758 \uc810\uac80 \ubaa9\ub85d\uc774 \uc544\ub2c8\ub2e4. \uc544\ub9c8\ub3c4 \ub354 \ucd94\uac00\ud560 \uc218 \uc788\ub294 \uac83\ub4e4\uc774 \ub9ce\uc774 \uc788\uc744 \uac83\uc774\ub2e4. \ub354 \uc911\uc694\ud55c \uac83\uc740, \ub2f9\uc2e0\uc774 \uac1c\ubc1c\ud558\ub294 \ubaa8\ub4e0 \uc0ac\uc774\ud2b8\uc5d0\uc11c \ub2e4\ub8e8\uc5b4 \uc838\uc57c \ud558\ub294 \ud56d\ubaa9\uc758 \ubaa9\ub85d\ucc98\ub7fc \ubcf4\uc5ec\uc11c\ub294 \uc548\ub41c\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n A doctype (short for \u2018document type declaration\u2019) informs the validator which version of (X)HTML you\u2019re using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won\u2019t validate without them. More:<\/p>\n If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but\u00a0 declaring the character encoding of the document is important for anyone producing XHTML\/HTML or CSS.<\/p>\n Tutorial: Character sets & encodings in XHTML, HTML and CSS<\/a><\/cite><\/p>\n<\/blockquote>\n More:<\/p>\n Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML<\/p><\/blockquote>\n More:<\/p>\n You need to make sure that there aren\u2019t any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.<\/p>\n Help! My CSS Isn\u2019t Working!<\/a><\/cite><\/p>\n<\/blockquote>\n More:<\/p>\n Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.<\/p>\n Standard Hacks?<\/a><\/cite><\/p>\n<\/blockquote>\n More:<\/p>\n I\u2019ve noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.<\/p>\n Markup tactics<\/a><\/cite><\/p>\n<\/blockquote>\n Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)<\/p><\/blockquote>\n More:<\/p>\n Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.<\/p><\/blockquote>\n More:<\/p>\n Don\u2019t make me wait\u2026 That\u2019s the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.<\/p>\n Speed Up Your Site: Web Site Optimization<\/a><\/cite><\/p>\n<\/blockquote>\n Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under \u2018Internet Options\u2019 on the Advanced tab. Uncheck \u2018Disable script debugging\u2019.<\/p>\n Use style sheets to control layout and presentation<\/p>\n Web Content Accessibility Guidelines 1.0 \u2013 checkpoint 3.3<\/a><\/cite><\/p>\n<\/blockquote>\n The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.<\/p><\/blockquote>\n Provide a text equivalent for every non-text element<\/p>\n Web Content Accessibility Guidelines \u2013 checkpoint 1.1<\/a><\/cite><\/p>\n<\/blockquote>\n Use relative rather than absolute units in markup language attribute values and style sheet property values\u2019<\/p>\n Web Content Accessibility Guidelines \u2013 checkpoint 3.4<\/a><\/cite><\/p>\n<\/blockquote>\n More:<\/p>\n Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser\u2019s font size. And again. And again\u2026 Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.<\/p>\n A method shall be provided that permits users to skip repetitive navigation links.<\/p>\n Section 508<\/a><\/cite><\/p>\n<\/blockquote>\n Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group<\/p>\n Web Content Accessibility Guidelines \u2013 checkpoint 13.6<\/a><\/cite><\/p>\n<\/blockquote>\n \u2026blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.<\/p>\n Keep them visible!<\/a><\/cite><\/p>\n<\/blockquote>\n Forms aren\u2019t the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another<\/p>\n Accessible forms<\/a><\/cite><\/p>\n<\/blockquote>\n More:<\/p>\n For data tables, identify row and column headers\u2026 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.<\/p>\n
\n\uae30\uc874\uc5d4 \ubcc4\ub3c4 \ubb38\uc11c\ub85c \ub418\uc5b4 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.
\n\ucd5c\uc2e0\ud310\uc73c\ub85c \ub0b4\uc6a9 \uc5c5\ub370\uc774\ud2b8\uc640 \ud568\uaed8 \ubcf8 \ubb38\uc11c\uc5d0 \ud3ec\ud568\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud588\uc2b5\ub2c8\ub2e4.
\n\ub354\ubd88\uc5b4 \ubcf8\ubb38\uc5d0 \ucd94\uac00\ub41c \ub0b4\uc6a9\uc774 \uc0dd\uaca8\uc11c \ubc88\uc5ed\uc774 \uc548\ub41c \ubd80\ubd84\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ubc88\uc5ed \uc791\uc5c5 \uc911\uc785\ub2c8\ub2e4.[\/su_highlight]<\/span><\/p>\n
\n\uc6f9 \ud45c\uc900 – ‘\ud14c\uc774\ube14 \uc5c6\ub294 \uc0ac\uc774\ud2b8’\ub97c \ub6f0\uc5b4 \ub118\uc5b4<\/h3>\n
\n\ud45c\uc900\uc744 \uc5c4\uc218\ud558\uace0 (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) \ucd5c\uace0\uc758 \uc5c5\ubb34\ub97c \uc2e4\ud589\ud558\ub294 \uac83 (\uc720\ud6a8\ud55c \ucf54\ub4dc, \uc811\uadfc\uc131 \ub192\uc740 \ucf54\ub4dc, \uc758\ubbf8\uc0c1\uc73c\ub85c \uc62c\ubc14\ub978 \ucf54\ub4dc, \uc0ac\uc6a9\uc790\uac00 \uc778\uc2dd\ud558\uae30 \uc26c\uc6b4 URL \ub4f1).
\n\ub2e4\ub974\uac8c \ub9d0\ud558\uc790\uba74…
\n\uc0ac\uc774\ud2b8\ub97c \uc6f9 \ud45c\uc900\uc5d0 \ub9de\uac8c \uc81c\uc791\ud558\ub824\uba74 \uad70\ub354\ub354\uae30\uac00 \uc5c6\uace0, \uae68\ub057\ud558\uace0, CSS \uae30\ubc18\uc774\uace0, \uc811\uadfc\ud558\uae30 \uc26c\uc6b0\uba70 \uc0ac\uc6a9\ud558\uae30 \uc27d\uace0, \uac80\uc0c9 \uc5d4\uc9c4\uc5d0 \uce5c\ud654\uc801\uc774\uc5b4\uc57c \ud55c\ub2e4.<\/p>\n\uc810\uac80 \ubaa9\ub85d\uc5d0 \ub300\ud574<\/h3>\n
\n
\uc810\uac80\ubaa9\ub85d<\/h3>\n
\n
\n
\n
\n
\n
\n
\n
\n<\/a>1. \ucf54\ub4dc\uc758 \ud488\uc9c8<\/h3>\n
<\/a>1.1 \uc62c\ubc14\ub978 Doctype\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
\nFix your site with the right doctype<\/a><\/p><\/blockquote>\n\n
<\/a>1.2 Character set\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
\n
<\/a>1.3 \uc720\ud6a8\ud55c (X)html\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
\n
<\/a>1.4 \uc720\ud6a8\ud55c CSS\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
\n
<\/a>1.5 \uc5b4\ub5a0\ud55c CSS\uc744 \ud575\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc9c0 \uc54a\uc740\uac00?<\/h4>\n
\n
<\/a>1.6 \ubd88\ud544\uc694\ud55c class\ub098 id\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc9c0 \uc54a\uc740\uac00?<\/h4>\n
<\/a>1.7 \ucf54\ub4dc\uac00 \uad6c\uc870\uc801\uc73c\ub85c \uc9dc\uc5ec\uc838 \uc788\ub294\uac00?<\/h4>\n
\n
<\/a>1.8 \uc0ac\uc774\ud2b8\uc5d0 \uae68\uc9c4 \ub9c1\ud06c\ub294 \uc5c6\ub294\uac00?<\/h4>\n
\n
<\/a>1.9 \uc18d\ub3c4\uc640 \ubb38\uc11c \ud06c\uae30\uc758 \uc0ac\uc774\uc5d0\uc11c \uc0ac\uc774\ud2b8\uac00 \uc5b4\ub5bb\uac8c \uc2e4\ud589\ub418\ub294\uac00?<\/h4>\n
<\/a>1.10 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc5d0\ub7ec\ub294 \uc5c6\ub294\uac00?<\/h4>\n
<\/a>2. \ub0b4\uc6a9(\uad6c\uc870)\uacfc \ud45c\ud604\uc758 \ubd84\ub9ac \uc815\ub3c4<\/h3>\n
<\/a>2.1 \uc0ac\uc774\ud2b8\uc758 \ubaa8\ub4e0 \ud45c\ud604\uc801\uc778 \uc678\uad00\uc744 \uc704\ud574 CSS\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00? (\uae00\uaf34, \uc0c9\uc0c1, padding, borders \ub4f1)?<\/h4>\n
<\/a>2.2 \uc7a5\uc2dd\uc801\uc778 \ubaa8\ub4e0 \uc774\ubbf8\uc9c0\uac00 CSS\uc548\uc5d0 \uc788\ub294\uac00, \uc544\ub2c8\uba74 (X)HTML\uc5d0 \ub098\ud0c0\ub098 \uc788\ub294\uac00?<\/h4>\n
<\/a>3. \uc0ac\uc6a9\uc790\ub97c \uc704\ud55c \uc811\uadfc\uc131<\/h3>\n
<\/a>3.1 \uc124\uba85\uc744 \uc704\ud55c \uc774\ubbf8\uc9c0\uc5d0 “alt” \uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
<\/a>3.2 \uae00\uc790 \ud06c\uae30\uc5d0 \uc808\ub300\uc801\uc778 \ub2e8\uc704 \ubcf4\ub2e4\ub294 \uc0c1\ub300\uc801\uc778 \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\uac00?<\/h4>\n
\n
<\/a>3.3 \ud3f0\ud2b8 \ud06c\uae30\ub97c \ud0a4\uc6e0\uc744\ub54c \ub808\uc774\uc544\uc6c3\uc758 \uc678\ud615\uc774 \uae68\uc9c0\ub294 \uacf3\uc774 \uc788\ub294\uac00?<\/h4>\n
<\/a>3.4 \ub208\uc5d0 \ubcf4\uc774\ub294 \ubc14\ub85c\uac00\uae30 \uba54\ub274\ub97c \uc81c\uacf5\ud558\ub294\uac00?<\/h4>\n
<\/a>3.5 \uc811\uadfc\ud558\uae30 \uc26c\uc6b4 \ud3fc(form)\uc744 \uc0ac\uc6a9\ud558\ub294\uac00?<\/h4>\n
\n
<\/a>3.6 \uc811\uadfc\ud558\uae30 \uc26c\uc6b4 \ud14c\uc774\ube14(table)\uc744 \uc0ac\uc6a9\ud558\ub294\uac00?<\/h4>\n