글자와 관련된 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 글자와 관련된 태그
    learn
    Practice
    learn
    04 제목, 내용 관련 태그
    글자와 관련된 태그

    앞선 강의에서 본문, 즉 단락이나 문장과 관련된 태그를 먼저 살펴봤습니다. 그렇다면 더 작은 단위를 다루는 태그 또한 존재하지 않을까요? 이번 시간에는 글자와 관련된 태그에 대해 공부해봅시다.

    • <strong>, <em>
    • <sub>, <sup>
    • <ins>, <del>


    <strong>, <em> 태그


    사이트에서 게시글을 작성해보았다면 어떤 내용을 강조하고 싶을 때 글씨를 굵게, 또는 이탤릭체로 바꾸신 경험이 있을 겁니다. html 태그 중에서 그러한 역할을 수행하는 태그가 바로 <strong> 태그와 <em> 태그입니다.

    <strong> 태그는 태그로 감싼 단어 혹은 문장을 볼드체로 바꾸며,  <em> 태그는 emphasized의 약자이며, 태그로 감싼 단어 혹은 문장을 이탤릭체로 바꿉니다. 두 태그 모두 해당 컨텐츠가 중요하다는 것을 강조하기 위해 사용합니다. 

    아래의 예시를 실습 창에 작성하여 실행한 뒤 어떠한 차이가 있는지, 어떤 단어가 강조되어 있는지 확인해보세요.


    <sub>, <sup> 태그


    <sup>태그는 태그로 감싼 단어 혹은 문장을 일반 위치보다 위로 올리며, <sub>태그는 아래로 내립니다. 각각 superscripted와 subscripted의 약자입니다.

    아래의 코드를 <strong>, <em> 태그 예시에 이어 실습 창에 작성하고 실행한 뒤 어떠한 차이가 있는지, 어떤 단어가 강조되어 있는지 확인해보세요.


    <ins>, <del> 태그


    마지막으로 <ins> 태그는 태그로 감싼 단어 혹은 문장 아래 밑줄을 추가하며, <del> 태그는 취소선을 추가합니다. 각각 inserted와 deleted의 약자입니다.

    아래 예시를 이제까지 작성한 코드에 이어 작성한 뒤 실행해보고, 어떠한 차이가 있는지 어떤 단어가 강조되어 있는지 확인해보세요.

    Practice

    글자와 관련된 태그를 사용하여 강조 처리된 단어를 포함한 문장을 작성해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)