[HTML] Semantic Web과 Semantic Tag

Jane Yeonju Kim·2022년 2월 15일
0

HTML과 CSS

목록 보기
1/2
post-thumbnail

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

이 질문에 대답하기 위해서 일단 두 가지 방법으로 사이트에 이미지를 넣는 것을 구현해보겠습니다.


1. 태그를 사용해서 이미지 추가

<img src="이미지 주소" width="300px" alt="이미지 설명">

img태그의 속성 값으로 이미지 주소(src), 가로 사이즈(width), 이미지에 대한 설명(alt)를 채워 넣어주면 됩니다. 이미지 주소를 제외하고는 생략이 가능합니다. 하지만 이미지에 대한 설명을 추가하면 웹 접근성을 준수할 수 있습니다.


2. 태그에 background-image 속성을 추가

<div style="width:300px; height:200px; 
            background-size:100%; 
            background-image: url('이미지 주소');">
</div>

태그에 background-image 속성을 추가하는 방법은 CSS를 통해서 이미지를 넣는 방법입니다. 그래서 태그에 클래스를 지정하고 css파일에서 해당 클래스에 값을 넣거나 위의 방법처럼 style속성에 값을 넣을 수 있습니다.

이렇게 이미지를 넣으려면 태그의 width와 height을 지정하여 태그가 차지할 공간을 미리 마련해줘야 합니다. 아무런 값도 없고 공간도 없다면 해당 태그는 이미지 주소를 갖게 되어도 아무 것도 표시할 수가 없습니다. 그리고 이미지가 잘리지 않게 하려면 background-size로 조절을 해야 합니다.


img태그를 쓰면 더 쉽게 이미지를 넣을 수 있는 것 같은데 왜 이렇게 하는 걸까요?

  • 먼저 background-image의 이름 그대로 이미지 위에 다른 이미지나 텍스트가 올라갈 수 있습니다.
  • CSS를 통해서 이미지를 넣기 때문에 CSS를 통해서 다른 이미지로 수정하기가 쉽습니다. 태그가 차지하는 사이즈, 이미지의 사이즈를 css파일만 수정해면 되기 때문에 이미지의 일부만 보여주고 싶을 때 이미지 자체를 수정할 필요가 없습니다!

😎 배경 이미지로 이미지를 넣는 경우라면 background-image 속성을 이용하는 게 더 적절하고, 이미지가 중요한 경우라면 img 태그를 이용하는 게 더 적절하다고 할 수 있습니다!


이렇게 의미를 담은 태그를 사용하는 것은 Semantic Tag를 사용한다고 말할 수 있습니다. html의 body부분에서 사이트의 전체 구조를 한눈에 볼 수 있도록 header, nav, article, section, footer 등의 시맨틱 태그를 사용하면 유지 보수도 편하고 이해하기도 쉽습니다.

Semantic web은 더 나아가서 키워드 단위가 아니라 데이터 단위로 연결되는 웹을 의미합니다. html의 body뿐만 아니라 head부분에서도 메타 데이터를 제공해서 정보의 효율적 검색, 통합, 재사용을 돕는 W3C의 비전 중 하나입니다.

W3C Semantic Web

profile
안녕하세요! 김개발자입니다 👩‍💻 🐈

4개의 댓글

comment-user-thumbnail
2022년 2월 16일

글 잘읽었습니다! 두 방법의 차이점을 쉽게 써주셔서 좋네요😆💕 연주님 화이팅!💪

1개의 답글
comment-user-thumbnail
2022년 2월 20일

중간에 질문에 대한 답변으로 개념 정리 해주신 것 너무 좋아요! 제 내적 질문에 대한 답인 것 같아 궁금했던 점이 해소됬네요😍

1개의 답글