Dia Egg - Shugo Chara

HTML & CSS

의미에 맞는 태그

별ㅇI 2023. 10. 2. 23:25
728x90
반응형

의미에 맞는 태그

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 왜 기능을 두가지로 만들었을까 -->
    <!-- 검색엔진에서의 해석방향 -->
    <p style="font-weight: bold">볼드체</p>
    <p><b>볼드체</b>입니다.</p>
    <p><strong>강조하는볼드체</strong>입니다.</p>
    <!-- em은 강조하는 이탤릭체라고 해석됨 -->
    <p style="font-style: italic">이탤릭체</p>
    <p><i>이탤릭체</i>입니다.</p>
    <p><em>이탤릭입니다.</em></p>
    <p>텍스트가<small>작게</small>보입니다.</p>
    <p>집에 오는길에<mark>우유</mark>사오렴</p>
    <p>제품 할인 중<del>3만원</del>2만 8천원</p>
    <p style="text-decoration: line-through">3만원</p>
    <p><ins>냐옹</ins></p>
    <p style="text-decoration: underline">냐옹</p>
    <p>X<sub>2</sub></p>
    <p>X<sup>2</sup></p>
    <blockquote cite="https://google.com">
      긴문장을 인용하고 싶습니다.
    </blockquote>
    <q>짧은 인용</q>
    <abbr title="World Health Organization">WHO</abbr>
    <address>대한민국 제주특별자치도 제주시 무슨동 몇번지</address>
    <p><cite>절규</cite>는 뭉크가 그린 그림.</p>
    <p><cite>별이</cite>는 컴퓨타 블로그를 운영 한다는 저작권 적인 내용 전달</p>

    <!-- 의미없는 태그 div, span-->
    <!-- 다른 태그를 담는 컨테이너의 역할 -->
    <!-- 화면에 콘텐츠(태그)를 배치하기 위한 레이아웃 용도 -->
    <!-- block 요소는 콘텐츠의 크기에 상관없이 한줄 전체를 차지한다. : div, h1 ~ h6, p  -->
    <!-- inline 요소는 콘텐츠의 크기만큼 차지한다. : span -->

    <div style="background-color: blue">
      div태그 입니다. 끝까지 공간을 차지하죠
    </div>
    <span style="background-color: green"
      >span태그 입니다. 크기에 따른 공간을 차지하죠</span
    >
  </body>
</html>
728x90
반응형

'HTML & CSS' 카테고리의 다른 글

input요소의 주요 속성  (2) 2023.10.12
form 요소  (2) 2023.10.12
목록 태그, 표 태그  (0) 2023.10.03
HTML의 기본 구조, 요소, 속성  (2) 2023.10.02
웹의 이해와 웹개발 라이프 사이클  (2) 2023.10.02