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

앞 글에서는 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">

위 그림은 한 문서 안에 있는 텍스트, 링크, 이미지가 각각 무엇을 제공하는지 보여 줍니다. 제목, 문단, 목록은 읽기 구조를 만들고, 링크는 프로필이라는 이름과 #profile이라는 목적지를 가지며, 정보 이미지는 파일 경로와 의미를 설명하는 대체 텍스트, 비율을 알려 주는 너비와 높이를 가집니다. 링크에서 id="profile"인 section으로 향하는 화살표만 이동 관계이고, 나머지는 같은 문서에 함께 놓인 요소일 뿐 처리 순서가 아닙니다.

그림 아래쪽의 설명처럼 CSS는 텍스트와 이미지의 배치를 정하지만, 기본 읽기 순서와 키보드 초점의 순서는 DOM의 순서에서 시작합니다. 또 장식용 이미지는 alt=""로 비워 스크린 리더가 건너뛰게 합니다.

텍스트 다루기

웹 페이지에서 정보를 전하는 기본 수단은 텍스트입니다. HTML은 텍스트의 의미와 구조를 나타내는 여러 요소를 제공합니다.

제목: <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>

이 문서의 계층은 들여쓰기가 아니라 제목의 숫자로 정해집니다. “주요 서비스”와 “연혁”이 h2로 같은 단계이고, 그 아래의 h3들이 각 섹션의 하위 제목입니다.

문단: <p>

<p>는 텍스트의 한 문단을 나타내며 가장 많이 쓰는 텍스트 요소입니다. 브라우저는 기본으로 문단의 위아래에 여백을 둡니다.

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

HTML은 연속된 공백과 줄 바꿈을 공백 하나로 처리합니다. 그래서 코드에서 문단 안의 문장을 두 줄로 나눠 적어도 화면에서는 한 줄로 이어져 보이며, 문단을 나누려면 <p>를 따로 씁니다.

줄 바꿈: <br>

<br>은 텍스트 안에서 줄을 바꿉니다. 내용과 종료 태그가 없는 빈 요소입니다.

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

이 코드는 세 줄로 나뉘어 보입니다. <br>은 같은 문단 안에서 줄만 바꿀 뿐 새 문단을 만들지 않으므로, 주소나 시처럼 줄 바꿈 자체가 내용의 일부일 때 씁니다. 문단 사이를 띄우려고 <br>을 여러 번 쓰는 대신 <p>로 문단을 나누고, 간격은 CSS로 조절합니다.

텍스트의 의미 표시

텍스트의 일부에 의미를 더하거나 스타일을 적용할 때는 다음 요소를 씁니다.

• <strong>: 내용이 중요하다는 것을 나타냅니다. 보통 굵게 표시됩니다. 예를 들어 <strong>주의!</strong> 이 정보를 꼭 확인하세요.처럼 씁니다.
• <em>: 문장 안에서 힘주어 읽을 부분을 나타냅니다. 보통 기울여 표시됩니다. 예를 들어 이것은 정말 <em>흥미로운</em> 사실입니다.처럼 씁니다.
• <span>: 아무 의미가 없는 인라인 묶음입니다. 기본 스타일도 없으므로 주로 CSS를 적용할 범위를 묶을 때 씁니다. 예를 들어 <span class="warning">경고!</span>처럼 클래스를 붙여 CSS로 색을 정합니다.

<strong>과 <em>은 의미를 전하기 위한 요소입니다. 의미 없이 굵게 하거나 기울이기만 하려면 CSS의 font-weight와 font-style을 씁니다.

목록: <ul>, <ol>, <li>

정보를 나열할 때는 목록을 씁니다. <ul>(unordered list)은 순서 없는 목록, <ol>(ordered list)은 순서 있는 목록이며, 각 항목은 <li>(list item)로 씁니다.

순서 없는 목록은 항목 앞에 글머리 기호가 붙으며, 내비게이션 메뉴나 분류 목록처럼 순서가 의미 없는 항목에 씁니다.

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

브라우저는 위 목록의 세 항목 앞에 기본 글머리 기호인 검은 원을 붙이고, 목록 전체를 왼쪽에서 조금 들여 씁니다. 반면 순서 있는 목록은 항목 앞에 1, 2, 3 같은 번호가 붙으며, 단계별 설명이나 순위처럼 순서가 의미를 가지는 항목에 씁니다.

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

번호는 HTML에 직접 쓰지 않아도 브라우저가 <li>의 순서대로 매깁니다. 그래서 중간에 항목을 넣거나 빼도 번호가 저절로 다시 매겨집니다. 목록 안에 목록을 넣고 싶다면 <ul>이나 <ol> 바로 아래가 아니라 <li> 안에 새 목록을 넣어야 올바른 구조가 됩니다.

링크 다루기: <a>

웹이라는 이름처럼 웹 페이지들은 링크로 서로 연결되어 있습니다. 다른 페이지나 같은 문서의 특정 위치로 연결하는 링크(hyperlink)는 <a>(anchor) 요소로 만듭니다.

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

이동하는 링크를 만들려면 href(hypertext reference) 속성에 목적지를 적습니다. href가 없는 <a>는 링크로 동작하지 않고 키보드 초점도 받지 않습니다. 목적지는 다음처럼 적습니다.

• 다른 사이트: https://로 시작하는 절대 URL을 씁니다. 예를 들어 <a href="https://www.naver.com">네이버</a>처럼 씁니다.
• 같은 사이트의 다른 페이지: 현재 파일을 기준으로 한 상대 경로를 씁니다. <a href="about.html">회사 소개</a>는 같은 폴더의 about.html로, <a href="pages/contact.html">연락처</a>는 현재 폴더 아래 pages 폴더의 contact.html로 이동합니다.
• 같은 문서의 특정 위치: # 뒤에 목적지 요소의 id를 씁니다. <a href="#section1">섹션 1로 이동</a>을 누르면 <h2 id="section1">첫 번째 섹션</h2>처럼 같은 id를 가진 요소로 이동합니다.

target 속성은 링크를 열 위치를 정합니다. 기본값인 _self는 현재 창에서, _blank는 새 탭이나 새 창에서 엽니다. _parent와 _top은 iframe 안에 들어간 문서에서 부모 문서나 가장 바깥 문서에 링크를 열 때 씁니다. 새 탭을 여는 링크는 사용자가 예상하지 못할 수 있으므로, 꼭 필요할 때만 쓰고 링크 글자에 새 탭에서 열린다는 것을 알려 주면 좋습니다.

title 속성은 보충 설명으로, 마우스를 올리면 툴팁으로 나타날 수 있습니다. 하지만 키보드나 터치 화면에서는 툴팁이 보이지 않을 수 있으므로, 목적지를 알 수 있는 중요한 내용은 <a href="portfolio.html">포트폴리오</a>처럼 링크의 보이는 글자에 적습니다.

<a> 안에 <img>를 넣으면 이미지를 클릭했을 때 이동하는 이미지 링크가 됩니다.

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

이미지 링크에는 글자가 없으므로, 이미지의 alt가 곧 링크의 이름이 됩니다. 스크린 리더는 이 링크를 “깃허브 로고, 링크”처럼 읽어 줍니다.

이미지 다루기: <img>

이미지는 <img> 요소로 넣습니다. 내용과 종료 태그가 없는 빈 요소입니다.

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

src(source) 속성에는 이미지 파일의 경로를 적으며 반드시 있어야 합니다. 상대 경로는 HTML 파일의 위치를 기준으로 합니다. src="logo.png"는 HTML 파일과 같은 폴더의 파일을, src="images/logo.png"는 그 아래 images 폴더의 파일을, src="../logo.png"는 한 단계 위 폴더의 파일을 가리킵니다. 다른 사이트의 이미지는 src="https://www.example.com/images/header_logo.png"처럼 절대 URL로 적습니다.

alt(alternative text) 속성은 이미지를 불러오지 못했을 때 대신 보이는 텍스트이자, 스크린 리더가 이미지를 설명할 때 읽는 텍스트입니다. 접근성과 검색 엔진 모두에 중요하므로 정보를 전하는 이미지에는 항상 의미 있는 alt를 줍니다. 예를 들어 <img src="dog.jpg" alt="강아지가 웃고 있는 사진">처럼 사진이 전하는 내용을 씁니다. 장식용이라 내용에 중요한 정보가 없는 이미지는 alt=""처럼 빈 값을 주어 스크린 리더가 건너뛰게 합니다. alt 속성 자체를 빼면 스크린 리더가 파일 이름을 읽기도 합니다.

width와 height 속성은 이미지의 너비와 높이를 픽셀 단위로 정합니다. 이 값을 적어 두면 브라우저가 이미지를 받기 전에 가로세로 비율대로 자리를 미리 잡으므로, 이미지가 늦게 도착해 아래 내용이 갑자기 밀려나는 레이아웃 이동(layout shift)이 줄어듭니다. CSS의 max-width: 100%; height: auto;와 함께 쓰면, 원본 비율은 HTML이 알려 주고 실제 표시 크기는 좁은 화면에 맞춰 CSS가 줄일 수 있습니다. 실제 이미지와 다른 비율을 적으면 자리 계산이 어긋나므로 원본 크기를 확인해 적습니다. 자세한 동작은 MDN의 img 크기 설명에 나와 있습니다.

더 깊이: CSS가 크기를 바꿔도 비율이 남는 이유

width와 height 속성은 화면의 크기만 정하는 것이 아닙니다. HTML 표준의 렌더링 규칙에 따르면, img의 두 속성은 CSS의 width, height 속성과 함께 aspect-ratio 속성으로도 옮겨집니다. 이렇게 HTML 속성이 바꾼 CSS 값을 표현 힌트(presentational hint)라고 하며, 결과는 aspect-ratio: auto 800 / 600 같은 값입니다. 표현 힌트는 작성자의 CSS보다 우선순위가 낮아서, CSS에서 width를 다시 정하면 그 값이 이깁니다.

여기서 auto가 핵심입니다. 이미지를 받기 전에는 속성으로 계산한 800 대 600의 비율을 쓰고, 이미지를 받은 뒤에는 실제 파일의 비율을 씁니다. 그래서 CSS에서 max-width: 100%; height: auto;로 너비를 줄여도, 브라우저는 줄어든 너비와 속성의 비율로 높이를 미리 계산해 자리를 잡아 둘 수 있습니다. 반응형 디자인이 퍼지던 때에는 CSS로 크기를 맞추면서 두 속성을 아예 빼는 일이 많았는데, 그러면 브라우저가 이미지를 받기 전까지 자리를 잡지 못해 아래 내용이 밀려났습니다. 지금은 두 속성을 적고 CSS로 표시 크기를 줄이는 방식을 함께 쓰면 됩니다.

같은 규칙이 video와 canvas, 그리고 type="image"인 input의 width와 height에도 적용됩니다. 반면 iframe의 두 속성은 크기로만 옮겨지고 비율은 만들지 않으므로, 동영상 플레이어를 담은 iframe처럼 비율을 지켜야 하는 경우에는 CSS의 aspect-ratio를 직접 적어야 합니다.

실습: 학습 일지 페이지

배운 내용으로 간단한 페이지를 만들어 봅니다. 1장의 my_profile.html을 다른 이름으로 복사해 보관한 뒤, 이 파일을 아래 코드로 바꿉니다. 이 예제는 CSS를 <style> 안에 직접 담고 있으며, 1장의 문의 버튼과 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;
            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> 요소는 아직 없습니다. 맨 위로 이동 링크의 href="#top"은 HTML 표준이 정한 특별한 목적지로, 문서에 id="top"인 요소가 없으면 문서의 맨 위로 이동합니다. 다른 위치로 이동하려면 #이름과 같은 id를 가진 요소가 있어야 합니다. .highlight는 <span>에 붙인 클래스에 노란 배경을 주는 CSS 규칙이며, 이미지 규칙은 연습 문제에서 사진을 넣을 때 쓰입니다.

정리

• <h1>부터 <h6>은 문서의 계층을 나타내며, 크기가 아니라 구조를 위해 단계를 건너뛰지 않고 씁니다.
• <p>는 문단, <br>은 문단 안의 줄 바꿈이며, HTML은 연속된 공백과 줄 바꿈을 공백 하나로 처리합니다.
• <strong>과 <em>은 의미를 더하고, <span>은 의미 없이 CSS를 적용할 범위를 묶습니다.
• <a>의 href에는 절대 URL, 상대 경로, #id를 적으며, 링크의 목적은 보이는 글자로 알려 줍니다.
• <img>의 src는 HTML 파일 기준의 경로이고, alt는 이미지의 의미를 전하며 장식용은 빈 값으로 둡니다.
• width와 height는 이미지를 받기 전에 자리를 잡아 레이아웃 이동을 줄입니다.

연습 문제

1. 사진 넣기

my_profile.html 옆에 images 폴더를 만들고, 직접 준비한 사진을 profile.jpg로 넣었습니다. 첫 문단 아래에 이 사진을 넣는 <img>를 써 보세요. src와 alt에는 무엇을 적어야 할까요?

2. 폴더를 옮긴 사진

사진 파일을 images 폴더에서 photos 폴더로 옮겼는데 HTML은 그대로 두었습니다. 제목, 링크, 사진 중 무엇이 달라질까요? 고칠 곳은 어디일까요?

3. 같은 페이지의 목적지

학습 일지 페이지의 “나에 대해 더 알아보기” 제목으로 바로 가는 링크를 페이지 맨 위에 만들려고 합니다. 링크와 목적지에 각각 무엇을 적어야 할까요?

다음 글 리스트, 테이블, 폼 요소에서는 표로 데이터를 정리하고, 폼으로 사용자의 입력을 받는 방법을 다룹니다.