[HTML] Tag 정리-1

① Headings & Paragraph

Headings 관련 Tag : 문단의 제목을 나타내는 Tag

종류 : h1, h2, h3, h4, h5, h6 (중요도에 따라)

형태

<h1>(내용)</h1>

 

Paragraph Tag : 문단의 내용을 나타내는 Tag

형태

<p>(내용)</p>

 

② Emphasis

Emphasis 관련 Tag : 내용을 강조하고 싶을 때 사용하는 Tag

종류 : strong, em

 

③ Anchor

Anchor Tag : 현 위치에서 다른 위치로 이동(링크)

Anchor Tag와 함께 사용하는 Attribute(속성)

→ ‘href’(hypertext reference)

사용방식

1. url 이동 : <a href="주소"> text </a>

2. 페이지 내 이동 : <a href="#'id 값'"> text </a>

3. 메일주소 : <a href="mailto:메일주소"> text </a>

4. 전화번호 : <a href="tel:전화번호"> text </a>

5. 새 탭에서 링크 열기 : <a href="주소" target="_blank"> text </a>

 

④ Image

Image Tag와 함께 사용하는 Attribute(속성)

src(source) : 이미지 파일의 경로(주소값)을 작성(절대경로, 상대경로)

alt(alternative text) : ‘src’에 대한 설명을 적는다.

형태

<img src="#" alt=""/>

 

⑤ Lists

목록을 표현하고 싶을 때 사용하는 Tag

종류 : ul(unordered list), ol(ordered list), li(ol과 ul의 자식요소)

형태

<ul> or <ol>

<li> 항목1 </li>

<li> 항목2 </li>

</ul> or </ol>

 

⑥ Description List

용어를 정의할 때 사용하는 정의 리스트, key-value로 정보를 제공할 때

'dd'와 'dt'는 무조건 한 쌍, 'dl'의 자식요소로는 'dd', 'dt', 'div'만 올 수 있다.

형태

<dl>

<dt>

<dfn> (제목) </dfn>

</dt>

<dd> (정의된 내용 입력) </dd>

</dl>

 

⑦ Quotations

인용 문구를 사용할시 활용하는 Tag

종류 : blockquote, q(문장 내에서 활용, 따옴표 자동생성)

형태

<blockquote>(인용내용)</blockquote>

<cite>(출처내용)</cite>

<q>(내용)</q>

 

⑧ Div & Span

'div'는 아무런 의미는 없고, CSS 활용시 묶어줄 때 사용

'span'은 아주 작은 일부를 묶어줄 때 사용

---

<h1>
  Lorem, ipsum(Title)
</h1>
<h2>
  1st
</h2>
<p>
  Lorem ipsum, dolor sit <strong>amet consectetur adipisicing</strong> elit. Qui quasi <em>facere impedit nisi</em> voluptas quidem saepe voluptatibus, sint architecto molestias assumenda aliquid rem maxime sit voluptatum doloremque ipsum fugiat earum.
  Impedit culpa aut voluptates non sunt corrupti dolorum pariatur vel, delectus sit aliquam! Corporis, sit perferendis porro totam esse sed optio distinctio excepturi <span>laborum commodi beatae quos soluta cumque dolore?</span>
  Numquam esse magnam qui, dolor ipsam vel quos asperiores porro tenetur ea soluta placeat officiis iusto laboriosam molestias, molestiae fuga enim illum iste voluptate distinctio vero dolorum consectetur! Vel, optio!

  <a href="https://google.com" target="_blank">Google</a>

  <!-- 상대경로 -->
  <img src="./assets/images.jpg" alt="#">
  <!-- 절대경로 -->
  <img src="(해당 url 작성)" alt="#">
</p>


<h2>
  우리나라 위치(시 제외)
</h2>
<ul>
  <li>경기도</li>
  <li>강원도</li>
  <li>충청남도</li>
  <li>충청북도</li>
  <li>경상남도</li>
  <li>경상북도</li>
  <li>전라남도</li>
  <li>전라북도</li>
</ul>

<div>
  <h3>
    2021 KBO리그 시범경기 최종순위
  </h3>
  <ol>
    <li>한화</li>
    <li>KT</li>
    <li>롯데</li>
    <li>키움</li>
    <li>삼성</li>
    <li>LG</li>
    <li>KIA</li>
    <li>두산</li>
    <li>NC</li>
    <li>SSG</li>
  </ol>
</div>

<dl>
  <dt>
      <dfn>로렘 입숨(lorem ipsum)</dfn>
  </dt>
  <dd> 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트</dd>
</dl>

<blockquote cite="#">
  나는 실패한 적이 없다. 그저 작동하지 않는 10,000개의 방법을 발견했을 뿐이다.
  <cite>- 토마스 에디슨</cite>
</blockquote>

---

예제 연습