HTML&CSS 공부

Html 태그 공부 - 1

olivejam 2022. 12. 23. 17:17
728x90
SMALL

왼쪽에 있는 내용은 VS Code 에서 작업한 html 파일을 크롬에서 열어본 모습이다.

이번 포스팅은 위에서 사용된 태그들을 알아볼 예정이다!

 

<html></html>

<html> 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.

 

<head></head>

<head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.

 

<title></title>

 <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.

 

<body></body>

<body> 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다.

 

<h></h>

<h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

Heading level 1        // h1

Heading level 2                // h2

Heading level 3                    // h3

Heading level 4                       // h4    

h1 > h6 로 갈 수록 글씨 크기가 작아진다. 

 

 

<p></p>

<p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

 

<pre></pre>

<pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

파란 상자는 <p> 분홍상자는 <pre>

<b></b>

<b> 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <b>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, <strong> 요소를 사용해 특별히 중요한 텍스트를 나타내세요.

 

<strong></strong>

<strong> 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.

<b> 와 <strong>
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

 

<br>

<br> 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

 

 

<i>

<i>요소 는 텍스트에서 어떤 상황과 환경을 구분해야 하는 부분을 나타냅니다. 기술문의, 외국어 축소, 인형인물의 생각 등을 예시로 들 수 있습니다. 보통태임꼴로표시합니다. 

 

<em>

<em> 요소는 텍스트의 강세를 나타냅니다. <em> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

 

<i> 와 <em>
By default, the visual result is the same. However, the semantic meaning is different. The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

 

<mark></mark>

 

<mark>요소 는 현재 계약에 관한 것이 깊거나 중요한 해 표시 또는 강조한 부분을 나타냅니다.

 

<small></small>

 

<small> 요소 는 분명이 글이나, 선명하고 돋보기 등의 작게 표시를 나타냅니다. 기본 상태에서 <small>은 자신의 메시지를 한 사이즈 작은 출력( small에서 x-small등)으로 표시하지만, 스타일을 적용한 최종 출력 크기가 작을 필요는 없습니다.

 

<del></del>

 

<del> 요소는 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. <ins> 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.

 

<ins></ins>

 

<ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다. <del> 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.

 

<sup></sup>

 

<sup> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다. 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.

 

// 최근 알고리즘 문제를 풀면서 제곱관련 문제가 있어서 안그래도 궁금하던 차였는데, 

 이번기회에 <sup> 태그를 알게되서 좋았다. 근데.. 평상시에 쓸일이 있을까?ㅎㅎ //

 

 

참고 사이트

 

 

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

왼쪽 카테고리에서 html > elements 로 가면 태그 정보를 볼 수 있다.

 

728x90
LIST