πŸ“šμ‹œλ§¨ν‹± λ§ˆν¬μ—…

솑솑·2021λ…„ 8μ›” 29일
0

HTML

λͺ©λ‘ 보기
2/2

μ‹œλ§¨ν‹± (Semantic) 은 "의미둠적인" μ΄λž€ 뜻이고,
μ‹œλ§¨ν‹± λ§ˆν¬μ—…μ΄λž€ κ·Έ 의미λ₯Ό 잘 μ „λ‹¬ν•˜λ„λ‘ HTML λ¬Έμ„œλ₯Ό μž‘μ„±ν•˜λŠ” 것을 λ§ν•œλ‹€.

πŸ’‘μ‹œλ§¨ν‹±ν•œ λ§ˆν¬μ—…μ˜ μž₯점

  • νƒœκ·Έμ˜ μ˜λ―Έκ°€ λͺ…ν™•ν•΄ μ½”λ“œμ˜ μž¬μ‚¬μš©κ³Ό 가독성이 μ’‹λ‹€
  • 검색 엔진이 μ‹œλ§¨ν‹± νƒœκ·Έλ₯Ό 더 μ€‘μš”ν•œ ν‚€μ›Œλ“œλ‘œ κ°„μ£Όν•˜κΈ° λ•Œλ¬Έμ— 검색엔진 μ΅œμ ν™”(SEO)에 μœ λ¦¬ν•˜λ‹€.
  • μ›Ή μ ‘κ·Όμ„± μΈ‘λ©΄μ—μ„œ, μ‹œκ°μž₯μ• κ°€ μžˆλŠ” μ‚¬μš©μžκ°€ κ·Έ 의미λ₯Ό 훨씬 잘 νŒŒμ•…ν•  수 있게 ν•œλ‹€.

πŸ“™ 자주 μ‚¬μš©ν•˜λŠ” νƒœκ·Έλ“€

header

<header></header> // μ›Ή νŽ˜μ΄μ§€μ˜ λ„μž…λΆ€ 
주둜 νŽ˜μ΄μ§€ 상단에 μ›Ή μ‚¬μ΄νŠΈ λ‘œκ³ μ™€ λ‚΄λΉ„κ²Œμ΄μ…˜ 링크λ₯Ό κ°μ‹ΈλŠ” 것에 μ‚¬μš©

nav

<nav></nav> // μ‚¬μ΄νŠΈ λ‚΄ 링크λ₯Ό λͺ¨μ•„λ‘” λ‚΄λΉ„κ²Œμ΄μ…˜μ„ λ§Œλ“œλŠ” νƒœκ·Έ
μ›Ή μ‚¬μ΄νŠΈμ˜ 동선을 생성해주며 μƒμœ„ νŽ˜μ΄μ§€μ—μ„œ ν•˜μœ„ νŽ˜μ΄μ§€λ‘œ μœ λ„ν•˜λŠ” μ—­ν• 

main

<main></main> // μ›Ή μ‚¬μ΄νŠΈμ˜ λ³Έλ¬Έ
메인 컨텐츠λ₯Ό 크게 κ°μ‹Έμ£ΌλŠ” μ—­ν• λ‘œ, ν•œ HTML λ‚΄μ—μ„œ 1개만 쑴재

article

<article></article> // main νƒœκ·Έ μ•ˆμ—μ„œ div λŒ€μ²΄,
λ‰΄μŠ€λ‚˜ λΈ”λ‘œκ·Έ κΈ€κ³Ό 같이 λ…λ¦½μ μœΌλ‘œ 컨텐츠 κ·Έ μžμ²΄κ°€ 될 수 μžˆλŠ” 컨텐츠

section

<section></section> 
// main νƒœκ·Έ μ•ˆμ—μ„œ div λŒ€μ²΄, 각 μ»¨ν…μΈ μ˜ μ˜μ—­μ„ κ΅¬νšν•˜λŠ” 것에 주둜 μ‚¬μš©

aside

<aside></aside> // main νƒœκ·Έ μ•ˆμ—μ„œ, 뢀가적인 μ½˜ν…μΈ λ‚˜ κ΄‘κ³  등을 ν‘œμ‹œν•˜κΈ° μœ„ν•΄ μ‚¬μš©

footer

<footer></footer> // μ›Ή νŽ˜μ΄μ§€μ˜ κ°€μž₯ ν•˜λ‹¨, 
μ›Ή μ‚¬μ΄νŠΈ ν•˜λ‹¨μ— νšŒμ‚¬ μ •λ³΄λ‚˜ μ•½κ΄€ 정보, μ‚¬μ΄νŠΈ 맡, μ†Œμ…œλ―Έλ””μ–΄ 링크 λ“±μ˜ 컨텐츠λ₯Ό ν‘œμ‹œν•˜λŠ” 것에 μ‚¬μš©

이타릭체

<i></i> // μ‹œκ°μ μœΌλ‘œλ§Œ 이타릭체
<em></em> // κ°•μ‘°ν•˜λŠ” μ˜λ―Έκ°€ λ‹΄κΈ΄ 이타릭체

λ³Όλ“œμ²΄

<b></b> // μ‹œκ°μ μœΌλ‘œλ§Œ λ³Όλ“œμ²΄
<strong></strong> // κ°•μ‘°ν•˜λŠ” μ˜λ―Έκ°€ λ‹΄κΈ΄ λ³Όλ“œμ²΄

λ‚˜μ—΄ νƒœκ·Έ

<ol></ol> // μˆœμ„œκ°€ μ€‘μš”ν•œ λͺ©λ‘μ„ μž‘μ„±ν•  λ•Œ(1, 2, 3...)
<ul></ul> // μˆœμ„œκ°€ μ—†λŠ” λͺ©λ‘μ„ μž‘μ„±ν•  λ•Œ
<dl></dl> // κ°œλ…μ˜ μ •μ˜λ‚˜ μ„€λͺ… λ“±μ˜ λͺ©λ‘μ„ μž‘μ„±ν•  λ•Œ

button / a

// νŠΉμ •ν•œ μ•‘μ…˜(둜그인, 제좜 λ“±)을 μœ„ν•œ 클릭 κ°€λŠ₯ν•œ λ²„νŠΌ 
<button type="button" class="start-button">μ‹œμž‘</button>

// νŽ˜μ΄μ§€μ—μ„œ μ–΄λ”˜κ°€λ‘œ 이동(ν™ˆ λ²„νŠΌ λ“±)ν•˜λŠ” 링크일 λ•Œ μ‚¬μš©, 링크/λ¬Έμ„œκ°„μ˜ 이동
<a href="" class="start-button">μ‹œμž‘</a>

더 λ§Žμ€ νƒœκ·Έλ“€ πŸ‘‰ https://developer.mozilla.org/ko/docs/Web/HTML/Element


πŸ“™ Block vs Inline

block

주둜 layout용으둜 display : block 속성을 가짐

  • div, h1, p λ“±..
  • 수직으둜 μŒ“μ΄κ³  크기λ₯Ό 지정할 수 있음
  • margin, padding 값을 μƒν•˜μ’Œμš° λͺ¨λ‘ μ„€μ •ν•  수 있음

inline

주둜 text용으둜 display : inline 속성을 가짐

  • span, a, img, input, textarea, button λ“±..
  • ν•„μš”ν•œ 만큼의 λ„ˆλΉ„λ₯Ό μ‚¬μš©
  • width:0; height:0; 으둜 μ‹œμž‘
  • margin, padding 값을 쒌우만 μ„€μ •ν•  수 있음
profile
Frontend Developer

0개의 λŒ“κΈ€