소개
웹 개발에서, 우리는 때때로 웹 페이지에 프로그래밍 관련 또는 컴퓨터 관련 내용을 표시해야 합니다. 특정 함수 이름이나 변수 이름과 같은 특정 용어를 표시하려는 경우, <code> 태그를 사용하여 해당 용어를 묶을 수 있습니다. 이 태그는 묶인 텍스트의 글꼴을 courier와 같은 고정폭 글꼴 (monospaced font) 로 변경합니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
코드 태그 추가
먼저, 로컬 시스템에 index.html 파일을 생성하고 원하는 코드 편집기를 사용하여 엽니다.
다음으로, HTML 파일에 <code> 태그를 추가해 보겠습니다. 이 태그의 구문은 간단합니다. 표시하려는 텍스트를 묶는 시작 태그와 종료 태그가 있습니다.
<body>
<!-- Add the code tag -->
<p>This is an example of using the <code>code</code> tag in HTML.</p>
</body>
위의 코드 블록에서, 우리는 code라는 용어를 <code> 태그 안에 묶었습니다. 이렇게 하면 묶인 텍스트가 고정폭 글꼴로 표시됩니다.
여러 줄의 코드를 표시하기 위해 Pre 태그 추가
여러 줄의 프로그래밍 코드를 표시해야 하는 경우, <pre> 태그를 <code> 태그와 함께 사용하십시오. 다음 코드를 index.html 파일에 추가하여 이것이 어떻게 작동하는지 살펴보겠습니다.
<body>
<!-- Using the pre tag with the code tag -->
<pre>
<code>
function multiply(a, b) {
return a * b;
}
// Call the function
multiply(2, 3);
</code>
</pre>
</body>
이 코드 블록에서, 우리는 <pre> 태그를 사용하여 코드를 블록 형식으로 표시하려는 것을 나타냅니다. <pre> 태그 안에는 프로그래밍 코드를 묶고 있음을 나타내기 위해 <code> 태그를 추가합니다.
Global 속성 및 Event 속성 사용
<code> 태그와 함께 전역 속성 및 이벤트 속성을 사용할 수 있습니다.
<body>
<!-- Using global attributes with the code tag -->
<p>
<code class="highlight" style="color: red" title="This is a title"
>Some code</code
>
</p>
</body>
위의 코드 블록에서, 우리는 <code> 태그와 함께 class, style 및 title 속성을 사용합니다.
기본 CSS 스타일 추가
<code> 태그에 대한 스타일을 지정하지 않으면, 기본 CSS 설정을 사용합니다. 대부분의 브라우저는 <code> 태그에 대해 기본 글꼴 (font-family) 로 monospace를 사용합니다.
<body>
<!-- Default CSS style for HTML code tag -->
<p>
<code>Default CSS style</code>
</p>
</body>
요약
<code> 태그는 프로그래밍 관련 또는 컴퓨터 관련 콘텐츠를 묶는 데 사용됩니다. 이 태그를 사용하면 묶인 텍스트를 courier와 같은 고정폭 글꼴 (monospaced font) 로 표시할 수 있습니다. 또한, <pre> 태그를 <code> 태그와 함께 사용하여 프로그래밍 코드를 여러 줄로 표시할 수 있습니다. <code> 태그는 전역 속성 (global attributes) 및 이벤트 속성 (event attributes) 을 지원합니다. <code> 태그에 대한 스타일을 지정하지 않으면, 기본 CSS 설정을 사용하며, 기본 글꼴 (font-family) 로 monospace를 사용합니다.
