HTML 기사 태그

태그는 HTML 문서에서 독립적인 자체 포함 컨텐츠를 나타냅니다. 기사 태그는 HTML 5의 새로운 섹션 요소 중 하나입니다.

기사는 고유한 의미가 있어야 하며 다른 웹 페이지 콘텐츠와 쉽게 구분되어야 합니다. 간단히 말해서 HTML 태그는 기사를 나타내는 데 사용됩니다.

요소의 잠재적 출처:

블로그 게시물

포럼 게시물

신문기사

사용자가 제출한 댓글

단일 콘텐츠가 있는 페이지에는 단일 태그가 필요합니다. 그러나 색인 페이지, 검색 결과 페이지, 카테고리 페이지 등 여러 콘텐츠가 있는 페이지에서는 여러 요소를 사용해야 합니다.

예상 읽기 시간: 3분

통사론:

태그에는 여는 태그와 닫는 태그가 모두 포함됩니다. 콘텐츠는 이 두 태그 사이에 기록됩니다.

HTML 태그 샘플:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>This is the title of the document</h1>
      <p>This is the sample paragraph</p>
    </article>
  </body>
</html>

결과:

결과

태그 스타일링 방법:

태그는 전역 속성과 이벤트 속성을 지원합니다. 다음 속성을 사용하여 HTML 기사 태그의 스타일을 지정할 수 있습니다.

태그에서 텍스트의 시각적 두께/강조/크기 스타일을 지정하는 속성:

CSS font-style – 이 CSS 속성은 normal, italic, oblique, initial, inherit와 같은 텍스트의 글꼴 스타일을 설정하는 데 도움이 됩니다.

CSS font-family – 이 CSS 속성은 선택한 요소에 대한 하나 이상의 글꼴 패밀리 이름 또는 일반 패밀리 이름의 우선 순위 목록을 지정합니다.

CSS 글꼴 크기 – 이 CSS 속성은 글꼴 크기를 설정하는 데 도움이 됩니다.

CSS font-weight – 이 CSS 속성은 글꼴을 굵게 할지 두껍게 할지 정의하는 데 사용됩니다.

CSS text-transform – 이 CSS 속성은 텍스트의 대소문자와 대소문자를 제어합니다.

CSS test-decoration – 이 CSS 속성은 text-decoration-line , text-decoration-color , text-decoration-style 과 같이 텍스트에 추가되는 장식을 지정합니다.

태그의 텍스트 색상 지정 스타일:

CSS 색상 – 이 CSS 속성은 텍스트 콘텐츠 및 장식의 색상을 지정합니다.

CSS background-color – 이 CSS 속성은 요소의 배경색을 설정하는 데 도움이 됩니다.

태그의 텍스트 레이아웃 스타일:

CSS text-indent – 이 CSS 속성은 텍스트 블록의 첫 줄 들여쓰기를 지정하는 데 사용됩니다.

*CSS text-overflow * – 이 CSS 속성은 표시되지 않는 오버플로된 내용을 사용자에게 알리는 방법을 설명하는 데 도움이 됩니다.

CSS white-space – 이 CSS 속성은 요소 내부의 공백을 처리하는 방법을 설명합니다.

CSS word-break – 이 CSS 속성은 줄을 끊어야 하는 위치를 결정합니다.

태그의 기타 속성:

CSS text-shadow – 이 CSS 속성은 텍스트에 그림자를 추가하는 데 도움이 됩니다.

CSS text-align-last – 이 CSS 속성은 텍스트의 마지막 줄 정렬을 설정합니다.

CSS line-height – 이 CSS 속성은 줄의 높이를 정의합니다.

CSS letter-spacing – 이 CSS 속성은 텍스트에서 문자/문자 사이의 간격을 결정하는 데 도움이 됩니다.

CSS word-spacing – 이 CSS 속성은 모든 단어 사이의 간격을 지정합니다.

브라우저 지원:

브라우저 지원