[HTML] HTML 태그

HTML 태그 사용법

<태그이름 속성="속성값">내용</태그이름>

HTML body 태그 안에 자주 사용되는 태그

제목과 문단 Headings & Paragraph

• 자동줄바뀜과 위아래가 조금 띄어져 있다.

제목을 표시할 때 사용하는 태그 <h1> <h2> <h3> <h4> <h5> <h6>
문단을 표시할 때 사용하는 태그 <p>

줄바꿈

• 이 글의 주제가 여기서 바뀌었다'를 알리는 역할
• 수평줄이 생긴다.

줄바꿈을 표시할 때 사용하는 태그 <hr>

공백

• 표시한 공백(스페이스바로 띄운 공간)이 그대로 표시
• white-space 속성의 'pre' 값이 같은 의미를 갖는다.

공백을 표시할 때 사용하는 태그 <pre>

강조 Emphasis

• <strong>
  객관적인 중요성, 굵은 효과
  
  
• <em>
  저자의 주관적인 강조, 기울임 효과
• 공통적인 점은 줄바꿈이 일어나지 않는 태그들

내용을 강조하고 싶을 때 사용하는 태그 <strong> <em>

링크 Anchor

• href 속성을 꼭 적어줘야 한다.
• href 속성에는 ① URL ② 상대경로 ③ 메일 쓰기 ④ 전화 걸기 등 들어갈 수 있다.

현 위치에서 다른 위치로 이동할 때 사용하는 태그  
<a href="주소">

• target

<a target="_blank"> : 새로운 tab을 열어서 이동

이미지 Image

• src와 alt 속성들을 꼭 써줘야 한다.
• ① 절대 경로 "http://~"
  ② 상대 경로 "./images/cat.jpg"

이미지를 넣을 때 사용하는 태그 
<img src="경로" alt="사진 설명">

목록 List

목록을 나타내는 태그 <ul> <ol>
<ul> 순서가 중요하지 않은 목록 - 번호가 붙지 않는
<ol> 순서가 중요한 목록 - 번호가 붙는 

• 꼭 <li>만 들어올 수 있다.
• <div> <a> 태그들은 ❌
• 만약 사용하고 싶다면

<ol> 
    <li> 
        <a> 
    </li>
</ol> 처럼 <li> 안에다 적어줘야 한다.

• ·을 없애기 위한 css

list-style-type : none; 

정의 리스트 Description List

용어를 정의하거나 Key-Value로 정보를 제공할 때 사용하는 태그 <dl>
<dl>
    <dt>용어</dt>
    <dd>설명</dd>
</dl>

• <dl>태그의 자식요소는 <div> <dd> <dt>만 올 수 있다.
• <dd> <dt>는 단독으로 사용 불가능하다.
• <dfn> : 용어를 정의한다고 더 강조하는 태그

인용 Quotations

<blockquote> <q>
문장을 인용할 때 사용하는 태그 

  
<blockquote>인용 내용</blockquote>
<q>인용 내용</q>
둘 중 가장 많이 사용하는 태그는 <blockquote>이다.
    
➕ <cite>출처</cite>

Div - Span

정말 아무리 생각해도 떠오르는 태그가 없을 때 사용

<div> 보통 css때 요소들을 묶어야할 때 사용
<span> 보통 텍스트의 일부분을 묶어줄 때 사용   

<header>

보통 웹 상단에 웹서비스의 로고, 메뉴등이 위치하는 구역 태그이다.

<footer>

보통 웹 하단에 회사의 정보등이 위치하는 구역 태그이다.

<nav>

보통 메뉴를 위치하는 구역 태그이다.

<section>

보통 서브제목과 관련된 내용을 표시하는 구역태그이다.