텍스트, 링크, 이미지 다루기

HTML에서 텍스트, 링크, 이미지는 웹 페이지의 기본적인 구성 요소입니다.

이 절에서는 이러한 요소들을 효과적으로 사용하는 방법과 접근성을 고려한 최선의 실천 방법을 알아보겠습니다.

텍스트 다루기

HTML은 다양한 텍스트 관련 태그를 제공하여 콘텐츠의 구조와 의미를 명확히 할 수 있습니다.

1. 제목 태그 <h1> - <h6>

문서의 구조를 나타내는 6단계의 제목을 정의합니다.
<h1>은 가장 중요한 제목, <h6>은 가장 낮은 수준의 제목을 나타냅니다.

제목 태그 예시

<h1>웹사이트 메인 제목</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션 제목</h3>

2. 단락 태그 <p>

텍스트 단락을 정의합니다.

단락 태그 예시

<p>이것은 하나의 단락입니다. 여러 문장을 포함할 수 있습니다.</p>

3. 강조 태그 <em>, <strong>

<em> : 강조하고 싶은 텍스트를 이탤릭체로 표시합니다.
<strong> : 더 강한 강조를 나타내며, 보통 볼드체로 표시됩니다.

강조 태그 예시

<p>이것은 <em>강조된</em> 텍스트이고, 이것은 <strong>매우 중요한</strong> 텍스트입니다.</p>

4. 인용 태그 <blockquote>, <q>

<blockquote> : 긴 인용문을 위한 태그입니다.
<q>: 짧은 인라인 인용을 위한 태그입니다.

인용 태그 예시

<blockquote>
   <p>이것은 긴 인용문입니다. 여러 줄에 걸쳐 표시될 수 있습니다.</p>
</blockquote>
<p>그리고 이것은 <q>짧은 인용</q>의 예시입니다.</p>

5. 줄바꿈 <br>과 수평선 <hr>

<br> : 강제 줄바꿈을 삽입합니다.
<hr> : 주제의 분리를 나타내는 수평선을 삽입합니다.

줄바꿈 예시

<p>첫 번째 줄<br>두 번째 줄</p>
<hr>
<p>새로운 섹션</p>

링크 만들기

링크는 <a> (앵커) 태그를 사용하여 생성합니다.

1. 기본 링크 구조

<a href="URL">링크 텍스트</a>

2. 외부 링크

다른 웹사이트로 연결하는 링크입니다.

외부 링크 예시

<a href="https://www.example.com">Example 웹사이트</a>

3. 내부 링크

같은 페이지 내의 다른 부분으로 연결하는 링크입니다.
목표 요소에 id 속성을 부여하고, href 속성에 #id를 사용합니다.

내부 링크 예시

<h2 id="section1">섹션 1</h2>
<p>일부 내용...</p>
<a href="#section1">섹션 1로 이동</a>

4. 새 탭에서 링크 열기

target="_blank" 속성을 사용합니다.

새 탭에서 링크 열기 예시

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

5. 이메일 링크

mailto: 프로토콜을 사용합니다.

이메일 링크 예시

<a href="mailto:example@example.com">이메일 보내기</a>

이미지 삽입하기

이미지는 <img> 태그를 사용하여 삽입합니다.

1. 기본 이미지 삽입

<img src="이미지_파일_경로" alt="대체 텍스트">

2. 필수 속성

src : 이미지 파일의 경로
alt : 이미지를 설명하는 대체 텍스트 (접근성을 위해 중요)

3. 추가 속성

width, height : 이미지의 폭과 높이를 지정
title : 이미지에 대한 추가 정보 (마우스 오버 시 툴팁으로 표시)

4. 반응형 이미지

CSS를 사용하여 이미지를 반응형으로 만들 수 있습니다.

반응형 이미지 예시

<style>
   img {
         max-width: 100%;
         height: auto;
   }
</style>
<img src="example.jpg" alt="반응형 이미지 예시">

5. 이미지 맵

하나의 이미지에 여러 개의 클릭 가능한 영역을 만듭니다.

이미지 맵 예시

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
   <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
   <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
</map>

접근성 고려사항

1. 대체 텍스트 제공

모든 의미 있는 이미지에 적절한 alt 속성을 제공합니다.
순수하게 장식 목적의 이미지는 alt=""로 처리합니다.

2. 명확한 링크 텍스트

"여기를 클릭하세요" 대신 링크의 목적을 명확히 설명하는 텍스트를 사용합니다.
예시 : "제품 상세 정보 보기"

3. 제목의 계층 구조

제목 태그 <h1> - <h6>를 순서대로 사용하여 문서의 구조를 명확히 합니다.

4. ARIA 레이블

필요한 경우 ARIA(Accessible Rich Internet Applications) 속성을 사용하여 추가적인 정보를 제공합니다.

ARIA 레이블 예시

<a href="profile.html" aria-label="사용자 프로필로 이동">프로필</a>

요소 조합 예시

다음은 텍스트, 링크, 이미지를 효과적으로 조합한 예시입니다.

<article>
    <h1>웹 개발의 기초</h1>
    <p>웹 개발은 <strong>HTML</strong>, <strong>CSS</strong>, 그리고 <strong>자바스크립트</strong>를 기본으로 합니다. 
    이 세 가지 기술을 마스터하면 다양한 웹 애플리케이션을 만들 수 있습니다.</p>
    
    <h2>HTML이란?</h2>
    <img src="html-logo.png" alt="HTML5 로고" width="100" height="100">
    <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. <em>시맨틱 태그</em>를 사용하여 
    콘텐츠의 의미를 명확히 할 수 있습니다.</p>
    <p>더 자세한 정보는 <a href="https://developer.mozilla.org/ko/docs/Web/HTML" 
    target="_blank">MDN Web Docs</a>에서 확인할 수 있습니다.</p>
 
    <h2>학습 리소스</h2>
    <ul>
        <li><a href="#html-tutorial">HTML 튜토리얼</a></li>
        <li><a href="#css-tutorial">CSS 튜토리얼</a></li>
        <li><a href="#js-tutorial">자바스크립트 튜토리얼</a></li>
    </ul>
 
    <hr>
 
    <footer>
        <p>질문이 있으신가요? <a href="mailto:support@example.com">이메일로 문의하기</a></p>
    </footer>
</article>

이 예시는 제목, 단락, 강조, 이미지, 내부 및 외부 링크, 목록 등 다양한 HTML 요소를 활용하여 구조화된 콘텐츠를 생성하는 방법을 보여줍니다.

각 요소는 의미적으로 적절하게 사용되었으며, 접근성을 고려하여 대체 텍스트와 명확한 링크 텍스트를 제공하고 있습니다.

이전으로 다음으로