Next.js 학습 자료

Next.js 프레임워크 학습을 위한 30장의 마크다운 자료입니다.

← 목록으로

챕터 4: HTML 기본 태그 완전 정복

서론

지난 챕터에서 div 태그를 통해 웹페이지의 구조를 만드는 방법을 배웠습니다. 하지만 웹페이지는 단순한 상자들의 모음이 아닙니다. 제목, 문단, 링크, 이미지, 버튼 등 다양한 요소들이 조화롭게 어우러져야 의미 있는 웹페이지가 됩니다. 마치 집을 지을 때 벽돌만 있는 것이 아니라 창문, 문, 지붕 등이 필요한 것처럼 말입니다.

이번 챕터에서는 웹페이지를 구성하는 핵심 HTML 태그들을 하나씩 자세히 알아보겠습니다. 이 태그들을 익히면 여러분은 실제로 사용 가능한 웹페이지를 만들 수 있게 될 것입니다. 각 태그의 의미와 사용법을 실습을 통해 체득하면서, 웹 개발의 기초를 더욱 탄탄히 다져보겠습니다.

본론

제목 태그 (h1~h6) - 콘텐츠의 계층 구조 만들기

제목 태그는 h1부터 h6까지 6단계로 구성되어 있습니다. h는 'heading'의 약자이고, 숫자가 작을수록 더 중요하고 큰 제목을 의미합니다. 이것은 책의 장, 절, 소절과 같은 개념입니다. 검색 엔진은 제목 태그를 통해 페이지의 구조와 중요한 내용을 파악하므로, 올바른 제목 태그 사용은 SEO(검색 엔진 최적화)에도 매우 중요합니다.

export default function Home() {
  return (
    <div>
      <h1>가장 큰 제목 - 페이지의 주제를 나타냅니다</h1>
      <h2>두 번째 제목 - 주요 섹션을 구분합니다</h2>
      <h3>세 번째 제목 - 하위 섹션을 나타냅니다</h3>
      <h4>네 번째 제목 - 더 세부적인 구분입니다</h4>
      <h5>다섯 번째 제목 - 거의 사용하지 않습니다</h5>
      <h6>가장 작은 제목 - 매우 세부적인 구분입니다</h6>
    </div>
  )
}

브라우저에서 확인하면 각 제목의 크기가 다르게 표시되는 것을 볼 수 있습니다. 만약 모든 제목이 같은 크기로 보인다면, Tailwind CSS가 기본 제목 스타일을 재설정했을 가능성이 있습니다. 이 경우 app/globals.css 파일에서 @import "tailwindcss"; 라인을 주석 처리하고 다시 확인해보세요.

/* @import "tailwindcss"; */

h1은 페이지당 하나만 사용하는 것이 권장되며, 나머지 제목들은 논리적인 순서에 따라 사용해야 합니다. h1 다음에 바로 h3를 사용하는 것보다는 h2를 거쳐가는 것이 좋습니다.

문단 태그 (p) - 읽기 쉬운 텍스트 구성

p 태그는 'paragraph'의 약자로, 문단을 나타냅니다. 일반적인 텍스트 콘텐츠는 모두 p 태그로 감싸는 것이 좋습니다. p 태그는 자동으로 위아래에 여백을 만들어 문단 간 구분을 명확하게 해줍니다.

export default function Home() {
  return (
    <div>
      <h1>웹 개발 입문</h1>
      <p>
        웹 개발은 인터넷 상에서 접근 가능한 웹사이트와 웹 애플리케이션을 
        만드는 과정입니다. HTML, CSS, JavaScript가 웹 개발의 기본 3요소입니다.
      </p>
      <p>
        Next.js는 React 기반의 프레임워크로, 현대적인 웹 애플리케이션을 
        쉽게 만들 수 있도록 도와줍니다. 서버 사이드 렌더링, 정적 사이트 생성 등 
        다양한 기능을 제공합니다.
      </p>
      <p>
        이 과정을 통해 여러분은 프로페셔널한 웹사이트를 만들 수 있는 
        능력을 갖추게 될 것입니다.
      </p>
    </div>
  )
}

링크 태그 (a) - 페이지 연결하기

a 태그는 'anchor'의 약자로, 다른 페이지나 같은 페이지의 다른 위치로 이동할 수 있는 링크를 만듭니다. href 속성에 이동할 주소를 지정합니다. Next.js에서는 내부 링크를 위해 Link 컴포넌트를 사용하지만, 지금은 기본 a 태그를 먼저 이해하는 것이 중요합니다.

export default function Home() {
  return (
    <div>
      <h1>유용한 링크 모음</h1>
      <p>
        <a href="https://www.google.com">구글로 이동하기</a>
      </p>
      <p>
        <a href="https://nextjs.org">Next.js 공식 사이트</a>
      </p>
      <p>
        <a href="/about">소개 페이지로 이동</a>
      </p>
      <p>
        <a href="mailto:example@email.com">이메일 보내기</a>
      </p>
      <p>
        <a href="tel:010-1234-5678">전화 걸기</a>
      </p>
    </div>
  )
}

다음으로, 외부 사이트로 이동하면서 현재 페이지를 유지하고 싶다면 태그에 target="_blank"를 사용합니다. 이때 새 탭으로 열린 페이지가 원래 페이지의 window 객체에 접근하지 못하도록 보안을 강화하기 위해 rel="noopener noreferrer"를 함께 지정하는 것이 좋습니다.

Next.js 공식 사이트 (새 탭에서 열기)

내부 페이지로 이동할 때는 Next.js의 Link 컴포넌트를 사용하는 것이 권장됩니다.

이미지 태그 (img) - 시각적 요소 추가하기

img 태그는 웹페이지에 이미지를 표시합니다. src 속성에 이미지 파일의 경로를 지정하고, alt 속성에는 이미지를 설명하는 텍스트를 작성합니다. alt 텍스트는 이미지가 로드되지 않을 때 표시되며, 스크린 리더를 사용하는 시각 장애인들에게도 중요한 정보를 제공합니다.

export default function Home() {
  return (
    <div>
      <h1>이미지 갤러리 </h1>
      <img 
        src="https://picsum.photos/300/200" 
        alt="우리 회사 로고" 
        width="200" 
        height="100"
      />
      <img 
        src="https://placehold.co/300x200" 
        alt="임시 이미지"
      />
      <div>
        <img 
          src="/profile.jpg" 
          alt="프로필 사진" 
          style={{ borderRadius: '50%' }}
        />
      </div>
    </div>
  )
}

Next.js에서는 성능 최적화를 위해 Image 컴포넌트를 사용하는 것이 권장되지만, 기본 img 태그의 동작 방식을 이해하는 것도 중요합니다.

목록 태그 (ul, ol, li) - 정보 구조화하기

목록은 관련된 항목들을 체계적으로 표시하는 데 사용됩니다. ul(unordered list)은 순서가 없는 목록, ol(ordered list)은 순서가 있는 목록을 만들며, li(list item)는 각 항목을 나타냅니다.

export default function Home() {
  return (
    <div>
      <h2>장보기 목록 (순서 없음)</h2>
      <ul>
        <li>우유</li>
        <li>빵</li>
        <li>계란</li>
        <li>과일
          <ul>
            <li>사과</li>
            <li>바나나</li>
            <li>오렌지</li>
          </ul>
        </li>
      </ul>

      <h2>요리 순서 (순서 있음)</h2>
      <ol>
        <li>재료를 준비합니다</li>
        <li>물을 끓입니다</li>
        <li>면을 넣고 3분간 끓입니다</li>
        <li>스프를 넣습니다</li>
        <li>그릇에 담아 맛있게 먹습니다</li>
      </ol>
    </div>
  )
}

목록은 중첩이 가능하여 복잡한 계층 구조도 표현할 수 있습니다. 네비게이션 메뉴를 만들 때도 자주 사용됩니다.

버튼 태그 (button) - 상호작용 요소

button 태그는 사용자가 클릭할 수 있는 버튼을 만듭니다. onClick 속성을 통해 클릭했을 때 실행할 동작을 지정할 수 있습니다. 여기서 등장하는 use client는 파일 최상단에 작성해 해당 파일을 클라이언트 컴포넌트로 지정하는 지시문입니다. 이를 설명하려면 더 많은 개념이 필요하므로 여기서는 생략하고 넘어가겠습니다.

"use client"

export default function Home() {
  return (
    <div>
      <h1>다양한 버튼들</h1>
      
      <button onClick={() => alert('안녕하세요!')}>
        인사하기
      </button>
      
      <button onClick={() => console.log('콘솔에 메시지 출력')}>
        콘솔 확인하기
      </button>
      
      <button disabled>
        비활성화된 버튼
      </button>
      
      <button style={{ backgroundColor: 'blue', color: 'white' }}>
        스타일이 적용된 버튼
      </button>
    </div>
  )
}

입력 태그 (input) - 사용자 입력 받기

input 태그는 사용자로부터 다양한 형태의 입력을 받을 수 있습니다. type 속성을 통해 텍스트, 숫자, 이메일, 비밀번호 등 다양한 입력 형식을 지정할 수 있습니다.

export default function Home() {
  return (
    <div>
      <h1>회원가입 폼</h1>
      
      <div>
        <label>이름:</label>
        <input type="text" placeholder="이름을 입력하세요" />
      </div>
      
      <div>
        <label>이메일:</label>
        <input type="email" placeholder="email@example.com" />
      </div>
      
      <div>
        <label>비밀번호:</label>
        <input type="password" placeholder="비밀번호" />
      </div>
      
      <div>
        <label>나이:</label>
        <input type="number" min="1" max="100" />
      </div>
      
      <div>
        <label>생년월일:</label>
        <input type="date" />
      </div>
      
      <div>
        <label>
          <input type="checkbox" /> 이용약관에 동의합니다
        </label>
      </div>
      
      <button>가입하기</button>
    </div>
  )
}

강조 태그들 (strong, em, span)

텍스트를 강조하거나 특별한 의미를 부여할 때 사용하는 태그들입니다. strong은 중요한 내용을 굵게, em은 강조할 내용을 기울임꼴로 표시합니다. span은 인라인 요소를 그룹화할 때 사용합니다.

export default function Home() {
  return (
    <div>
      <h1>텍스트 강조하기</h1>
      <p>
        이 문장에서 <strong>이 부분은 매우 중요합니다</strong>.
      </p>
      <p>
        <em>이 텍스트는 강조되어</em> 기울어져 표시됩니다.
      </p>
      <p>
        <span style={{ color: 'red' }}>빨간색</span>과 
        <span style={{ color: 'blue' }}> 파란색</span> 텍스트입니다.
      </p>
      <p>
        <strong><em>굵고 기울어진 텍스트</em></strong>도 만들 수 있습니다.
      </p>
    </div>
  )
}

결론

이번 챕터에서 우리는 웹페이지를 구성하는 핵심 HTML 태그들을 배웠습니다. 제목을 만드는 h1~h6, 문단을 구성하는 p, 링크를 연결하는 a, 이미지를 표시하는 img, 목록을 만드는 ul/ol/li, 상호작용을 위한 button과 input, 그리고 텍스트를 강조하는 strong, em, span까지 다양한 태그들을 살펴보았습니다.

이 태그들은 웹 개발의 기본 도구입니다. 마치 화가가 붓과 물감으로 그림을 그리듯, 개발자는 이 HTML 태그들로 웹페이지를 그려냅니다. 각 태그는 고유한 의미와 용도를 가지고 있으며, 이들을 적절히 조합하면 구조적으로 건전하고 의미가 명확한 웹페이지를 만들 수 있습니다.

다음 챕터에서는 이렇게 만든 HTML 구조에 스타일을 입히는 CSS에 대해 배워보겠습니다. 지금은 밋밋해 보이는 페이지가 CSS를 만나면 얼마나 아름답게 변신할 수 있는지 함께 확인해보시기 바랍니다!