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

바로 앞 절에서는 HTML 문서 구조와 요소·태그·속성을 구분했습니다. 이제 같은 골격 안에서 콘텐츠와 연결 주소를 작성합니다.

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

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

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

<h1>소개</h1>
<p>본문</p>
<ul><li>관심사</li></ul>

<a href="#profile">
  프로필
</a>
<section id="profile">
  …
</section>

<img src="avatar.png"
  alt="프로필 사진"
  width="160"
  height="160">

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

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

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

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>은 자식 콘텐츠와 종료 태그가 없는 빈 요소입니다. HTML에서 /를 써서 요소를 닫는 XML식 self-closing 개념과는 구분합니다.

<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) 속성
  • 목적지로 이동하는 하이퍼링크를 만들려면 href로 주소를 지정합니다. href 없는 a는 같은 이동 링크로 동작하지 않습니다.
  • 외부 링크: 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: HTML의 width·height로 원본의 가로세로 비율을 알려 주고, CSS의 max-width: 100%; height: auto;로 좁은 부모 영역에서의 표시 크기를 조절할 수 있습니다. 두 방식은 함께 쓸 수 있습니다. 원본과 다른 비율을 적으면 공간 예측이나 표시가 달라질 수 있으므로 실제 이미지 크기를 확인하세요. MDN의 이미지 크기 설명은 로드 전에 비율을 이용해 공간을 확보하는 이유를 설명합니다.

텍스트, 링크, 이미지를 실제 페이지에 배치할 때는 먼저 각 요소가 맡을 정보와 이동 목적을 확인합니다.

이 절의 통합 다이어그램은 텍스트, 링크, 이미지가 실제 페이지에서 서로 어떤 정보를 맡는지 비교해 정리합니다.

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

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

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

1장의 my_profile.html을 복사해 보관한 뒤 아래 코드로 바꾸어 확인해 보세요. 이 완성 예제는 자체 style을 포함하며 이전 문의 버튼과 profile_script.js 연결을 포함하지 않습니다. 앞 실습의 문의 동작을 누적해 완성하는 단계로 보지 말고, 이번에는 텍스트·링크를 관찰합니다.

<!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> 요소는 포함되어 있지 않습니다.

이미지와 경로를 스스로 연결하기

my_profile.html 옆에 images 폴더를 만들고 자신이 사용할 수 있는 사진 한 장을 profile.jpg로 넣으세요. 소개 문단 아래에 img를 추가할 때 src를 무엇으로 쓸지 먼저 적습니다. 정보 사진이라면 사진이 전달할 내용을 alt로 설명하고, 실제 원본의 width·height도 확인해 작성합니다. 파일은 직접 준비해야 하며 이 예제에 사진이 포함되어 있지는 않습니다.

이제 사진 파일을 photos 폴더로 옮겼는데 HTML은 그대로라고 가정합니다. 제목·링크·사진 중 무엇이 달라질지 예측하고, 코드에서 고칠 주소 하나를 고르세요.

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

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