주요 내용

HTML은 온라인 콘텐츠를 표현하고 구조화하는 데 중요한 역할을 하므로 웹에 작품을 게시하는 작가에게 없어서는 안 될 도구입니다. 마크업 언어를 사용하면 검색 엔진 크롤러가 쉽게 이해할 수 있는 방식으로 텍스트를 시각적으로 표현할 수 있을 뿐만 아니라 텍스트를 구성할 수 있습니다.

HTML은 작성된 콘텐츠의 프레젠테이션과 미적 매력을 제어하기 위한 몇 가지 필수 태그 요소를 제공합니다. 작성자는 계층 구조를 설정할 수 있는 제목 태그, 특정 단어나 구를 강조하는 굵은체 및 이탤릭체 태그, 텍스트의 뚜렷한 섹션을 구분하는 단락 태그에 익숙해져야 합니다. 이러한 기본 태그를 숙지하면 작성자는 작품의 시각적 표현을 완벽하게 제어할 수 있습니다.

1. 번호 매기기 및 글머리 기호 목록과 표 서식을 활용하면 기사 내 정보 구성을 효과적으로 지원하고 미적 매력에 기여할 수 있습니다. 또한 이미지 태그를 통합하면 시각적 콘텐츠의 표현을 더욱 향상시킬 수 있습니다. 또한 하이퍼링크의 구현은 추가적인 컨텍스트를 제공하고 검색 엔진 순위에 긍정적인 영향을 줄 수 있습니다.

일부 기술 전문 기자들 사이에서는 HTML에 대한 지식이 불필요하다는 믿음이 널리 퍼져 있지만, 온라인 콘텐츠 게시에 있어 그 중요성은 과소평가되는 경우가 많습니다.

웹사이트는 콘텐츠의 시각적 표현을 보여주기 위해 HTML(하이퍼텍스트 마크업 언어)을 사용합니다. 다양한 마크다운 편집기, 웹사이트 빌더, 콘텐츠 관리 시스템에서 시각적 인터페이스로 문서를 편집할 수 있는 기능을 제공하지만, 이러한 도구가 효과적으로 작동하려면 기본 HTML 코드에 의존한다는 점에 유의하는 것이 중요합니다.

콘텐츠의 모양을 포괄적으로 제어하고 프레젠테이션을 정밀하게 조정하려면 핵심 HTML 요소를 숙지하는 것이 필수적입니다. 이러한 기본 태그를 통해 사용자는 형식을 세심하게 사용자 지정하면서 출력물을 완전히 제어할 수 있습니다.

제목 태그

제목 태그는 문서 내의 특정 섹션 또는 하위 섹션을 캡슐화하고 간결하게 요약하는 효과적인 수단으로 사용됩니다. 대부분의 경우 웹 브라우저는 더 크고 굵은 글꼴을 사용하여 제목 태그를 자동으로 표시하므로 주변 텍스트와 눈에 띄게 구분할 수 있습니다.

제목을 통해 시각적 정보를 전달할 뿐만 아니라 검색 엔진 크롤링 알고리즘이 쉽게 이해할 수 있는 구조적 프레임워크와 계층적 구성을 제공하여 웹페이지의 레이아웃을 보다 쉽게 파악할 수 있도록 합니다.

HTML에서 제목 태그를 사용하면 웹페이지의 콘텐츠를 효과적으로 구성할 수 있습니다.

태그는 페이지의 기본 제목 또는 헤더를 나타내며,

,

등과 같은 작은 태그는 문서 내의 후속 계층 구조를 나타냅니다. 이를 통해 웹 개발자는 탐색하고 읽기 쉬운 잘 구조화된 페이지를 만들 수 있습니다.

웹 디자인에서 제목을 활용할 때는 페이지의 콘텐츠와 컨텍스트를 모두 고려하는 것이 중요합니다.

태그는 고도로 전문적이거나 법적 구속력이 있는 문서에 적합하지만, 복잡한 구조로 인해 일반 독자에게는 어려움이 있을 수 있습니다. 따라서 웹페이지의 의도된 목적과 대상 독자에 맞는 적절한 제목 형식을 선택하는 것이 중요합니다.

반대로 제목 태그를 사용하면 문서를 관리하기 쉬운 부분으로 나눌 수 있으므로 독자의 접근성을 높일 수 있습니다. 광범위한 텍스트 블록은 개인이 온라인에서 글을 읽는 것을 방해할 수 있으며, 많은 사람들이 이러한 자료를 대충 훑어보는 경향이 있습니다. 제목 태그를 사용하면 연설자가 프레젠테이션을 계속하기 전에 잠시 멈추는 것처럼 독자가 잠시 숨을 고를 수 있는 기회를 제공합니다.

제목을 효과적으로 마무리하려면

과 같은 적절한 마무리 태그를 사용하는 것을 잊지 마세요.

굵게, 기울임꼴 및 기타 텍스트 서식

제목 태그는 웹 페이지의 전체 구조를 결정하는 데 필수적인 역할을 하며, 보다 구체적인 서식 태그를 사용하면 텍스트 내의 개별 요소에 미묘한 변화를 줄 수 있습니다. 예를 들어, 문장의 특정 부분을 강조하기 위해 여러 서식 태그를 사용할 수 있지만 이러한 변경 사항은 콘텐츠의 계층적 구성에 영향을 미치지 않습니다.

아래는 원본 문서가 수정된 영어입니다. HTML 태그에는 텍스트, 이미지 및 링크와 같은 많은 다른 유형의 요소가 포함되어 있습니다. 이러한 요소는 특정 속성을 추가하여 형식을 수정하고 실행할 수 있습니다. 예를 들어 태그를 사용하여 문자에 추가할 수 있지만 태그를 사용하여 텍스트로 설정할 수 있습니다. 이 외에도

생성 단계에 사용, 이미지 표시,

등 일반적으로 사용되는 몇 가지 태그도 있습니다.

취소선 텍스트는 ” ” HTML 태그를 사용하여 표시됩니다, 를 사용하여 표시되며, 이 태그는 텍스트를 취소하거나 삭제해야 함을 나타내기 위해 대각선으로 획을 그어 줄을 만듭니다. 이 태그는 웹페이지나 문서를 업데이트할 때와 같이 특정 정보가 더 이상 관련성이 없거나 정확하지 않음을 표시하려는 경우에 유용할 수 있습니다. ‘‘ 태그는 텍스트 본문 내에서 강조점을 만들거나 중요한 부분을 강조하는 데에도 사용할 수 있습니다.

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

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

단락 및 간격

~

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

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

몇몇 그래픽 사용자 인터페이스는 엔터 키를 누를 때와 같이 입력하는 과정에서 이러한 마커를 기계적으로 통합합니다. 그럼에도 불구하고 사용자가 원시 마크업을 표시하는 텍스트 편집기 내에서 작성하는 동안 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의 모든 측면을 다루지는 않는 경우가 많으므로 마크업 언어로 직접 작업하면 문서의 정확성과 표현력을 높일 수 있습니다.

              이 글도 확인해 보세요:  내부에서 REST API 호출을 수행하는 방법 VS 코드

By 최은지

윈도우(Windows)와 웹 서비스에 대한 전문 지식을 갖춘 노련한 UX 디자이너인 최은지님은 효율적이고 매력적인 디지털 경험을 개발하는 데 탁월한 능력을 발휘합니다. 사용자의 입장에서 생각하며 누구나 쉽게 접근하고 즐길 수 있는 콘텐츠를 개발하는 데 주력하고 있습니다. 사용자 경험을 향상시키기 위해 연구를 거듭하는 은지님은 All Things N 팀의 핵심 구성원으로 활약하고 있습니다.