HTML 코드 형식 마스터하기

소개

웹 개발에서, 우리는 때때로 웹 페이지에 프로그래밍 관련 또는 컴퓨터 관련 내용을 표시해야 합니다. 특정 함수 이름이나 변수 이름과 같은 특정 용어를 표시하려는 경우, <code> 태그를 사용하여 해당 용어를 묶을 수 있습니다. 이 태그는 묶인 텍스트의 글꼴을 courier와 같은 고정폭 글꼴 (monospaced font) 로 변경합니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

코드 태그 추가

먼저, 로컬 시스템에 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를 사용합니다.

HTML 컴퓨터 코드

소개

코드 태그 추가

여러 줄의 코드를 표시하기 위해 Pre 태그 추가

Global 속성 및 Event 속성 사용

기본 CSS 스타일 추가

요약