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

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/my_profile.jpg" alt="제 프로필 사진입니다" width="300" height="200">

src (Source) 속성 (필수):
- 삽입할 이미지 파일의 경로를 지정합니다. HTML 파일 기준으로 이미지 파일이 어디에 위치하는지를 나타냅니다.
- 상대 경로: 현재 HTML 파일 위치를 기준으로 한 이미지 파일의 위치입니다.
  - 예: src="logo.png" (HTML 파일과 같은 폴더)
  - 예: src="images/banner.jpg" (HTML 파일이 있는 폴더 아래 images 폴더)
  - 예: src="../icons/home.png" (HTML 파일이 있는 폴더의 상위 폴더 아래 icons 폴더)
- 절대 경로: 웹상의 이미지 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로 확인해 보세요.

my_profile.html

<!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>
    <img src="https://via.placeholder.com/400x250?text=My+Learning+Journey" alt="학습 여정을 나타내는 이미지">
    <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로 어떻게 표현하는지 자세히 알아보았습니다. 이 세 가지 요소는 웹 페이지의 핵심 콘텐츠를 이루며, 이들을 능숙하게 다루는 것은 웹 개발의 필수적인 역량입니다.

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

On this page