[HTML] 정형화된 텍스트
2023. 3. 7. 01:26ㆍ기술 창고/HTML
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>정형화된 텍스트</title>
</head>
<body>
<h1>정형화된 텍스트</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate fugiat beatae facere eos labore error dolorum non, corrupti odit ipsum maiores quos exercitationem repellendus delectus repellat quas pariatur vero impedit?
</p>
<pre>
Lorem ipsum dolor, sit a
met consectetur adipisicing elit. Cupiditate fugiat beatae facere eos labore error dolorum non, corrupti odit ipsum maiores quos exercitationem repellendus delectus repellat quas pariatur vero impedit?
</pre>
<pre>
<code>
<script>
</script>
</code>
</pre>
</body>
</html>
<!--
# 태그 안에있는 텍스트를 아무리 개행을 해봣자 출력결과는 변함이 없다.
# <pre> = pre 태그 안에 있는 텍스트에 변화를 주면 그대로 출력되는 태그.
# <code> = 작성한 코드를 화면에 직접 보여주고 싶을 때 사용하는 태그
하지만 <> 태그 기호를 그대로 사용하면 나오지 않기 때문에 앞서 entity 코드를 사용하여
<> 기호를 그대로 출력되게 한다. (< >)
또한, pre 태그 처럼 code 태그 안의 텍스트 내용에 개행을 주거나 변경점을 주면
그대로 반영되어 나온다.
-->
- <pre> : pre 태그 안에 적은 텍스트는 변경을 준 내용 그대로 출력된다.
- <code> : 작성한 코드를 화면에 직접 보여주고 싶을 때 사용하는 태그. <, > 기호들을 사용하게 되면 태그로 인식되기 때문에 <, > 기호를 그대로 작성하면 안되고 < > 와 같은 entity 코드를 사용하여 해당 기호들을 사용한다.
# entity 코드 참고 사이트 : https://entitycode.com/
# 작성한 코드가 표준에 맞게 작성되었는지 확인 가능한 사이트 : https://validator.w3.org/
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
[HTML] list 목록 태그 (0) | 2023.03.07 |
---|---|
Visual Code 설치와 초기 html 작성 (0) | 2023.03.07 |
[HTML] 시멘틱 (semantic) 구분 (0) | 2023.03.07 |
[HTML] paragraph 텍스트 (0) | 2023.03.07 |
[HTML] Heading 태그 (0) | 2023.03.07 |