<TIL> html/css - image tag
html/css 에서 우리는 이미지를 추가하는 방법은 두 가지를 알고 있다.
그렇다면, 왜 두 가지 방법을 이용하는지? 각각의 사용 요령과 장단점에 대해서 알아보자.
1. HTML Tag
<img src="..."> </img>를 사용하는 경우
<img src="..."> </img>를 사용하는 경우
먼저 지난 번 알아봤던, Semantic Tag & Web에 대한 이해가 필요하다.
왜 필요하다고 했는가? 바로 Tag를 통한 의미론적 기능을 할 수 있다.
"html에 tag를 사용하는 경우"
1.사용할 이미지가 내용 그 자체로서 의미가 있을 때
2.검색 엔진 활성화를 통한 검색 노출
3.프린트로 이미지 인쇄가 필요한 경우
4.'alt'와 'broken image'의 사용 가능
2. CSS Property
<background-image>url("...");
<background-image>url("...");
그렇다면, "굳이 css 속성을 이용해 이미지를 넣어야 하나?", "쓸모가 없네" 라는 생각이 들지만 사실은 그렇지 않다.
"css에 property를 사용하는 경우"
1.사용할 이미지가 디자인의 목적으로 의미가 있을 때
2.이미지 위에 텍스트가 들어간다.
- 즉, 배경(바탕화면)을 이미지로 사용하는 경우다.
이럴 경우 css만으로 background-size등의 속성을 사용해 배경 이미지 크기를 간단하게 조작이 가능하며, 태그 내부에 텍스트를 넣어서 사용할 수 있다. - 일정부분만 선택해서 보여줄 경우('hover')에 간단하게 css만을 사용하여 이미지를 다른 것으로 손쉽게 변경이 가능하다.
3.프린트로 이미지 인쇄가 필요하지 않은 경우
4.CSS Sprites를 사용해 이미지 속도를 향상 시킬 경우
- 수 많은 img 태그를 퍼블리싱한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 로딩 속도도 향상할 수 있다.
5.'alt'와 'broken image' 사용불가
결론은
목적과 장단점을 정확하게 파악하여 적재적소에 가장 효과적인 방법으로 사용하면 된다.
내가 생각하는 주요 요점과 키워드는 딱 두개.
"semantic tag & web과 연계하여서 html과 css 사용 목적을 파악하였는가?"
"이미지가 웹 페이지 내에서 중요한 역할을 하는가?"
[출처] https://chlolisher.tistory.com/77
Author And Source
이 문제에 관하여(<TIL> html/css - image tag), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jeveloper/TIL-htmlcss-image-tag저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)