[html] 텍스트를 한 줄로 묶는 태그들(<strong>, <b>,<em>, <i>,<q> 등)

텍스트를 묶는 <h1>, <p>, <br> 태그 등은 묶는 내용 다음에 자동으로 줄바꿈이 들어갑니다. 이번에는 줄바꿈 없이 문장 안 단어에 의미를 주는 태그들에 대해 알아보겠습니다.

 

(1) 굵게 표시하는 <strong>, <b> 태그

: 텍스트를 굵게 만들어 볼드처리를 해주는 태그입니다. 여는태그와 닫는태그 사이에 내용을 입력합니다.

<strong>태그는 중요한 내용이라 강조할 필요가 있을 때 사용합니다. <b>태그는 단순히 굵게 표시할 때 사용합니다.

이러한 기능은 css에서도 조절 가능하기 때문에 잘 사용하지 않습니다. 내용을 강조하는 의미가 있는 <strong>태그를 적재적소에 사용하면 좋습니다.

 

(2) 이텔릭체로 표시하는 <em>, <i> 태그

: 이텔릭체로 글꼴을 표기해주는 태그입니다. 여는태그와 닫는태그 안에 내용을 입력합니다.

(1)번과 마찬가지로 <em>은 중요한 내용을 강조하는 의미로 이텔릭체를 적용할 경우 사용합니다. <i>는 단순히 이텔릭체로 표기할 때 사용합니다. 

 

(3) 인용문을 표시하는 <q> 태그

: 앞서 배운 <blockquote>와 마찬가지로 인용문을 표시할 때 사용하는 태그이지만, 태그 뒤에 줄바꿈이 들어가지 않습니다. 문단 안에 인용문장을 쓸 때 사용합니다. 여는태그와 닫는태그 안에 인용문을 입력하면 되고, 내용 앞뒤에 큰따옴표가 들어가게 됩니다. 속성으로 'cite'를 적어 링크를 연결시킬 수 있습니다.

 

(4) 동아시아 글자에 주석을 표기하는 <ruby> 태그

: 한자나 중국어, 일본어 등에 음을 표기할 때 사용합니다. <ruby></ruby>안 <rt></rt>에 음을 적어줍니다.

사용 예시) <ruby>大韓民國<rt>대한민국</rt></ruby>

 

(5) 형광펜 효과를 주는 <mark> 태그

: 여는태그와 닫는태그 안에 작성한 내용이 웹페이지에서 형광펜으로 밑줄 쳐져 표시됩니다.

 

<main>
      <h2>제주 이색 여행지 - 이중섭 거리</h2>
      <p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
      <p>
        <em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고 <br />
        작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.
      </p>
      <h1>웹 접근성</h1>
      <p>
        웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의
        <q cite="http://www.w3.org/standards/webdesign/accessibility"> 웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 웹 접근성을 설명한다.
      </p>
      <h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
      <p>
        아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며,
        <span style="color: blue">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.
      </p>
      <p>루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로 (<ruby>松本行弘<rt>まつもとゆきひろ</rt>)</ruby>가 만든 프로그래밍 언어입니다.</p>
 </main>