[네이버 부스트코스 웹 프로그래밍 풀스택]프론트 엔드 (2) - HTML

이영락·2024년 9월 24일

개발자 기본기

목록 보기
27/53

🏖️ HTML Tags

HTML 태그는 웹 페이지에서 콘텐츠를 구조화하는 기본 요소이다. 각각의 태그는 고유한 의미를 가지고 있으며, 이를 적절하게 사용하는 것이 웹 페이지의 Semantic(의미적)한 구조를 만드는 핵심이다.

들어가기 전에

HTML 태그는 그 의미에 맞춰서 사용해야 한다. HTML은 문서의 구조를 표현하기 위해 다양한 태그를 제공하며, 각 태그는 특정 역할을 한다. 이를 Semantic한 태그라고 표현한다.

학습 목표

  • 다양한 HTML 태그를 이해하고, 적절하게 사용할 수 있다.

핵심 개념

1. HTML 태그의 종류

다음은 웹 페이지에서 자주 사용되는 주요 HTML 태그들이다:

  • 링크 태그 (anchor tag, <a>): 다른 페이지나 외부 리소스로 이동할 때 사용한다.

    <a href="https://www.example.com">링크 텍스트</a>

  • 이미지 태그 (<img>): 웹 페이지에 이미지를 삽입할 때 사용한다.

    <img src="image.jpg" alt="이미지 설명">

  • 목록 태그 (<ul>, <li>): 목록을 만들 때 사용한다. ul은 순서가 없는 리스트, li는 각각의 항목을 의미한다.

    <ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

  • 제목 태그 (<h1>, <h2>...<h6>): 문서의 제목이나 부제목을 설정할 때 사용한다.

    <h1>최상위 제목</h1>
<h2>부제목</h2>

  • 단락 태그 (<p>): 텍스트를 단락으로 나눌 때 사용한다.

    <p>이것은 단락입니다.</p>

  • div 태그 (<div>): 문서의 영역을 나눌 때 사용하며, block 요소이다.

    <div>이곳은 div 영역입니다.</div>

2. Semantic 태그의 중요성

Semantic 태그는 문서의 구조와 내용을 더 명확하게 표현하는 데 중요한 역할을 한다. 예를 들어, 단순히 텍스트를 묶기 위해 div 태그를 사용하는 것보다, 해당 텍스트가 제목이라면 h1이나 h2와 같은 태그를 사용하는 것이 더 의미적이다. 이를 통해 검색 엔진이 페이지의 콘텐츠를 더 잘 이해할 수 있다.

학습하기

HTML 태그 실습

다음은 HTML 태그를 사용하여 간단한 페이지를 구성한 예시이다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML 태그 예시</title>
</head>
<body>
  <div>
    <h1>반갑습니다</h1>
    <p>여기 여러분들이 좋아하는 과일이 있어요.</p>
    <ul>
      <li><a href="http://www.apple.com">사과</a></li>
      <li>메론</li>
      <li>귤</li>
    </ul>
  </div>
</body>
</html>

실습 코드 설명

  1. div 태그는 페이지의 큰 구조를 나누기 위해 사용되었다.
  2. h1 태그는 문서의 제목을 나타내고, p 태그는 설명을 추가한다.
  3. ul과 li 태그는 목록을 생성하며, a 태그는 외부 링크를 추가하였다.

참고 자료

HTML Element Reference
HTML의 다양한 태그와 그 용도에 대해 자세히 살펴볼 수 있는 자료이다.

다음은 요청하신 내용을 바탕으로 "HTML Layout 태그" 주제를 벨로그 형식에 맞춰 정리한 것입니다. 각 제목은 대단원과 중단원 형식으로 구성하고, 핵심 개념과 실습 예제를 포함했습니다.

🏖️ HTML Layout 태그

HTML Layout은 웹 페이지의 구조를 정의하는 데 중요한 역할을 한다. 레이아웃을 구성하는 태그는 페이지의 각 영역을 명확하게 나누며, 이 태그들을 적절히 사용하는 것이 웹 페이지의 가독성 및 접근성을 향상시킨다.

들어가기 전에

레이아웃(Layout)이란 페이지의 정보 요소를 화면 상의 어느 위치에 배치할지 결정하는 것을 의미한다. 상단의 header, 하단의 footer, 그리고 본문 영역을 구성하는 데 필요한 다양한 HTML 태그를 배워보자.

학습 목표

  • 레이아웃 태그를 이해하고, 이를 적절하게 사용하여 웹 페이지 구조를 설계할 수 있다.

핵심 개념

1. HTML 레이아웃 태그

레이아웃을 구성하는 데 사용되는 HTML 태그들은 각각 의미에 맞게 사용되어야 한다. 이러한 태그들은 페이지의 각 영역을 명확하게 구분하고, Semantic한 구조를 형성한다.

  1. header 태그
    페이지나 섹션의 상단을 나타내며, 주로 제목, 로고, 네비게이션 메뉴 등을 포함한다.

    <header>
  <h1>사이트 제목</h1>
</header>

  2. nav 태그
    페이지 내에서 주요한 네비게이션 링크를 포함하는 영역을 나타낸다.

    <nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

  3. section 태그
    페이지의 주요 내용을 그룹화하는 데 사용되며, 콘텐츠를 논리적으로 구분하는 역할을 한다.

    <section>
  <h2>섹션 제목</h2>
  <p>이곳은 섹션의 본문입니다.</p>
</section>

  4. aside 태그
    본문 내용과 관련된 부가적인 정보를 나타내며, 주로 사이드바나 관련 링크를 포함한다.

    <aside>
  <h3>관련 링크</h3>
  <ul>
    <li><a href="#">링크1</a></li>
    <li><a href="#">링크2</a></li>
  </ul>
</aside>

  5. footer 태그
    페이지나 섹션의 하단을 나타내며, 주로 저작권 정보, 연락처, 사이트 맵 등이 포함된다.

    <footer>
  <p>© 2024 사이트 이름. All rights reserved.</p>
</footer>

학습하기

레이아웃 태그 실습

다음은 HTML 레이아웃 태그를 사용하여 간단한 웹 페이지를 구성한 예시이다:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Layout 예시</title>
</head>
<body>

  <header>
    <h1>사이트 제목</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>소개</h2>
    <p>여기는 본문 영역입니다.</p>
  </section>

  <aside>
    <h3>관련 링크</h3>
    <ul>
      <li><a href="#">링크1</a></li>
      <li><a href="#">링크2</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2024 사이트 이름. All rights reserved.</p>
  </footer>

</body>
</html>

실습 코드 설명

  1. header 태그는 페이지의 상단 영역을 나타내며, 제목과 네비게이션 메뉴가 포함되었다.
  2. nav 태그는 네비게이션 링크를 그룹화하여 사용자가 페이지의 다른 섹션으로 이동할 수 있도록 한다.
  3. section 태그는 페이지의 주요 콘텐츠를 감싸고 있으며, 소개 섹션을 나타낸다.
  4. aside 태그는 본문과 관련된 추가적인 링크를 제공하는 부가적인 정보 영역이다.
  5. footer 태그는 페이지의 하단에 저작권 정보와 같은 내용을 표시한다.

생각해보기

  1. 간단한 웹 페이지를 만든다고 가정하고, 상단, 네비게이션, 본문, 하단 영역을 레이아웃 태그를 사용해 구성해보세요. 이때, 각 영역에 맞는 Semantic 태그를 사용하는 것이 중요합니다.
  2. 다른 웹사이트의 소스 코드를 분석하여 레이아웃 태그들이 어떻게 사용되고 있는지 살펴보세요.

참고 자료

Standard HTML5 Semantic Layout
HTML5의 표준 Semantic Layout 태그들을 살펴볼 수 있는 자료이다.

다음은 요청하신 내용을 바탕으로 "HTML 구조설계" 주제를 벨로그 형식에 맞춰 정리한 것입니다. 각 제목은 대단원과 중단원 형식으로 구성하고, 핵심 개념과 실습 예제를 포함했습니다.

🏖️ HTML 구조설계

HTML 구조 설계는 웹 페이지를 개발할 때 문서의 구조를 정의하는 중요한 단계이다. 웹 페이지는 제목, 본문, 이미지, 목록 등으로 이루어지며, 이러한 요소들을 효율적으로 구성하기 위해서는 적절한 HTML 태그를 사용하여 구조를 설계하는 것이 중요하다.

들어가기 전에

웹 페이지를 만드는 것은 마치 문서를 작성하는 것과 같다. 제목, 단락, 이미지 등의 요소를 논리적으로 배치하고, 그에 맞는 HTML 태그를 사용하여 페이지의 구조를 설계하는 것이 중요하다. CSS를 적용하기 전에 먼저 HTML로 구조를 설계하는 것이 전체 페이지의 뼈대를 잡는 데 큰 도움이 된다.

학습 목표

  • HTML만을 사용하여 페이지의 구조를 설계할 수 있다.
  • 웹 페이지의 상단, 본문, 하단 영역을 논리적으로 분리하여 설계할 수 있다.

핵심 개념

1. HTML 구조화 설계

HTML 구조 설계는 웹 페이지의 정보를 논리적으로 구분하여 적절한 태그를 사용해 문서의 뼈대를 잡는 과정이다. 웹 페이지는 크게 상단, 본문, 하단 영역으로 나눌 수 있으며, 이러한 각 영역에 맞는 태그를 사용하는 것이 중요하다.

2. 상단, 본문, 하단의 주요 HTML 태그

  1. header 태그
    상단 영역을 나타내며, 제목, 로고, 네비게이션 메뉴 등을 포함한다.

    <header>
  <h1>회사명</h1>
  <img src="logo.jpg" alt="로고">
</header>

  2. nav 태그
    네비게이션 메뉴를 그룹화하여 페이지 내 주요 링크를 제공한다.

    <nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

  3. section 태그
    페이지의 주요 콘텐츠를 나누는 데 사용되며, 각 섹션은 논리적으로 구분된 정보를 나타낸다.

    <section>
  <h2>우리가 하는 일</h2>
  <p>여기는 본문입니다.</p>
</section>

  4. footer 태그
    하단 영역을 나타내며, 저작권 정보나 사이트맵 등을 포함할 수 있다.

    <footer>
  <span>© 2024 회사명. All rights reserved.</span>
</footer>

학습하기

HTML 구조 설계 실습

다음은 HTML 구조 설계를 위한 예시 코드로, 상단, 본문, 하단을 논리적으로 나눈 웹 페이지 구조를 보여준다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 구조 설계 예시</title>
</head>
<body>

  <!-- 상단 영역 -->
  <header>
    <h1>Company Name</h1>
    <img src="logo.jpg" alt="Company Logo">
  </header>

  <!-- 네비게이션 메뉴 -->
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>
  </nav>

  <!-- 본문 영역 -->
  <div>
    <section>
      <h2>What We Do</h2>
      <p>Here is an example of what we do. Lorem ipsum dolor sit amet...</p>
    </section>

    <section>
      <h2>Our Team</h2>
      <p>We have a team of professionals. Lorem ipsum dolor sit amet...</p>
    </section>
  </div>

  <!-- 하단 영역 -->
  <footer>
    <span>© 2024 Company Name. All rights reserved.</span>
  </footer>

</body>
</html>

실습 코드 설명

  1. header 태그는 상단 영역을 정의하며, 제목과 로고 이미지를 포함하고 있다.
  2. nav 태그는 네비게이션 메뉴를 그룹화하여, 페이지 간 이동을 쉽게 한다.
  3. section 태그는 페이지의 주요 콘텐츠 영역을 정의하며, 각각의 섹션은 논리적으로 구분된 내용을 포함하고 있다.
  4. footer 태그는 페이지의 하단 영역을 나타내며, 저작권 정보와 같은 내용을 표시한다.

생각해보기

  1. 자주 사용하는 웹사이트의 HTML 구조를 분석해보세요. 상단(header), 하단(footer) 영역을 중심으로 태그가 어떻게 구성되어 있는지 확인해보면 도움이 됩니다.
  2. 여러분만의 하단 영역을 정의해보고, footer 태그를 사용하여 HTML 코드를 작성해보세요.

참고 자료

HTML Element Reference
HTML의 다양한 태그와 그 용도에 대해 자세히 살펴볼 수 있는 자료이다.

profile
이영락
AI Engineer / 의료인공지능
이전 포스트

[네이버 부스트코스 웹 프로그래밍 풀스택]프론트 엔드 (3) - CSS

다음 포스트

[네이버 부스트코스 웹 프로그래밍 풀스택]프론트 엔드 (4) - JAVASCRIPT

0개의 댓글