2.1 태그 <pre>
<code>와 <pre> 태그는 HTML에서 코드 조각과 사전 포맷된 텍스트를 표시하는 데 사용해. 이 태그들은 가독성을 높이고 원본 텍스트의 포맷을 유지시켜 주는데, 특히 코드 예제나 기타 기술 자료를 표시하는 데 유용해.
<pre> (즉, "preformatted text") 태그는 본문에 작성된 대로 텍스트를 HTML에서 표시하는 데 사용하며, 모든 공백, 줄바꿈, 탭을 유지해. 이는 특히 큰 코드 조각이나 다른 사전 포맷된 텍스트를 표시하는 데 유용해.
구문:
<pre>
텍스트
</pre>
예제:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
이 예제에서 <pre> 태그 안의 텍스트는 원본 코드에서 작성된 그대로의 모든 공백과 줄바꿈을 유지하며 표시될 거야.
<pre> 태그의 특징:
<pre>태그는 텍스트의 모든 공백과 줄바꿈을 유지해- 텍스트를 모노스페이스 폰트로 표시해
- 코드를 강조하는 데 자주
<code>태그와 함께 사용해
2.2 태그 <code>
<code> 태그는 텍스트 내에서 코드 조각이나 다른 기계-판독 가능한 데이터를 표시하는 데 사용돼. 일반적으로 코드 라인, 변수, 함수 및 기타 프로그래밍 요소를 강조하는 데 사용해.
<code>코드</code>
예제:
<p>콘솔에 메시지를 출력하려면 <code>console.log()</code> 함수를 사용하세요.</p>
이 예제에서 "console.log()" 텍스트는 코드로 강조될 거야.
<code> 태그의 특징:
<code>태그는 텍스트를 모노스페이스 폰트(일반적으로 Courier 또는 Consolas)로 표시해- 줄바꿈이나 들여쓰기와 같은 포맷은 유지되지 않아
<code>태그는 종종<p>,<li>, 또는<pre>와 같은 다른 태그 안에서 사용돼
2.3 <pre>와 <code> 사용
큰 코드 블록을 강조하고 포맷하는 데 종종 함께 사용되는 태그는 <pre>와 <code>야. 이들은 포맷을 유지하고 텍스트를 코드로 강조해 줘.
예제:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
브라우저는 원본 포맷을 유지하고 코드를 강조해 텍스트를 표시할 거야.
2.4 구문 강조
Prism.js나 Highlight.js와 같은 서드파티 라이브러리를 사용해서 구문을 강조할 수 있어. 이들은 웹 페이지에서 코드를 자동으로 인식하고 강조해 줘.
Highlight.js 사용 예제:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
결과적으로 JavaScript 구문에 따라 코드 블록이 자동으로 강조될 거야.
HTML에서 <code>와 <pre> 태그는 코드와 다른 텍스트를 원본 포맷 그대로 표시하고 포맷하는 데 유용한 도구야. 잘 활용해봐!
GO TO FULL VERSION