개발 도구 (Development Tools)/HTML & CSS

#3. HTML 제목과 단락

BiCute 2023. 3. 8. 08:00
반응형

 

제목(Heading)은 웹 페이지에서 주요한 제목을 나타낼 때 사용됩니다. HTML에서 제목은 h1부터 h6 태그로 표현되며, h1은 가장 중요한 제목을, h6은 가장 적은 중요도를 나타냅니다.

 

단락(Paragraph)은 웹 페이지에서 텍스트를 작성할 때 사용되는 태그입니다. HTML에서 단락은 p 태그로 표현됩니다.

 

예:

<h1>메인 제목입니다</h1>
<h2>부제입니다</h2>
<p>단락입니다.</p>
<p>이것은 또 다른 단락입니다.</p>

 

 

 

# 제목(Heading) tag

 

HTML에서 제목 태그(h1~h6)는 웹 페이지의 구조와 내용을 나타내는데 사용됩니다.

h1 태그는 웹 페이지의 최상위 제목을 나타내며, h2 태그는 h1의 하위 제목, h3 태그는 h2의 하위 제목 이런 식으로 계층 구조를 가집니다.

 

제목 태그는 다음과 같이 사용할 수 있습니다.

<h1>메인 제목입니다</h1>
<h2>부제입니다</h2>
<h3>하위 부제입니다</h3>
<h4>하위 하위 제목입니다</h4>
<h5>하위 하위 하위 제목입니다</h5>
<h6>하위 하위 하위 하위 제목입니다</h6>

 

제목 태그는 웹 페이지의 구조를 나타내며, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.

적절한 제목 태그를 사용하면 웹 페이지의 구조와 중요성을 명확하게 나타낼 수 있습니다.

 

 

※ 각 브라우저마다 태그의 기본 스타일이 약간씩 다릅니다. 

기본적으로 h 태그는 글씨 크기, 폰트, 마진, 패딩, 배경색 등의 스타일을 가지고 있습니다.

하지만, 각 브라우저에서 기본 스타일이 다르기 때문에, 특정 브라우저에서의 기본 스타일을 알고 싶다면 각 브라우저에서의 기본 스타일을 확인해야 합니다.

예를 들어, Google Chrome의 경우 h1 태그의 기본 스타일이 다음과 같습니다:

h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

기본 스타일은 브라우저에서 제공하는 기본 스타일 시트에 정의되어 있으며, CSS를 사용하여 커스터마이징하지 않으면 기본 스타일이 적용됩니다.

 

 

 

# 단락( paragraph) tag

 

<p> 태그는 단락을 나타내는 HTML 태그입니다.

웹 페이지에서 글을 쓸 때 글의 내용을 구성하는 기본 단위가 되며, 여러 개의 단락이 하나의 문단을 구성합니다.

다음은 <p> 태그의 예시입니다:

<p>텍스트 단락입니다.</p>
<p>이것은 텍스트의 또 다른 단락입니다.</p>

 

 

각 브라우저에서 <p> 태그의 디폴트 CSS 스타일은 약간씩 다릅니다. 기본적으로 폰트 크기, 폰트 종류, 마진 등이 적용되며, 상세한 스타일은 브라우저마다 다릅니다.

 

만약, 사용자 정의 CSS를 적용하고 싶으면 CSS 파일 또는 페이지 내에서 <head> 안에 <style> 태그를 사용하여 적용할 수 있습니다.


Google Chrome의 경우, 디폴트 <p> 태그의 CSS 스타일은 다음과 같습니다:

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

 

위의 스타일은 블록 요소로 렌더링하고, 상하 마진을 1em씩, 좌우 마진을 0px씩 설정하는 것을 나타냅니다.

이 스타일은 CSS 파일 또는 페이지 내에서 <head> 안에 <style> 태그를 사용하여 덮어씌울 수 있습니다.

반응형