이미지 추가 방법
사이트에 이미지를 넣는 방법은 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 두가지 방법이 있다.
• img태그를 사용하는 방법
<img src="이미지 경로" alt="이미지 설명">• css로 background-image 속성을 추가하는 방법
<html> <head> <style> .bg-img{ background-url: "이미지 경로" } </style> </head> <body> <div class="bg-img"></div> </body> </html>
img 태그를 사용하는게 좋은 경우는 이미지에 문구가 사용되어 의미를 가지는 경우 이다. 이때 alt 태그를 사용해 의미 설명이 가능하다.
반면 이미지 위에 텍스트가 들어가고, 백그라운드로 중요도가 높지 않거나 hover버튼처럼 일정 부분만 선택해서 보여줄 경우 에는 css에서 background-image 속성으로 이미지를 손 쉽게 변경할 수 있다.
img 태그를 사용해서 유의미한 정보를 가지고 있는 웹 페이지에 비해 css 속성을 사용한 웹페이지는 그저 시안과 비슷하게, 단순히 시각화한 페이지이다.
다시말해 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 큰 의미없이 편하게 다루려면 background image를 쓰면 된다.
Semantic Web
Semantic Web은 ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. 컴퓨터가 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있는 차세대 지능형 웹으로, 웹을 잡다한 데이터 집합이 아닌 의미와 관련성을 가지는 거대한 데이터베이스를 구축한다.
• 과거 시맨틱 웹이 고안되기 전
<div id="header"></div>• Semantic Web 고안 후
<header></header>→ 컴퓨터는 이 부분이 header라는 것을 이해할 수 있게 되었다.
Semantic Tags
시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag 이다. HTML5 언어에 익숙하지 않는 사람이 보고도 그 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 Semantic tag라고 한다.
ex)
<header> 페이지 상단이나 섹션의 머리말
<nav> 문서의 네비게이션, 메뉴 항목을 정의
<section> 문서의 구획들을 정의
<article> 본문
etc
