사이트에 이미지 삽입 방법 두가지
① <img> 태그를 사용하는 방법
② <div> 태그에 이미지 속성을 추가하는 방법
1. Sementic Web
시맨틱 웹(semantic Web)은 '단순히 웹'을 뜻한다.
→ '단순희 웹이란 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만 것이다.
HTML에서의 시맨틱 웹
HTML5 이전까지는 시맨틱 태그라는 것이 없었다.
그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,
개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 보기 어려웠고, 검색 엔진 또한
결과값의 정확도가 떨어졌을 것이다.
그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.
2. Semantic Tag
<div class="header">
header
</div>위와 같이 기존에는 <div>태그에 <class>를 header로 지정한다.
하지만, 시맨틱 태그는
<header>헤더입니다</header이런식으로 쓰는 것이다.
<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.
태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.
위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.
위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.
결론
①<img> 태그를 사용하는 방법
img 태그를 사용해 이미지를 추가하는 방식은 html5 부터 제공되는 Semantic tag를 사용하는 것이다.
장점: img의 크기(width,height)를 개별적으로 지정해 줄 수 있다.
근처에 있는 다른 요소들에도 영향을 주게 되어서, 이때 이미지 태그에 인접해 있는 요소가 이미지 사이즈에 따라 위치가 변경된다.
②<div> 태그에 이미지 속성을 추가하는 방법
background-image 속성을 사용하는 것은 html5 이전에 사용하던 방식이라고 할 수 있다.
장점: 이 속성을 사용하면 이미지 자체에 크기를 개별적으로 지정은 불가능 하지만, 부모 태그를 사용하여
크기를 조절해서 이미지의 크기를 변경 할 수 있다. 이 경우엔 인접해 있는 요소에 영향을 주지 않는다고 한다.
어떤 방식이 좋다기 보다는, 상황에 따라 방법을 다르게 써야한다.
