장호철

장호철

안녕하세요. 주변의 사소한 어려움을 해결하는 사람 그리고 좋은 영향력을 전달하는 개발자가 되고싶습니다

Categories

HTML&CSS-4(Semantic Web, Semantic Tag)

2 분 소요

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

혹시 면접에서 이런 질문이 나에게 온다면…?

에이 구현되면 다 똑같은거 아냐…? 라고 생각할 수 있지만, 실제로 묻는 질문이라고 하여 당황하지않도록 미리 대답을 아래에 쓸 예정입니다.

‘Semantic Web’ VS ‘Semantic Tag’

위의 질문에 대답을 하기 위해서는 두가지 개념을 정확하게 알고 설명할 수 있어야합니다.

1. Semantic Web

시맨틱 웹은 컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹이다.
(출처 : 나무위키)

웹에 존재하는 많은 페이지에 메타데이터를 부여하여, 기존의 데이터집합에서 ‘의미’를 가지는 데이터베이스로 구축하는 것을 의미합니다. (지금은 너무 당연하게 느껴지지만, 아무것도 없던 시절에 이런 발상을 한 자체가 대단하긴 하다.)

2. Semantic Tag

Semantic Tag는 각 태그가 포함하는 내용에 맞는 적합한 정보를 제공하는 것을 의미합니다. 예를 들어 <div>나 <span>은 정확히 어떤 용도로 썼는지 알 수 없지만, Semantic Tag를 사용하면 크게 3가지의 장점이 있습니다.

  • Accessibility : Semantic Tag는 모바일 사용자나 장애가 있는 사용자의 접근성을 더 향상시켜 줍니다. 브라우저나 스크린 리더가 코드를 더 쉽게 이해할 수 있기 때문입니다.
  • SEO: Semantic Tag는 SEO(Search Engine Optimization)을 향상시킴으로써 웹 페이지의 방문자 수를 늘릴 수 있습니다. SEO가 좋을 수록 검색 엔진이 웹 사이트를 빠르게 식별할 수 있고 중요한 정보에 적절한 가중치를 부여할 수 있습니다.
  • Easy to Understand: Semantic Tag는 웹 사이트 소스코드의 가독성을 향상시켜 줍니다.
    (출처:Semantic HTML(시맨틱 HTML) 이란?)

대표적인 Semantic Tags들

  • header, nav : 웹의 최상단에 위치하여 navigator 역할은 할 때 사용합니다.
  • main, footer : 본문과 맨아래 기타정보 등을 표기할 때 자주 사용합니다.
  • article, section : 주로 contents 를 나눠서 보여줄 때 많이 사용합니다.
  • aside : 페이지의 우측 혹은 좌측에 위치하여 목차를 보여준다거나 조금 더 편한 UX를 제공할 때 사용합니다.
  • video : 비디오를 올릴 때 사용합니다.

3. 결론

그래서 첫 질문에 대해서 대답을 한다면!

”<img>태그를 써서 사진을 불러오는 것과 <div>태그에 그림을 불러오는 것은 정보성, 접근성 등의 차이가 있습니다. 우선 <img>태그를 사용해서 사진을 불러오는 것은

  1. 프린트가 필요한 경우: 일단 백그라운드 이미지로 설정할 경우 이미지는 출력되지않습니다.
  2. 이미지에 문구가 사용되어 의미를 가질 때 : 이미지에 문구가 사용되어 의미를 가질 때 <alt>값을 지정할 수 있기때문에 장점이 됩니다.
  3. 이미지가 콘텐츠의 중심일 때 : image 중심의 페이지일 경우에도 <div>태그보다 장점을 가집니다.

위와 같은 상황일 때 장점이 됩니다.

반면 <div> 를 사용하여 background 로 그림을 불러오는 것은

  1. 일정부분만 선택해서 (ex. hover버튼으로 보여줄 때) 보여줄 때 : 간단하게 css를 사용하여 이미지를 변경할 수 있기때문에 장점이 됩니다.
  2. 이미지 위에 텍스트가 들어갈 때 : 간단하게 텍스트 안에 백그라운드를 넣을 수 있기때문에
  3. 배경 전체에 확대해서 보여줄 때 : 배경전체를 확대할 경우, background-size를 통해 이미지 크기를 간단히 조작가능 장점이 됩니다. 그러나 background-image의 이미지는 크롤링할 때 색인되지않는 점, 디바이스화면 너비나 해상도에 관계없이 하나의 이미지만 사용되기때문에 성능이 안좋은 단점등이 있습니다.

결론적으로 페이지 내에서 필요한 상황에 맞게 <img>태그와 <div> 태그를 섞어서 이미지를 보여주는 것이 좋습니다. 그러나 순수장식용이 아니라면 최대한 <img>태그를 사용하는 것을 권장합니다.

(다 쓰고 나니 대답이 너무 긴 것같네요…이건 면접을 본격적으로 준비할 때 조금 더 줄여보겠습니다…)

댓글남기기

참고