텍스트 관련 태그

윤재열·2022년 1월 23일
0

HTML5

목록 보기
1/11

<hn>태그-제목표시하기

제목 텍스트는 일반 텍스트보다 굵고 진하게 표시됩니다.

  • <hn>태그는 일반 텍스트 보다 굵고 진하게 표시됩니다.
  • <hn>태그는 제목을 뜻하는 줄임말인 'h'와 제목 크기를 나타내는 숫자 (1~6)을 사용해서 <h1>에서<h6>까지 표현합니다.
  • <h1>이 가장 큰 제목이고 <h6>이 가장 작은 크기의 제목입니다.

<p> 태그-단락만들기

텍스트를 표시 할 때 가장 많이 사용하는 태그가 <p>태그입니다.

  • <p>태그는 parapraph의 줄임말로, 텍스트 단락을 만드는데 이때 '단락'이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다.
  • <p>태그로 표시하는 텍스트 단락은</p>태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀝니다.

<br>태그-줄바꾸기

텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈없이 한 줄로 표시됩니다.

  • 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에 <br>태그를 사용합니다. <br>태그는 break의 줄임말이고 닫는 태그는 없습니다.

<hr>태그-분위기 전환을 위한 수평 줄 넣기

<hr> 태그는 horizontal의 줄임말로, 수평 줄을 삽입할 때 사용합니다.

  • 보통 여러개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용합니다.
  • <hr>태그를 사용하면 기본으로 가로선이 삽입되는데 CSS를 이용하여 가로선을 없엘수도 있습니다.
    닫는 태그는 없습니다.

<blockquote>태그-인용문 넣기

다른 블로그나 사이트의 글을 인용할 경우,<blockquote>태그를 이용해 표시합니다.

  • 이떄 인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 다른텍스트와 구별됩니다.
  • 인용한 사이트 주소가 명확할 경우, cite속성을 이용하여 인용 사이트 주소를 표시할 수도 있습니다.
<h1>제주 이색 여행지</h1>
<h2>야외 텐트를 닮은 건출물"테쉬폰"</h2>
<p>아일랜드 출신 임피제 신부가....활용했습니다.</p>
<p>제주에서 점차 다른 지방으로...남아 있는데, <br>
  국내 근현대 건축사의...평가합니다.</p>
<hr>
<blockquote>성이시돌목장은 제주특별자치도..테쉬폰도 유명하다.(출저:향토문화전자대전)
</blockquote>

<pre>태그-입력하는 그대로 화면에 표시하기

HTML에서는 아무리 많은 공백을 넣어도 브라우저 창에는 한 개의 공백만 표시 됩니다.
하지만<pre>태그를 사용할 경우, 소스에 표시한 고백이 브라우저에 그대로 표시됩니다.

  • <code>,<samp>,<kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때도 소스의 형태를 그대로 브라우저 창에 보여주어야 하기 때문에 <pre> 태그가 함께 사용됩니다.
  • <pre>태그는 preformat의 줄임말입니다.
<h3>로컬 스토리지(Local Storeage)를 저장하는 함수 : </h3>
<pre>
  fuction savetheLocal(){
  var second =document.getElementById("second");
  var thevalue = second.value;
  lovalStorage.setItem(1, thevalue);
  gettheLocal();
  }
  </pre>

<strong>,<b>태그- 굴게표시하기

텍스트 중에서 굵게 표시하려고 할때 <strong><b>태그를 사요합니다.

  • 눈으로 보기에는 차이가 느껴지지 않는 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다.
  • 화면 낭독기에서는 강조하고 싶은 부분을 굵게 표시하더라도 내용을 눈으로 보는 것이 아니기 때문에 그 부분이 강조된 것인지, 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별하지 못합니다.
    -<strong>은 경고나 주의사항처럼 중요한 내용이므로 강조해야 할 때 씁니다.
  • <b>는 문서의 키워드 처럼 단순히 굵게 표시할 때 씁니다.
<strong>굵게 강조할 텍스트 </strong><br>
<b>단순히 굵게 표시할 텍스트</b>

<em>,<i>태그-이탤릭체로 표시하기

텍스트를 비스듬히 이탤릭체로 표시할 떄는 <em>,<i>태그를 사용합니다.

  • <em>태그는 emphasis의 줄임말이고 <i>는 italic의 줄임말 입니다.
  • 문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em>태그를 사용합니다.
  • <i>태그는 마음 속의 생각이나 꿈, 기술적인 용어, 다른언어의 관용구를 사용할 때 사용합니다.
<h2>제주 이색 여행지 - 이중섭 거리</h2>
<p><strong>주말</strong>마다<b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
<p><em>'아트마켓'</em>이라고도 부르는데 <i>문화예술체험</i>이나<i>공연관람</i>을 할 수도 있고 <br>작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>  

<p>태그-인용 내용 표시하기

<q>태그는 인용한 내용을 표기하기 위한 것으로 quote의 줄임말입니다.

  • 앞서 배운<blockquote>태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여 써지지만 <q>태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한줄로 표시되고 인용 내용을 구별할 수 있도록 따옴표를 붙여 표시합니다.
<h1>웹 접근성</h1>
<p>웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의 
  <q cite="http://www.w3.org/standards/webdesign/accessibility">웹의 힘은 보편성에 있다. 
  장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 웹 전근성을 설명한다.</p>

<mark>태그-형광펜 효과 내기

<mark>태그는 선택한 부분의 배경색이 노란색이 되며 형관팬으로 그어 놓은 듯한 효과를 나타냅니다.

<mark>형관펜색깔로나타내기</mark>

<span>태그-줄바꿈 없이 영역 묶기

<span>태그는 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다.

<h2>야외 텐트를 닮은 건축물<mark>"테쉬폰"</mark></h2>
<p>아일랜드 출신...남아 있으며<span style="color:blue">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.</p>
  

기타 텍스트 관련 태그들

<p>물의 화학식은 <b>H<sub>2</sub>0</b></p>

<p>E=mc<sup>2</sup></p>

<p>가격:13,000원<small>(부가세별도)</small></p>

<p>링크 표시용도가 아니라 단순히 긋는다면<u>u태그</u></p>

profile
블로그 이전합니다! https://jyyoun1022.tistory.com/

0개의 댓글

관련 채용 정보