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

1장에서는 HTML 문서의 기본적인 구조와 요소, 태그, 속성 등 HTML 문법의 핵심 개념들을 살펴보았습니다.

이제 이러한 지식을 바탕으로 웹 페이지를 구성하는 가장 보편적인 콘텐츠인 텍스트, 링크, 그리고 이미지를 HTML로 어떻게 다루는지 구체적으로 알아보겠습니다.

이 세 가지 요소는 거의 모든 웹 페이지에 필수적으로 포함됩니다.

이들을 능숙하게 다루는 것은 웹 개발의 시작이자 매우 중요한 기술입니다.

텍스트 콘텐츠 다루기: 정보 전달의 기본

텍스트, 링크, 이미지 다루기에서는 태그 의미, 브라우저 해석, 사용자에게 보이는 결과를 연결합니다.

웹 페이지에서 가장 핵심적인 정보 전달 수단은 바로 텍스트입니다.

HTML은 다양한 텍스트 요소를 제공하여 텍스트의 의미와 구조를 명확하게 표현할 수 있도록 돕습니다.

제목 (Headings): <h1> ~ <h6>

제목 태그는 문서의 구조와 계층을 나타내는 데 사용됩니다.

<h1>이 가장 중요한 최상위 제목을 의미하며, <h6>으로 갈수록 중요도가 낮아집니다.

• <h1>: 페이지의 주요 제목 (가장 중요)
• <h2>: 주요 섹션의 제목
• <h3> ~ <h6>: 하위 섹션의 제목

제목 태그는 단순히 글씨 크기를 키우는 용도가 아닙니다.

검색 엔진이 웹 페이지의 내용을 파악하거나, 스크린 리더가 사용자에게 문서 구조를 전달할 때 중요한 역할을 하므로, 논리적인 순서(예: <h1> 다음에 바로 <h3>이 오지 않도록)로 사용하는 것이 중요합니다.

<h1>우리 회사 소개</h1>
    <p>저희 회사는 웹 기술을 활용해 고객의 문제를 해결합니다.</p>

    <h2>주요 서비스</h2>
        <h3>웹 개발</h3>
        <p>최신 웹 기술을 활용하여 맞춤형 웹사이트를 제작합니다.</p>

        <h3>모바일 앱 개발</h3>
        <p>iOS와 Android 플랫폼에서 뛰어난 사용자 경험을 제공하는 앱을 만듭니다.</p>

    <h2>연혁</h2>
        <h3>2020년</h3>
        <p>회사 설립 및 첫 서비스 론칭</p>

단락 (Paragraph): <p>

텍스트 단락을 정의할 때 사용합니다.

웹 페이지에서 가장 흔하게 사용되는 텍스트 요소 중 하나입니다.

각 <p> 태그는 기본적으로 위아래로 여백을 가집니다.

<p>
    이것은 첫 번째 단락입니다.
    웹 개발은 구조와 스타일, 동작을 함께 다루는 작업입니다.
</p>
<p>
    이것은 두 번째 단락입니다.
    꾸준히 학습하면 멋진 결과물을 만들 수 있습니다.
</p>

줄 바꿈 (Line Break): <br>

텍스트 내에서 강제로 줄을 바꿀 때 사용합니다.

<br>은 닫는 태그가 없는 빈 태그(self-closing tag)입니다.

<p> 태그와 혼동하기 쉽지만, <br>은 단순한 줄 바꿈이지 새로운 단락을 의미하지 않습니다.

안녕하세요.<br>
반갑습니다.<br>
이것은 세 줄로 나뉘어 표시됩니다.

텍스트 서식 (Text Formatting)

텍스트의 의미나 중요도를 강조하거나 특정 스타일을 적용할 때 사용합니다.

• <strong>: 내용의 중요성을 강조합니다. (시각적으로는 보통 굵게 표시됩니다.)
  • 예: <strong>주의!</strong> 이 정보는 매우 중요합니다.
• <em>: 내용의 강조를 나타냅니다. (시각적으로는 보통 기울임꼴로 표시됩니다.)
  • 예: 이것은 정말 <em>흥미로운</em> 사실입니다.
• <span>: 아무런 의미 없는 인라인 컨테이너입니다. 주로 CSS를 적용하기 위해 텍스트의 특정 부분을 묶을 때 사용됩니다.
  • 예: <span style="color: red;">경고!</span> 이 메시지를 확인해주세요.
  • <span>은 기본적으로 어떤 스타일도 적용되지 않으므로, CSS와 함께 사용될 때 유용합니다.

💡 Tip: 단순히 텍스트를 굵게 하거나 기울이는 시각적인 목적으로는 CSS를 사용하는 것이 더 권장됩니다.

<strong>과 <em>은 의미론적인 강조를 위해 사용됩니다.

목록 (Lists): <ul>, <ol>, <li>

정보를 나열할 때 사용되는 목록 태그는 <ul>(순서 없는 목록), <ol>(순서 있는 목록) 두 가지가 있으며, 각 목록의 항목은 <li>(List Item) 태그로 정의합니다.

• 순서 없는 목록 (<ul>, Unordered List): 항목 앞에 글머리 기호(bullet point)가 붙습니다. 내비게이션 메뉴, 카테고리 목록 등에 주로 사용됩니다.

  <h3>오늘 할 일</h3>
  <ul>
      <li>HTML 공부하기</li>
      <li>CSS 학습하기</li>
      <li>자바스크립트 예제 풀기</li>
  </ul>

• 순서 있는 목록 (<ol>, Ordered List): 항목 앞에 숫자나 알파벳 등 순서가 표시됩니다. 단계별 설명, 순위 목록 등에 사용됩니다.

  <h3>웹 개발 학습 순서</h3>
  <ol>
      <li>HTML 기본 문법 익히기</li>
      <li>CSS 스타일링 배우기</li>
      <li>자바스크립트 로직 구현하기</li>
  </ol>

링크 다루기: 웹 페이지 간 연결하기 (<a>)

웹을 월드 와이드 웹(World Wide Web)이라고 부르는 이유 중 하나는 바로 웹 페이지들이 서로 거미줄처럼 연결되어 있기 때문입니다.

HTML에서 다른 웹 페이지나 문서의 특정 부분으로 연결하는 역할을 하는 것이 바로 링크(Hyperlink)이며, 이는 <a> (anchor) 태그를 사용하여 만듭니다.

<a href="https://www.google.com">구글로 이동</a>

• href (Hypertext REFerence) 속성 (필수)
  • 링크를 클릭했을 때 이동할 목적지 URL을 지정합니다.
  • 외부 링크: https:// 또는 http://로 시작하는 절대 경로(Absolute Path)를 사용합니다.
    • 예: <a href="https://www.naver.com">네이버</a>
  • 내부 링크 (같은 웹사이트 내): 파일 이름이나 상대 경로(Relative Path)를 사용합니다.
    • 예: <a href="about.html">회사 소개</a> (현재 폴더의 about.html로 이동)
    • 예: <a href="pages/contact.html">연락처</a> (현재 폴더 아래 pages 폴더의 contact.html로 이동)
  • 같은 페이지 내 특정 위치로 이동 (앵커 링크):
    • <a> 태그의 href에 #을 붙여 이동할 요소의 id 값을 지정합니다.
    • 목적지 요소에는 해당 id 값을 부여해야 합니다.
    • 예: <a href="#section1">섹션 1로 이동</a>
    • <h2 id="section1">첫 번째 섹션</h2>
• target 속성
  • 링크를 클릭했을 때 문서를 열 방법을 지정합니다.
  • _self (기본값): 현재 창에서 엽니다.
  • _blank: 새로운 탭 또는 창에서 엽니다. 외부 링크를 열 때 주로 사용합니다.
    • 예: <a href="https://www.google.com" target="_blank">새 탭에서 구글</a>
  • _parent: 부모 프레임에서 엽니다. (프레임셋 사용 시)
  • _top: 최상위 프레임에서 엽니다. (프레임셋 사용 시)
• title 속성
  • 링크에 마우스를 올렸을 때 나타나는 툴팁 텍스트를 제공합니다. 사용자의 이해를 돕습니다.
    • 예: <a href="portfolio.html" title="나의 포트폴리오를 확인하세요">포트폴리오</a>

• 이미지 링크: <a> 태그 안에 <img> 태그를 넣어 이미지를 클릭하면 링크로 이동하게 할 수 있습니다.

  <a href="https://github.com" target="_blank">
      <img src="github_logo.png" alt="깃허브 로고" width="50">
  </a>

이미지 다루기 (<img>)

웹 페이지에서 텍스트만큼 중요한 시각적 요소는 바로 이미지입니다.

HTML에서 이미지를 삽입할 때는 <img> (image) 태그를 사용합니다.

<img> 태그는 닫는 태그가 없는 빈 태그입니다.

<img src="images/logo.png" alt="제 프로필 사진입니다" width="300" height="200">

• src (Source) 속성 (필수):

  • 삽입할 이미지 파일의 경로를 지정합니다. HTML 파일 기준으로 이미지 파일이 어디에 위치하는지를 나타냅니다.
  • 상대 경로: 현재 HTML 파일 위치를 기준으로 한 이미지 파일의 위치입니다.
    • 예: src="logo.png" (HTML 파일과 같은 폴더)
    • 예: src="images/logo.png" (HTML 파일이 있는 폴더 아래 images 폴더)
    • 예: src="../logo.png" (HTML 파일이 있는 폴더의 상위 폴더 기준 경로)
  • 절대 경로: 웹상의 이미지 URL을 직접 사용할 수 있습니다.
    • 예: src="https://www.example.com/images/header_logo.png"

• alt (Alternative Text) 속성 (필수):

  • 이미지가 어떤 이유로든 로드되지 않았을 때(경로 오류, 네트워크 문제 등) 대신 표시될 텍스트입니다.
  • 시각 장애인 사용자를 위한 스크린 리더가 이미지를 설명할 때 사용하는 텍스트이기도 합니다.
  • 웹 접근성 및 SEO에 매우 중요하므로, 이미지를 삽입할 때는 항상 의미 있는 alt 값을 제공해야 합니다.
    • 예: <img src="broken.jpg" alt="강아지가 웃고 있는 사진">
    • 만약 이미지가 순전히 디자인 목적이고 콘텐츠에 중요한 정보가 아니라면 alt=""와 같이 빈 값으로 두어 스크린 리더가 건너뛰도록 할 수 있습니다.

• width, height 속성:

  • 이미지의 너비와 높이를 픽셀 단위로 지정합니다. 이 속성을 사용하면 브라우저가 이미지를 로드하기 전에 이미지 영역을 미리 확보하여 레이아웃이 갑자기 변경되는 현상(Layout Shift)을 줄일 수 있습니다.
  • 💡 Tip: 이미지의 실제 크기를 직접 지정하는 것은 현대 웹 개발에서는 지양되는 경향이 있습니다. 반응형 웹 디자인을 위해 CSS를 사용하여 이미지의 크기를 조절하는 것이 더 유연하고 권장됩니다. 예를 들어, max-width: 100%; height: auto; 속성을 CSS에 적용하면 이미지가 부모 요소의 크기에 맞춰 반응적으로 조절됩니다.

아래 다이어그램은 텍스트, 링크, 이미지를 실제 페이지에 배치할 때 먼저 확인할 선택 기준을 정리한 것입니다.

아래 다이어그램은 텍스트, 링크, 이미지가 실제 페이지에서 서로 어떤 정보를 맡는지 비교하며 정리한 것입니다.

텍스트, 링크, 이미지를 배치할 때는 화면 모양뿐 아니라 문서의 읽기 순서와 접근성 정보를 함께 설계해야 합니다.

실습: 간단한 소개 페이지 만들기

이제 배운 내용을 바탕으로 간단한 웹 페이지를 만들어봅시다.

1장에서 만들었던 my_profile.html을 수정하여 아래 코드를 작성하고 Live Server로 확인해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 페이지 - 웹 개발 연습</title>
    <style>
        /* CSS를 간단히 추가하여 보기 좋게 만듭니다. */
        body {
            font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
            background-color: #e6e6fa; /* 연한 보라색 */
            color: #333;
            line-height: 1.6;
            margin: 20px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            max-width: 800px;
            margin: 20px auto; /* 중앙 정렬 */
        }
        h1, h2 {
            color: #4b0082; /* 진한 보라색 */
            text-align: center;
        }
        img {
            max-width: 100%; /* 부모 너비에 맞춰 이미지가 줄어들도록 */
            height: auto; /* 비율 유지 */
            display: block; /* 이미지 하단 여백 제거 및 중앙 정렬을 위한 블록 요소화 */
            margin: 20px auto;
            border-radius: 8px;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
        }
        ul {
            list-style-type: disc; /* 기본 글머리 기호 */
            margin-left: 20px;
        }
        a {
            color: #007bff; /* 파란색 링크 */
            text-decoration: none; /* 밑줄 제거 */
            font-weight: bold;
        }
        a:hover {
            text-decoration: underline; /* 마우스 오버 시 밑줄 */
        }
        .highlight {
            background-color: yellow;
            padding: 2px 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>환영합니다! 나의 웹 개발 학습 일지</h1>
    <p>
        이 페이지는 제가 HTML, CSS, 자바스크립트를 학습하며 만드는 <span class="highlight">첫 번째 웹 페이지</span>입니다.
        이곳에 저의 학습 진행 상황과 흥미로운 발견들을 기록할 예정입니다.
    </p>

    <h2>나에 대해 더 알아보기</h2>

    <p>
        저는 새로운 기술을 배우는 것을 즐기며, 특히 웹 개발에 깊은 흥미를 느끼고 있습니다.
        이 책과 함께 여러분과 함께 성장하고 싶습니다.
    </p>

    <h3>제가 좋아하는 것들:</h3>
    <ul>
        <li>코딩 (특히 HTML, CSS)</li>
        <li>맛있는 음식 탐방</li>
        <li>새로운 지식 탐구</li>
    </ul>

    <h2>연결 링크</h2>
    <p>
        추가 자료는 아래 링크에서 확인할 수 있습니다.
        <a href="https://www.google.com" target="_blank" title="새 탭에서 구글 검색">Google 검색하기</a>
        <br>
        <a href="https://github.com/your-username" target="_blank" title="제 깃허브 프로필">제 GitHub 프로필 방문하기</a> (실습 시 본인 GitHub 계정으로 경로를 변경)
    </p>

    <h2>페이지 하단</h2>
    <p>
        <a href="#top">맨 위로 이동</a>
    </p>
</body>
</html>

위 예시에서는 <img> 태그의 src 속성에 임시 이미지 링크를 사용했습니다.

여러분은 실제 이미지 파일을 다운로드하여 web-dev-practice 폴더 내에 images 폴더를 만들고 그 안에 저장한 후, src="images/여러분이미지.jpg"와 같이 상대 경로로 변경하여 사용할 수 있습니다.

이번 장에서는 웹 페이지의 가장 기본적인 구성 요소인 텍스트, 링크, 이미지를 HTML로 어떻게 표현하는지 자세히 알아보았습니다.

이 세 가지 요소는 웹 페이지의 핵심 콘텐츠를 이루며, 이들을 능숙하게 다루는 것은 웹 개발의 필수적인 역량입니다.