HTML 핵심 태그들

HTML 핵심 태그 공부한 것들 기록!

 

문단, 텍스트 서식

h1~h6

제목 태그

p / br

문단 구분, 줄 바꿈 / br은 특별한 경우 아니면 쓰지 않는 것을 추천!

b / strong

굵게 (strong은 시각장애인을 위한 html 작성 시에도 쓰임)

u

밑줄

s / del

취소선 (del은 시각장애인을 위한 html 작성 시에도 쓰임)

big / small

글자 크게, 작게

sup / sub

위 첨자, 아래 첨자

hr

수평선

 

---

목록

ul / ol 로 한 번 감싸고 그 안에 li 로 목록 수를 조절

순서가 없는 목록

ul > li

Unordered List

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

순서가 있는 목록

ol > li

Ordered List

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

중첩

중요!) 중첩 시 자식 노드는 li 안으로 들어가야 함!  (Navigation bar 등을 만들 때 필요!)

<ol>
  <li>방콕 쇼핑 리스트</li>
  <li>방콕에서 반드시 들려야 할 베스트
    <ul>
      <li>씨암</li>
      <li>카오산 로드</li>
    </ul>
  </li>  <!-- 이렇게 감싸고 있어야 함 -->
  <li>방콕 맛집 리스트</li>
  <li>방콕 관광 리스트</li>
</ol>

 

---

링크, 이미지

a

외부 링크, 파일 링크

href (hyperlink reference)

<a href="http://www.naver.com/">Naver</a>

추가 속성

target : _blank 새 탭으로 열기

title : 링크 설명

<a href="https://www.google.com/" target="_blank" title="구글" >Google</a>

---

img

이미지

src(source) / alt (alternative)

<img src="images/google.png" alt="Google">

alt는 이미지 로드 실패 시 대체 텍스트를 넣어준다.

(거의 사용하지 않지만 알고는 있자!)

---

중첩

 a>img 

<a href="https://www.google.com/"><img src="images/google.png" alt="Google"></a>