javascript 시맨틱 HTML 요소

javascript 데이터 실행하기

▶ 오늘은 자바스크립트를 만들 때 기본적인 시맨틱 HTML 요소에 대해서 알아보려고 하는데요, 만약 웹디자인기능 자격증을 준비중이라면 레이아웃을 만들 때 좀 더 편할테니 한번 같이 살펴보도록해요!

1. <header></header>

▶ 웹 페이지의 머리말을 정의하는 요소로, 로고, 제목, 탐색 링크 등을 포함합니다. 간단한 예시를 살펴볼까요?

<header>
  <h1>웹사이트 제목</h1>
  <nav>
    <a href="#">홈</a> | <a href="#">서비스</a> | <a href="#">연락처</a>
  </nav>
</header>

▶ 위의 예시에서는 웹사이트의 헤더 부분에 h1태그로 웹사이트의 제목을 크게 표시하고, nav태그 안에는 홈, 서비스, 연락처와 같은 탐색 링크를 넣어주었습니다. 링크를 넣어주면 사용자가 다른 페이지로 이동할 수 있습니다.

2. <section></section>

▶ 웹 페이지의 구획을 정의하는 요소로, 주제나 콘텐츠를 그룹화하여 나타냅니다. 간단한 예시를 살펴볼까요?

<section>
  <h2>최신 뉴스</h2>
  <article>
    <h3>제목 1</h3>
    <p>내용 1...</p>
  </article>
  <article>
    <h3>제목 2</h3>
    <p>내용 2...</p>
  </article>
</section>

▶ 위의 예시에서는 웹 페이지의 섹션을 나눠주었는데 먼저 h2태그로 섹션의 제목을 정의해주었고, article태그 안에는 섹션 내의 각각의 아이템(뉴스 기사 등)을 나타내기 위한 h3제목과 해당 내용을 넣어주었습니다.

3. <footer></footer>

▶ 웹 페이지의 꼬리말을 정의하는 요소로, 저작권 정보, 연락처 정보 등을 포함할 수 있습니다. 간단한 예시를 살펴볼까요?

<footer>
  <p>&copy; 2024 웹사이트. All rights reserved.</p>
  <p>문의: example@email.com</p>
</footer>

▶ 위의 예시에서 푸터는 웹페이지 하단에 나타나는데 p태그를 사용하여 안에는 저작권 정보와 문의 이메일 주소가 포함된 문장을 적어주었습니다.

4. <nav></nav>

▶ 탐색 링크를 포함하는 요소로, 메뉴나 내비게이션 등을 나타냅니다. 간단한 예시를 살펴볼까요?

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">서비스</a></li>
    <li><a href="#">포트폴리오</a></li>
    <li><a href="#">연락</a></li>
  </ul>
</nav>

▶ 위의 예시에서는 ul태그 안에 li태그로 구성된 홈, 서비스, 포트폴리오, 연락 목록을 만들어주었고, 각 항목은 a태그로 링크처리하여 사용자가 웹 사이트 내에서 다른 페이지로 이동할 수 있도록 해주었습니다.

5. <article></article>

▶ 독립적인 콘텐츠를 나타내는 요소로, 뉴스 기사, 블로그 포스트 등과 같은 내용을 포함합니다. 간단한 예시를 살펴볼까요?

<article>
  <h2>블로그 포스트 제목</h2>
  <p>블로그 포스트 내용...</p>
</article>

▶ 위의 예시에서는 article이라는 구조 안에 h2태그로 콘텐츠의 제목을 표시하고, p태그를 사용하여 내용을 입력해주었습니다.

6. <aside></aside>

▶ 부가적인 정보나 사이드바를 나타내는 요소로, 주요 콘텐츠와는 별도로 표시됩니다. 간단한 예시를 살펴볼까요?

<aside>
  <h3>광고</h3>
  <p>광고 내용...</p>
</aside>

▶ 위의 예시에서는 h3태그로 부제목을 표시하고, p태그를 사용해 내용을 입력해주었습니다. 웹디자인을 할 때 왼쪽 사이드 영역을 만들 경우 자주 사용합니다.

이렇게 오늘은 기본적인 구조에 대해 알아봤는데요,
다음엔 또 어떤 정보를 들고 올 지 기대해주세요😁!