HTML <pre> 태그 - 입력 그대로 화면에 표시

웹 디자인 - HTML/CSS

HTML <pre> 태그 - 입력 그대로 화면에 표시

  0   

본문

HTML문서에서는 아무리 많은 공백(space)를 넣더라도 출력창에선 하나의 공백만 표시됩니다.

하지만 <pre>태그를 사용할 경우 공백(space), 탭(tab), 엔터(enter) 등을 입력하면 입력한 내용 그대로 표시할 수 있습니다. 보통 특이한 형식의 텍스트나 컴퓨터 코드등을 곧바로 표현할때 사용 합니다.

<pre>태그를 사용하면 스크린리더 사용시 해당 내용을 건너 뛰어버려 사용자에게 불편을 줄 수 있으니 웹접근성을 고려하여 사용하도록 해야 합니다.

HTML

<pre>
html 코드를 입력해보아요.
태그는 공백과 줄바꿈에 관한 태그를 사용하지 않아도 즉시 표현해 줍니다.
스   페   이   스
</pre>

출력

html 코드를 입력해보아요.
태그는 공백과 줄바꿈에 관한 태그를 사용하지 않아도 즉시 표현해 줍니다.
스   페   이   스

댓글목록

등록된 댓글이 없습니다.

HTML 특수문자 코드 도감(엔티티코드)

HTML 문서에서 꺾쇠 괄호나 따옴표등을 태그로 인식하지 않고 그대로 화면에 표시하고 싶을때 사용하는 특수문자 코드이다.많은 특수문자 코드가 있지만 중요한 몇개를 제외하면 사용할 일이 없다. 자주 사용하는 특수문자 코드  &nbsp; &&amp; <&lt; >&gt; ©&copy; ™&trade; ↑&uarr; ↓&darr; ←&larr; →&rarr; ×&times; ÷&divide; (&#40; )&#41; "&quot; ´&acute; ·&middot; |&#124; 그외 특수문자 코드 공백&nbsp; –&ndash; −&minus; °&deg; Δ&Delta; α&alpha; À&Agrave; à&agrave; Ç&Ccedil; €&euro; —&mdash; ±&plusmn; º&ordm; Λ&Lambda; β&beta; Á&Aacute; á&aacute; ç&ccedil; ¢&cent; …&hellip; √&radic; ª&ordf; Θ&Theta; γ&gamma; Â&Acirc; â&acirc; Ð&ETH; £&pound; §&sect; ∞&infin; ¹&sup1; Ξ&Xi; δ&delta; Ã&Atilde; ã&atilde; ð&eth; ¥&yen; ¶&para; ∝&prop; ²&sup2; Π&Pi; ε&epsilon; Ä&Auml; ä&auml; Ñ&Ntilde; ¤&curren; †&dagger; ×&times; ³&sup3; Σ&Sigma; ζ&zeta; Å&Aring; å&aring; ñ&ntilde; ƒ&fnof; ‡&Dagger; ÷&divide; ¼&frac14; Φ&Phi; η&eta; Æ&AElig; æ&aelig; Š&Scaron; ©&copy; ¡&iexcl; ∼&sim; ½&frac12; Ψ&Psi; θ&theta; È&Egrave; è&egrave; š&scaron; ®&reg; ¿&iquest; ≈&asymp; ¾&frac34; Ω&Omega; ι&iota; É&Eacute; é&eacute; ß&szlig; ™&trade; ‰&permil; ≅&cong; ∴&there4; ∇&nabla; κ&kappa; Ê&Ecirc; ê&ecirc; Þ&THORN; •&bull; ·&middot; ≡&equiv; ◊&loz; ∫&int; λ&lambda; Ë&Euml; ë&euml; þ&thorn; <&lt; ‘&lsquo; ≤&le; ∩&cap; ∑&sum; μ&mu; Ì&Igrave; ì&igrave; ´&acute; >&gt; ’&rsquo; ≥&ge; ∪&cup; ∏&prod; ν&nu; Í&Iacute; í&iacute; ¨&uml; ‹&lsaquo; ‚&sbquo; ≠&ne; ∧&and; ⊆&sube; ξ&xi; Î&Icirc; î&icirc; ¸&cedil; ›&rsaquo; “&ldquo; ′&prime; ∨&or; ⊇&supe; ο&omicron; Ï&Iuml; ï&iuml; ˆ&circ; «&laquo; ”&rdquo; ″&Prime; ∈&isin; ⊂&sub; π&pi; Ò&Ograve; ò&ograve; ˜&tilde; »&raquo; „&bdquo; ℘&weierp; ∉&notin; ⊄&nsub; ρ&rho; Ó&Oacute; ó&oacute; Ґ&#1168; "&quot; ¬&not; ℑ&image; ∋&ni; ⊃&sup; ς&sigmaf; Ô&Ocirc; ô&ocirc; ґ&#1169; &&amp; ¦&brvbar; ℜ&real; ∠&ang; ⊕&oplus; σ&sigma; Õ&Otilde; õ&otilde; І&#1030; µ&micro; ­&shy; ℵ&alefsym; ♠&spades; ⊗&otimes; τ&tau; Ö&Ouml; ö&ouml; і&#1110; ‾&oline; ¯&macr; ⋅&sdot; ♣&clubs; ⌈&lceil; υ&upsilon; Ø&Oslash; ø&oslash; Ї&#1031; ⁄&frasl;  &ensp; ∗&lowast; ♦&diams; ⌉&rceil; φ&phi; Œ&OElig; œ&oelig; ї&#1111; ∂&part;  &emsp; ↵&crarr; ♥&hearts; ⌊&lfloor; χ&chi; Ù&Ugrave; ù&ugrave; Є&#1028; ⊥&perp;  &thinsp; ↑&uarr; ⇑&uArr; ⌋&rfloor; ψ&psi; Ú&Uacute; ú&uacute; є&#1108; ∅&empty; ‌&zwnj; ↓&darr; ⇓&dArr; ⟨&lang; ω&omega; Û&Ucirc; û&ucirc; ₪&#8362; ∀&forall; ‍&zwj; ←&larr; ⇐&lArr; ⟩&rang; ϑ&thetasym; Ü&Uuml; ü&uuml; ☺&#9786; ∃&exist; ‼&#8252; →&rarr; ⇒&rArr; ♀&#9792; ϒ&upsih; Ý&Yacute; ý&yacute; ☻&#9787; ∄&#8708; №&#8470; ↔&harr; ⇔&hArr; ♂&#9794; ϖ&piv; Ÿ&Yuml; ÿ&yuml; █&#9608;

HTML 문서 기본 구조

앞으로 자주 쓰이게 될 html문서 기본구조를 알아봅시다.기본구조는 크게 <!doctype>, <html>, <head>, <body> 네 가지 태그가 있습니다. HTML<!doctype html><html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML을 시작해 볼까요</title> </head> <body> <h1>천천히 따라해보세요</h1> <p>쉽게 배울 수 있는 HTML5 / CSS3<br/> 언젠간 우리도 고수가 될 수 있겠지요?</p> </body></html>    <!doctype>은 문서유형을 지정하는 선언문 과거 HTML4에서는 여러가지 문서 유형이 있었지만 HTML5에서는 단 한줄로 간단하게 선언 가능웹 브라우저는 이 doctype 선언을 확인 후 HTML5에 맞추어 문서를 해석한다.  <html> 태그는 웹 문서의 시작을 알리는 태그 html 문서가 시작된다는 뜻으로 lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 한국어의 약자는 ko이며 lang="ko"와 같이 작성하면 된다.<html>과 </html> 사이에는 <head> 태그와 <body> 태그가 포함된다.  <head> 태그는 브라우저의 정보를 주는 태그 웹 브라우저가 알아야 할 정보는 <head>에 입력된다. <title>, <meta> 등이 있다.  <body> 태그는 실제 브라우저에 표시될 내용 <body>에 포함된 내용은 브라우저에 실제 표시되는 내용이며 위 예제는 실제 아래와 같이 출력된다. 천천히 따라해보세요 쉽게 배울 수 있는 HTML5 / CSS3 언젠간 우리도 고수가 될 수 있겠지요?


접속자집계

오늘
66
어제
132
전체
120089