HTML 텍스트 태그

<h1>~<h6> 태그

 

<h1>~<h6> 태그: 제목을 나타내는 태그

• h 옆의 숫자가 작을 수록 폰트 크기가 커진다.
• 브라우저 양옆에 공백이 생긴다.
• 검색 엔진은 헤딩(heading)을 사용하여 웹 페이지의 구조와 내용을 인덱

ex) <h1>~<h6> 태그

  <div style="border: 2px solid #333; width: 200px;">

    <h1> h1태그를 사용 </h1>

    <h2> h2태그를 사용 </h2>

    <h3> h3태그를 사용 </h3>

    <h4> h4태그를 사용 </h4>

    <h5> h5태그를 사용 </h5>

    <h6> h6태그를 사용 </h6>

  </div>

h1태그를 사용

h2태그를 사용

h3태그를 사용

h4태그를 사용

h5태그를 사용

h6태그를 사용

 

• <h1>이 가장 큰 제목은 가장 중요한 제목을 정의 할때 주로 사용한다.
  <h1>~<h6> 순서로 크기가 작아진다. >> 중요도가 낮아진다.
• 닫는 태그 반드시 기제한다.

 

<p>태그

<p>태그: '텍스트 단락'을 만드는 문단 태그다.

• paragraph:단락, 절
• 단락은 항상 새로운 줄에서 시작되며 브라우저는 단락 앞뒤에 공백을 자동 추가

 <div style="border: 2px solid #333; width: 800px; padding: 10px;">

    <p>뮤지컬 시카고는 2024년 올해 서울에서 현재 공연중이다.</p>

    <p>이번 무대에서는 2022년 무대에 올라왔던 배우들과 정선아 배우가 벨마역으로 합류했다.</p>

  </div>

뮤지컬 시카고는 2024년 올해 서울에서 현재 공연중이다.

이번 무대에서는 2022년 무대에 올라왔던 배우들과 정선아 배우가 벨마역으로 합류했다.

 

<br />태그

<br />태그: '줄' 바꾸는 태그

• break: 강제 줄 바꿈
• 단락의 줄을 바꾸고 싶을 때 사용한다.

  <div style="border: 2px solid #333; width: 800px; padding: 10px;">

    <p>뮤지컬 시카고는 <br /> 2024년 올해 서울에서 현재 공연중이다.</p>

    <p>이번 무대에서는 2022년 무대에 올라왔던 배우들과 <br />정선아 배우가 벨마역으로 합류했다.</p>

  </div>

뮤지컬 시카고는 <br />
2024년 올해 서울에서 현재 공연중이다.

이번 무대에서는 2022년 무대에 올라왔던 배우들과 <br />
정선아 배우가 벨마역으로 합류했다.

 

<span>요소

<span>요소는 텍스트의 일부 또는 문서의 일부를 표시하기 위해 사용되는 인라인 컨테이너

<span>요소에는 필수 속성이 없지만 style, class 및 id가 공통

 

css와 함께 사요하면 <span>요소를 사용하여 텍스트의 일부를 스타일링 할 수 있습니다.

  <div style="border: 2px solid #333; width: 800px; padding: 10px;">

    <p>뮤지컬 시카고는 <br /><span style="color: coral;"> 2024년 올해 서울에서 현재 공연중이다.</span></p>

    <p>이번 무대에서는 2022년 무대에 올라왔던 배우들과 <br />정선아 배우가 벨마역으로 합류했다.</p>

  </div>

뮤지컬 시카고는
2024년 올해 서울에서 현재 공연중이다.

이번 무대에서는 2022년 무대에 올라왔던 배우들과
정선아 배우가 벨마역으로 합류했다.

 

<blockqute>태그

<blockquote>: '인용'할 때 사용하는 태그

quote:인용하다.

 <blockquote>인용문 입니다.</blockquote>

<blockquote> 태그안의 내용이 '들여쓰기'되어 들어간다.

화면 낭독기 사용 시에도 <blockquote> 태그 안의 내용을 다른 텍스트와 구분한다.

<strong>, <b> 태그

• <strong>: 텍스트를 '굵게강조'할 때 사용하는 태그다.

<b>: 텍스트를 '굵게표시'할 때 사용하는 태그다.

• bold: 굵은

<strong> 태그와 <b> 태그의 차이

• 경고 OR 주의 사항처럼 중요한 내용을 강조 : <strong>태그
• → 화면 낭독기 사용 시 강조하여 읽음
• 단순히 글자만 굵게 표시할 때 : <b>태그

 

<em>, <i> 태그

<em>: 텍스트를 기울여 강조할 때 사용하는 태그다.

• emphasis : 강조

<i>: 텍스트를 기울여 표시할 때 사용하는 태그다

• italic : 이탤릭체(기울기체)

<em> "em" 이탤릭체로 강조할 텍스트</em>

<i> "i" 이탤릭체 표시할 텍스트</i>

ex)

"em" 이탤릭체로 강조할 텍스트
"i" 이탤릭체 표시할 텍스트