๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

HTML ํ•ต์‹ฌ ํƒœ๊ทธ๋“ค

by KASSID 2021. 12. 31.

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>

 

 

 

 

๋Œ“๊ธ€