Eojin Han

1. section 태그 2. section vs article ?3. div 태그 4. p vs span 요약:예시 코드

1. `section` 태그

페이지 내에서 주제나 범주를 나누는 역할을 하는 태그입니다.

여러 개의 관련된 콘텐츠나 요소들을 묶어서 하나의 큰 덩어리로 구분할 때 사용합니다. 전체적으로 큰 단위의 콘텐츠를 나타낼 때 적합하고, 보통 제목이 따라온다.

`header` 태그

목적: 하나의 section 내에서 제목 역할을 하는 부분을 감쌀 때 사용합니다. 주로 h1~h6와 같은 제목 요소가 포함됩니다.

예시: 카드 컴포넌트에서 제목(타이틀)을 header로 감싸는 것이 좋습니다.

📌

페이지 레벨의 컴포넌트에서 부분 부분 나뉘어서 의미부여가 되는 경우가 section이다. 하위 컴포넌트에서는 섹션으로 감싸는 것이 올바르지 않고, 컴포넌트들이 모여 독립된 요소가 되는 경우에는 article을 고려해야 한다.

2. section vs article ?

section: 이 태그는 페이지의 독립적인 주제나 섹션을 나타내는 데 사용됩니다. 보통 내용이 구분되는 큰 덩어리를 나타내고, 보통 제목이 포함됩니다.

article: 컴포넌트들이 모여서 하나의 독립된 콘텐츠를 만든 경우, 그 자체로 독립적인 콘텐츠 단위로서 의미가 있는 경우. 즉, 콘텐츠가 독립적으로도 의미가 있고, 다른 콘텐츠와 분리될 수 있을 정도로 독립적인 하나의 "단위"라고 볼 수 있습니다. 예를 들어, 블로그 포스트나 뉴스 기사 등입니다.

3. `div` 태그

목적: 구조적인 목적을 위해 사용하는 일반적인 컨테이너입니다. 콘텐츠나 의미를 묶는 것보다는 단순히 레이아웃을 구성할 때 사용됩니다.

예시: 여러 요소를 묶을 때 사용할 수 있지만, 의미를 부여하지 않고 단순히 구조적인 목적으로만 사용됩니다.

4. `p` vs `span`

p 태그: 한 줄 이상의 문장이 될 수 있는 문단을 나타낼 때 사용합니다.

카드 컴포넌트 내의 description 처럼 설명이 문장으로 되는 경우 p가 적합하다.

span 태그: 짧은 텍스트 조각을 감싸거나, 스타일링이 필요한 인라인 텍스트를 감쌀 때 사용합니다. 단어, 구 또는 짧은 정보를 구분할 때 유용합니다.

카드 컴포넌트에서 tag 부분은 단어 이므로 span이 적합하다.

요약:

section: 여러 컴포넌트가 모여 하나의 의미를 가지는 콘텐츠를 나타낼 때 사용.

header: section 내에서 제목 역할을 하는 부분에 사용.

div: 의미를 부여하기보다는 레이아웃을 구성할 때 사용.

p: 여러 줄 이상의 문장을 문단으로 감쌀 때 사용.

span: 짧은 텍스트, 단어, 구, 태그 등을 감쌀 때 사용.

예시 코드


export const FeaturedPosts = async () => {
  const posts = await getFeaturedPosts();

  return (
    // 페이지 레벨에서 하나의 주제로 큰 덩어리를 다루는 경우로, section 태그로 감싸는 것이 적절
    <section>
      <h2 className="text-2xl font-bold">Featured Posts</h2>
      <PostsGrid posts={posts} />
    </section>
  );
};


export const PostCard: FC<Props> = ({
  post: { title, description, date, category, path },
}) => {
  return (
    <Link href={`/posts/${path}`}>
  		// 여러 컴포넌트들이 모여 하나의 독립된 콘텐츠를 만든 경우로, article로 감싸는게 적절
	    <article>
        <Image
          src={`/images/posts/${path}.png`}
          alt={title}
          width={300}
          height={200}
        />
        {/* 단순히 요소들을 묶어서 스타일링이나 레이아웃을 구성할 때 사용. 다른 시멘틱 태그를 붙일만큼 다른 의미가 부여되지 않음. */}
        <div>
          <time>{date.toString()}</time>
          <h3>{title}</h3>

          {/* 설명은 문단으로 간주될 수 있는 요소이므로 p로 감쌈 */}
          <p>{description}</p>
          {/* 짧은 인라인 텍스트를 표현할 때 사용. 짧고 컨텍스트적인 데이터는 span이 적합 */}
          <span>{category}</span>
        </div>
      </article>
    </Link>
  );
};

시멘틱 관련 정리

1. section 태그

header 태그