주석의 활용은 핵심 아이디어를 강조하고, 용어를 정의하고, 특정 콘텐츠가 더 이상 사용되지 않거나 관련이 없음을 나타내는 등 다양한 용도로 사용됩니다. 제목과 마찬가지로 이러한 주석에는 주석과 관련된 특정 구절을 지정하기 위해 시작 및 닫기 태그가 필요합니다.

마크다운 및 콘텐츠 관리 시스템을 사용할 때, 이러한 플랫폼은 외부 소스에서 텍스트를 전송할 때 서식을 복제하는 것이 일반적입니다. 이 문제를 해결하려면 원본 소스 자료 내에서 불필요한 마크업을 제거하거나 복사한 텍스트의 서식을 제거한 후 지정된 필드에 붙여넣을 수 있습니다.

단락 및 간격

~

태그를 사용하여 콘텐츠를 구분하여 제목을 구성하는 것 외에도

태그를 사용하여 새 단락을 선언하고
태그를 사용하여 텍스트 본문 내에 줄 바꿈을 도입할 수 있습니다.

몇몇 그래픽 사용자 인터페이스는 엔터 키를 누를 때와 같이 입력하는 과정에서 이러한 마커를 기계적으로 통합합니다. 그럼에도 불구하고 사용자가 원시 마크업을 표시하는 텍스트 편집기 내에서 작성하는 동안 HTML 소스 코드에 직접 삽입할 수 있습니다.

또는 새 단락을 시작하지 않고도 연속된 텍스트 줄을 시각적으로 구분하고 싶다면 HTML 자동 닫기 태그 ”
“을 사용하는 것이 좋습니다. 예를 들어, 시를 작성할 때 각 구절이 하나의 통일된 사고의 흐름을 나타내므로 ”

” 요소를 사용하여 개별 구절을 묶지 않으려 한다고 가정해 보겠습니다. 이러한 경우 ”
” 태그를 신중하게 적용하는 것이 적절한 옵션이 됩니다.

태그는 해당 종결 태그가 없으므로 독립적으로 사용할 수 있다는 점에서 독특합니다. 이러한 특징은 영향을 미치거나 설명할 콘텐츠가 없다는 사실에서 비롯됩니다.

적절한 HTML 태그를 사용하는 것은 확립된 디자인 원칙을 준수하고 시각적으로 매력적인 웹 콘텐츠를 만드는 데 매우 중요하며, 이는 신뢰할 수 있을 뿐만 아니라 향상된 사용자 경험으로 인해 검색 엔진 결과 페이지에서 더 높은 순위를 차지할 수 있습니다.

숫자 및 글머리 기호

숫자 및 글머리 기호를 활용하는 것은 정보를 정렬하는 효과적인 방법입니다. 구성 요소의 그룹화 또는 수행해야 할 작업 순서와 같이 서로 다른 요소의 모음을 제시할 때 목록은 적절한 구성 수단으로 사용됩니다.

정렬된 목록 또는 정렬되지 않은 목록을 구성하려면 각각

및
태그를 활용합니다. 전자는 항목을 숫자 순서로 표시하는 데 사용되며 후자는 항목을 글머리 기호로 표시하는 데 사용됩니다. 원하는 목록 형식을 결정한 후에는
• 태그를 사용하여 개별 목록 항목을 표시합니다.

   <ol>
       <li>alpha</li>
       <li>bravo</li>
       <li>charlie</li>
       <li>delta</li>
       <li>echo</li>
  </ol>
   

  앞서 언급한 마크업은 웹 브라우저에서 렌더링될 때 다음 형식과 유사한 프레젠테이션을 표시합니다:

  

  물론입니다! 다음은 HTML 코드를 사용하여 글머리 기호 목록을 만드는 방법의 예입니다: “`php

  HTML로 글머리 기호 목록을 만들려면

  태그를 사용하고 태그 내에 각 항목을 추가할 수 있습니다.

  예를 들어:

   
   
   항목 1 
   
   항목 2 
   
   항목 3 
   
   

  이렇게 하면 세 개의 항목이 포함된 글머리 기호 목록이 생성됩니다.

  태그에 클래스 또는 스타일을 추가하여 글머리 기호 모양을 사용자 지정할 수도 있습니다. 예를 들어 불릿의 색상을 변경하려는 경우

  원문에서는 `

  `(정렬된 목록) 및 `
  `(정렬되지 않은 목록) HTML 태그를 사용하여 중첩된 목록을 사용하여 다단계 구조를 표시할 수 있다고 제안합니다. 예를 들어 다음과 같은 목록을 생성하고자 하는 시나리오를 생각해 보겠습니다:

  

  고품질 번역을 위해서는 언어적 전문성뿐만 아니라 문화적 뉘앙스와 문맥에 대한 이해, 원문에 충실하면서 자연스럽고 유창하게 의미를 전달하는 능력이 필요합니다. 이러한 수준의 숙련도를 갖추기 위해 번역사는 광범위한 교육과 연습을 거쳐야 하며, 지속적인 학습과 연마를 통해 기술을 연마해야 합니다. 또한 기계 번역 도구 및 용어 데이터베이스와 같은 기술을 활용하면 효율성과 정확성을 개선하여 처리 시간을 단축하고 프로젝트 전반에서 일관성을 높일 수 있습니다. 전반적으로 전문 번역사의 역할은 기술적 지식과 예술적 기술을 모두 요구하며, 원어의 고유한 특성을 보존하면서 의도한 메시지를 효과적으로 전달하는 최종 결과물을 만들어야 합니다.

   <ol>
    <li>alpha</li>
    <li>
      bravo
      <ol>
        <li>Hip</li>
        <li>Hip</li>
        <li>Hooray</li>
      </ol>
    </li>
    <li>charlie</li>
    <li>
      delta
      <ul>
        <li>Difference</li>
        <li>River mouth</li>
      </ul>
    </li>
    <li>echo</li>
  </ol> 

  다양한 목록 유형을 포괄하는 중첩 목록을 활용하여 보다 복잡한 구조적 요소를 캡슐화하고 청중의 이해를 돕기 위해 정보를 체계적으로 제시함으로써 당면한 주제에 대한 이해도를 높일 수 있습니다.

  표 만들기

  상호 연결된 수많은 데이터 요소를 다룰 때는 표 형식을 활용하는 것이 효과적인 접근 방식이 될 수 있습니다. 글머리 기호와 숫자는 제한된 양의 정보를 표시하는 데 적합하지만, 더 복잡한 데이터 집합에 직면할 때는 표 형식으로 표시하는 것이 현명한 경우가 많습니다.

  물론입니다! 다음은 HTML 코드를 사용하여 간단한 표를 만드는 방법의 예입니다: “`html

  열 제목	다른 열 제목
  행 1, 셀 1	행 1, 셀 2
  행 2, 셀 1	행 2, 셀 2

  “` 이

  확실히! 다음은 각각 4개의 항목이 포함된 두 개의 열과 첫 번째 행에 머리글 제목이 있는 샘플 테이블입니다.

   <table>
       <tr>
            <th>Group 1</th>
            <th>Group 2</th>
       </tr>
       <tr>
            <td>Mark</td>
            <td>Belle</td>
       </tr>
       <tr>
            <td>Ralph</td>
            <td>Shane</td>
       </tr>
       <tr>
            <td>John</td>
            <td>Josie</td>
       </tr>
  </table>
   

  앞서 언급한 테이블의 표현은 다음과 같이 브라우징 환경의 범위 내에서 찾을 수 있습니다:

  

  HTML을 사용하여 표를 구성할 때는 열이 아닌 행을 추가한다는 점에 유의해야 합니다. 테두리 스타일 구현, 개별 행의 색상 지정 및 기타 시각적 장식을 통해 표의 모양을 향상시키기 위해 CSS를 사용할 수도 있습니다.

  이미지 추가

  웹 문서 내에 시각적 요소를 통합하는 것은 텍스트 콘텐츠 인코딩과 비교할 때 고유한 과제를 제시합니다. 이미지는 일반적으로 텍스트 기반 데이터로 구성되지 않기 때문에 별도의 파일에 별도로 저장해야 합니다. 또한 이러한 이미지 파일의 위치를 지정하는 메커니즘을 적절한 HTML 태그와 함께 사용해야 합니다.

  요소를 사용하면 문서 내에 시각적 이미지를 통합할 수 있지만, 함께 제공되는 이미지 파일의 위치를 나타내기 위해 “속성”이라는 HTML 기능을 사용하는 것이 필수적입니다. 이러한 속성은 태그 지정자 다음에 위치하되, 끝나는 꺾쇠 괄호 앞에 배치해야 합니다. 특성에는 가치와 결합된 별칭이 있으며, 이 별칭은 등호 기호를 사용하여 연결됩니다. 속성의 값은 반드시 큰따옴표로 묶어야 합니다.

   <img alt="tree leaves and branches"
      src="https://images.unsplash.com/photo-673558-f9bb768644e7"> 

  요소의 “src” 속성은 이미지가 외부에서 호스팅되는지 또는 HTML 문서와 동일한 서버에서 호스팅되는지에 따라 상대 경로 또는 절대 경로가 될 수 있는 소스 이미지의 URL을 지정합니다.

  요소의 “alt” 속성은 이미지의 내용을 전달하는 역할을 하는 “대체 텍스트”의 개념을 나타냅니다. 이 속성은 화면 리더 사용자와 검색 엔진 크롤러 모두에게 가치가 있으므로 포함할 것을 적극 권장합니다. 시각 장애 또는 기술적 제약과 같은 특정 제약으로 인해 원본 이미지를 볼 수 없는 사용자는 대체 텍스트가 제공하는 정보를 통해 큰 이점을 얻을 수 있습니다.

  HTML 요소는 웹 페이지에 삽입할 수 있는 이미지의 그래픽 표현입니다. 첫 번째 부분인 ” “는 브라우저에 이미지가 표시되어야 함을 나타내고 두 번째 부분인 ” “는 명령의 끝을 태그하는 두 부분으로 구성됩니다. 태그에는 웹 페이지 내에서 로드 및 표시할 이미지 파일의 위치 또는 소스를 지정하는 “src” 속성이 필요합니다.

  

  소스 URL의 파일이 어떤 형태로든 존재하지 않는 경우를 포함하여 합법적인 이미지의 기준을 충족하지 못하는 경우 브라우저는 일반적으로 대체 텍스트와 함께 빈 직사각형 모양을 콘텐츠로 표시합니다.

  HTML을 통한 링크 추가

  HTML은 웹사이트 내의 다른 웹페이지 또는 외부 웹페이지를 연결할 수 있는 하이퍼링크라는 고유한 기능이 특징입니다. 이러한 링크는 표시되는 정보에 추가적인 컨텍스트를 제공할 뿐만 아니라 검색 엔진 결과에서 관련성과 순위를 높여줍니다.

  하이퍼링크를 포함하려면 링크의 목적지로 의도된 URL이 포함된 “href” 속성이 있는 요소를 사용합니다. 및 해당 태그 안에 포함된 콘텐츠는 대화형 콘텐츠가 되어 사용자가 클릭하여 다른 웹페이지로 이동할 수 있습니다.

   <a href="https://www.makeuseof.com/author/jowi-morales">
   Jowi Morales All Things N Page
  </a>
  
   

  HTML을 알면 삶이 더 쉬워집니다

  시각적으로 작업하는 것은 많은 마크다운 편집기와 콘텐츠 관리 시스템의 공통된 기능입니다. 하지만 기본적인 HTML에 대한 지식은 여러 가지 이유로 여전히 가치가 있습니다.

  웹 콘텐츠의 모양과 관련된 문제를 식별하고 해결하려면 HTML에 대한 포괄적인 이해가 필수적입니다. 시각적 편집 도구는 유용하지만 HTML의 모든 측면을 다루지는 않는 경우가 많으므로 마크업 언어로 직접 작업하면 문서의 정확성과 표현력을 높일 수 있습니다.

  이 글도 확인해 보세요:  Vite로 React 앱을 설정하는 방법