HTML, Semantic과 이미지

전민승·2020년 9월 15일
1

이미지 넣을 때

1. img 태그를 사용

  1. 내가 홈페이지에 사용할 이미지가 사용자에게 도움이 많이 될 거라면 html의 img 태그를 사용하자

  2. img 태그 안에 alt 태그를 사용하여 이미지에 대한 설명이 가능하다. -> 이미지에 대한 명확한 의미가 전달 가능

2. div 태그에 background-image 속성

  1. 내가 홈페이지에 사용할 이미지의 역할이 디자인을 표현하는데 집중한다면, css의 background-image를 사용하자

  2. background-image 이미지 속성은 크롤링 할 수 없다. -> 데이터로서의 의미를 가지진 않는다.

Semantic Web

  1. 다양한 웹 페이지들의 규칙을 잡아주는 것으로 이해했다. -> 무수한 정보들 사이에서 의미론적인 관계를 알아내어 기계가 인간처럼 문서들의 관계와 의미 파악이 가능하도록 목표하고 있다.

Semantic Tag

  1. html의 태그인 header, footer 등 특별한 기능은 없지만 무슨 의미를 지니는지 쉽게 알아볼 수 있다.
    ->semantic tag를 사용안하고 모두 div를 써서 html구조를 짜면 눈으로 코드를 쉽게 확인하기 힘들다.

  2. 검색엔진 최적화 가능 -> div, span 태그를 사용할 때 보다 문서의 중요부분을 잘 표시할 수 있다.

profile
Frontend Developer

0개의 댓글