Semantic Web
시맨틱 웹(Semantic Web)은 "의미있는 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다. (물론 사람도 이해할 수 있습니다.)- Wiki 백과
출처: https://blog.cordelia273.space/21 [세상의 모든 지식:티스토리]
즉,사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미
Semantic Tag
HTML5에 도입된 semantic 태그는 개발자와 브라우저에게 의미있는 태그 를 제공
semantic 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하며 그 데이터를 활용할 수 있는 semantic web이 실현
즉,
다양한 semantic tag 예시
HTML : img 태그
📒 사용이유
1. 프린트가 필요한 경우
백그라운드 이미지는 출력시 포함되지 않음
2. 이미지가 의미를 가지는 경우
이미지 업로드 실패 시, 깨진 이미지 아이콘과 alt가 함께 노출된다
alt를 통해 이미지의 원래 의미를 전달할 수 있다.3. 검색 엔진에 노출이 필요한 경우 (SEO)
: 검색 엔진 최적화 (SEO)를 할 때 img 태그의 alt 속성을 사용
: alt 속성은 이미지가 렌더링 되지 못할 때 나타날 문자열을 지정하기 위한 값으로,
검색 엔진은 이미지에 대한 정보를 alt 속성을 읽어서 얻는다.
: TTS (Text to Speech)에도 활용된다.
📗 특징
- width와 height를 지정하지 않으면 원본 크기로 보인다.
- width 또는 height 하나만 지정하면 비율이 맞춰 다른 속성이 자동으로 생성되어 비율이 유지된다.
- 태그 자체 속성에서 width와 height를 지정할 수 있다.
- 이미지가 어떠한 이유로 보일 수 없으면 alt에 적힌 내용이 화면상에 나타나고 이미지가 로드되지 않음을 보여준다.
태그 + background-image 속성
1. 프린트 시 이미지를 제거해야 하는 경우
출력되면 곤란한 이미지일 경우 제거하고 출력 가능
2. 이미지 위에 텍스트가 들어가는 경우
배경 이미지를 넣고, div 태그 내부에 텍스트를 넣어 사용할 수 있다.
3. CSS sprites를 사용해 이미지 속도를 향상시키는 경우
수 많은 img 태그를 퍼블리싱하는 방법보다, CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 로딩 속도가 향상된다.
📗 특징
- div 태그이기 때문에 크기를 width와 height를 지정하지 않으면 width와:0; height:0; 이다. 그렇기 때문에 크기를 주지 않으면 아예 보이지않는다.
- 비율을 유지하기 위해서는 background-size: 100%; 라는 속성을 포함해야한다.
- height 를 지정해주지 않으면 아예 이미지가 보이지 않는다.
- width 를 주지 않으면 background-size: 100%;를 주더라도 비율이 유지 되지 않고 가로는 다보이지만 세로가 짤린 이미지가 보이게 된다.
- 이미지가 어떠한 이유로 보여줄 수 없는 상태가 되면 화면상에는 아무표시가 나지 않는다.
https://blog.cordelia273.space/21
https://velog.io/@tjdgus0528/img-%ED%83%9C%EA%B7%B8-vs-div-%ED%83%9C%EA%B7%B8%EC%97%90-background-image-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%B6%94%EA%B0%80
