[HTML5] 2 Semantic Web? μ†Œκ°œ-IMBETPY

Doomchit_3Β·2020λ…„ 7μ›” 6일
0

2 HTML

λͺ©λ‘ 보기
2/7
post-thumbnail

πŸͺ Semantic Web μ΄λž€?

μ‹œλ§¨ν‹±μ›Ή(Semantic Web) μ΄λž€ 웹에 μ‘΄μž¬ν•˜λŠ” νŽ˜μ΄μ§€λ“€μ— 메타데이터λ₯Ό λΆ€μ—¬ν•˜μ—¬, μ „μ—λŠ” μž‘λ‹€ν•˜κ²Œ λŠ˜μ–΄μ‘Œλ˜ 정보듀에 의미 와 관련성을 κ°–κ²Œν•˜λŠ” κ°œλ…μ΄λ‹€.

  • 검색엔진은 λ‘œλ΄‡(Robot) ν”„λ‘œκ·Έλž¨μ„ μ΄μš©ν•΄ 맀일 μ›Ήμ‚¬μ΄νŠΈ 정보λ₯Ό μˆ˜μ§‘ν•œλ‹€. 이λ₯Ό 크둀링이라고 ν•˜λ©° ν¬λ‘€λŸ¬κ°€ μˆ˜ν–‰ν•œλ‹€.

  • μœ μ €κ°€ 검색할 ν‚€μ›Œλ“œλ₯Ό μ˜ˆμΈ‘ν•˜μ—¬ ν‚€μ›Œλ“œμ— λŒ€μ‘ν•˜λŠ” 인덱슀λ₯Ό λ§Œλ“€μ–΄ λ†“λŠ”λ‹€. 이λ₯Ό μΈλŽ…μ‹±μ΄λΌ ν•˜λ©° 검색엔진 μΈλ±μ„œκ°€ μˆ˜ν–‰ν•œλ‹€.

  • 인덱싱을 ν•  λ•Œ μ‚¬μš©λ˜λŠ” μ •λ³΄λŠ” HTML μ½”λ“œμ—μ„œ λ‚˜μ˜€λŠ” 것이닀. λ•Œλ¬Έμ— HTML μ½”λ“œμ—μ„œ νŽ˜μ΄μ§€μ˜ 의미λ₯Ό λ“œλŸ¬λ‚΄μ•Ό ν•˜λŠ”λ°, 이λ₯Ό μœ„ν•΄ μ‚¬μš©ν•˜λŠ” 것이 μ‹œλ©˜ν‹±μš”μ†Œ 이닀.

  • 예λ₯Όλ“€μ–΄ HTMl μ—μ„œ μš”μ†Œλ₯Ό 톡해 제λͺ©, 링크 λ“± 데이터가 κ°€μ§€λŠ” μ˜λ―Έκ°€ 무엇인지 νƒœκ·Έλ₯Ό ν†΅ν•΄μ„œ λ“œλŸ¬λ‚΄λ©°, 이λ₯Όν†΅ν•΄ μ‹œλ©˜ν‹± 웹이 κ΅¬ν˜„λœλ‹€.

🎳 semantic & non-semantic μš”μ†Œ

HTML μš”μ†ŒλŠ” non-semantic μš”μ†Œ, semantic μš”μ†Œλ‘œ ꡬ뢄할 수 μžˆλ‹€.

β‘  semantic μš”μ†Œ

form, table, img 등이 있으며 이듀 νƒœκ·ΈλŠ” content의 의미λ₯Ό λͺ…ν™•νžˆ μ„€λͺ…ν•œλ‹€,

β‘‘ non-semantic μš”μ†Œ

div, span 등이 있으며 이듀 νƒœκ·ΈλŠ” content에 λŒ€ν•˜μ—¬ μ–΄λ–€ μ„€λͺ…도 ν•˜μ§€ μ•ŠλŠ”λ‹€.

β‘’ HTML5μ—μ„œ λ“±μž₯ν•œ μ‹œλ§¨ν‹±νƒœκ·Έ

  • header : 헀더λ₯Ό μ˜λ―Έν•œλ‹€

  • nav : λ‚΄λΉ„κ²Œμ΄μ…˜μ„ μ˜λ―Έν•œλ‹€

  • aside : μ‚¬μ΄λ“œμ— μœ„μΉ˜ν•˜λŠ” 곡간을 μ˜λ―Έν•œλ‹€

  • section : 본문의 μ—¬λŸ¬ λ‚΄μš©(article)을 ν¬ν•¨ν•˜λŠ” 곡간을 μ˜λ―Έν•œλ‹€

  • article : λΆ„λ¬Έμ˜ μ£Όλ‚΄μš©μ΄ λ“€μ–΄κ°€λŠ” 곡간을 μ˜λ―Έν•œλ‹€

  • footer : ν‘Έν„°λ₯Ό μ˜λ―Έν•œλ‹€



μ°Έκ³ πŸ“š

mozilla
poiemaweb

profile
Walk it like I talk it x 3 ___#SoftwareEngineer

0개의 λŒ“κΈ€