Reference/HTML

<pre> 태그는 마크업의 공백을 그대로 보여줍니다.

by @webs 2022. 11. 15.

<pre>

<pre> 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 <code> 태그와 같이 사용됩니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	적용
버전	HTML4
시각적 표현	monospace 폰트로 표현
사용성	★★★☆☆

정의(Definition)

<pre> 태그는 마크업의 공백을 그대로 보여줍니다.
<pre> 태그는 코드를 표현할 때 <code> 태그와 같이 사용합니다.
마크업의 한칸 이상 공백은 브라우저에서 한칸으로 표현됩니다. 두칸이상의 공백을 표현하고 싶다면 <pre>를 사용해야 합니다.

줄바꿈과 관련된 태그 및 속성

<br> 태그는 텍스트 줄바꿈을 설정합니다.
<wbr> 태그는 의미가 없는 텍스트 줄바꿈을 설정합니다.
<pre> 태그는 공백을 설정합니다.
white-space 속성은 줄바꿈, 공백 여부를 설정합니다.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.

속성(Property)

	속성	값(예)	설명	버전
글로벌 속성	accesskey	accesskey = "a"	키보드 단축키 힌트를 제공합니다.	-
	autocapitalize	autocapitalize = "off"	텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다.	-
	autofocus	autofocus	문서가 로딩되면 해당 요소에 포커서를 설정합니다.	-
	contenteditable	contenteditable = "true"	사용자가 콘텐츠를 편집할 수 있는지 설정합니다.	-
	class	class = "className"	클래스 이름을 설정합니다.	-
	data-*	data-name = "name"	사용자가 지정하여 속성을 설정할 수 있습니다.	-
	dir	dir = "rtl"	요소 글씨의 방향을 설정합니다.	-
	draggable	draggable = "true"	드래그 사용할 수 있는지 설정합니다.	-
	enterkeyhint	enterkeyhint = "next"	엔터 키에 대한 힌트를 설정합니다.	-
	hidden	hidden	요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다.	-
	id	id = "name"	고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다.	-
	inputmode	inputmode = "email"	브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다	-
	itemid	itemid = "name"	아이템 요소의 고유 식별자 아이디를 설정합니다.	-
	itemprop	itemprop = "name"	아이템 요소의 고유 식별자 속성을 설정합니다.	-
	itemref	itemref = "name"	아이템 요소의 고유 식별자를 연결합니다.	-
	itemscope	itemscope	아이템 요소의 범위를 설정합니다.	-
	lang	lang = "ko"	요소의 언어를 설정합니다.	-
	spellcheck	spellcheck = "true"	요소의 맞춤법 검사 여부를 설정합니다.	-
	style	style = "margin: 0"	요소의 적용할 CSS 속성을 설정합니다.	-
	tabindex	tabindex = "0"	요소의 탭 인덱스를 설정합니다.	-
	title	title = "titleName"	요소의 타이틀을 설정합니다.	-
	translate	translate = "no"	요소의 번역 여부를 설정합니다.	-

예제1(Sample)

공백을 그대로 보여주는 예제입니다.

                                ˚∧＿∧   +        —̳͟͞͞💗
                                (  •‿• )つ  —̳͟͞͞ 💗         —̳͟͞͞💗 +
                                (つ　 <                —̳͟͞͞💗
                                 | _つ      +  —̳͟͞͞💗         —̳͟͞͞💗 ˚
                                `し´

HTML

CSS

SCRIPT

<pre>
                        ˚∧＿∧   +        —̳͟͞͞💗
                        (  •‿• )つ  —̳͟͞͞ 💗         —̳͟͞͞💗 +
                        (つ　 <                —̳͟͞͞💗
                        | _つ      +  —̳͟͞͞💗         —̳͟͞͞💗 ˚
                        `し´
</pre>

/* css none */

//Javascript none

예제2(Sample)

코드를 보여주는 예제입니다.

document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});

HTML

CSS

SCRIPT

<pre><code>
    document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
        btn.addEventListener("click", (e)=> {
            const text = btn.innerText;
            document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
                box.setAttribute("style", text);
            })
        })
    });
</code></pre>