Eojin Han

📌

팁 <h1>은 페이지의 주요 제목으로 사용하고, (page.tsx 수준), 컴포넌트 수준에서는 각 섹션의 제목에는 <h2>부터 사용하는 것이 좋습니다. (컴포넌트)

h1 ~ h6 설명


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>night-ohl title test</title>
  </head>
  <body>
    <h1>My main title</h1>
    <h2>My top level heading</h2>
    <h3>My subheading</h3>
    <h4>My sub-subheading</h4>
    normal text
  </body>
</html>

6개의 Heading을 쓸 수 있지만 한 페이지에 3개 이상을 사용하지 않는 것을 권장한다. 계층이 너무 많으면 다루기 힘들고 탐색하기 어렵다.

<h1>: 페이지의 주요 제목으로, 페이지당 하나만 사용해야 해요.

<h2>: 섹션 제목을 나타내며, 여러 번 사용 가능.

<h3>~<h6>: 하위 제목들이며, 필요에 따라 계속 사용 가능.

가장 중요한 점은 <h2>는 섹션 제목이라는 걸 기억하는 거예요. 그 외의 태그들은 글의 세부 제목을 나타내는 데 쓰면 돼요.

현업 팁 (브라우저 스타일 통일)

브라우저마다 기본 스타일이 조금씩 다를 수 있기 때문에, 브라우저 간 일관된 디자인을 제공하려면 기본 스타일을 오버라이드(덮어쓰기) 해서 통일된 느낌을 줄 수 있습니다.

예를 들어, <h1>부터 <h6>까지의 헤딩 태그는 브라우저마다 기본 폰트 크기와 굵기가 다를 수 있는데, 이를 CSS로 덮어써서 모든 브라우저에서 일관된 디자인을 유지할 수 있습니다.


/* Reset some basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define uniform styles for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial', sans-serif;
  font-weight: normal;
  line-height: 1.4;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Other styling for body, paragraphs, etc. */
body {
  font-size: 16px;
  line-height: 1.6;
}

Heading (h1, h2, h3, h4, h5, h6)

h1 ~ h6 설명

현업 팁 (브라우저 스타일 통일)