"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
위의 질문에 대한 답변을 하기 위해선 Semantic Web 과 Semantic Tags에 대한 이해가 필요하다.
semantic 의 사전적 의미는 단어나 문장의 의미에 대한 올바른 이해라는 뜻이다. 많은 HTML 태그들은 의미있는 뜻을 가지고 있다. 즉, HTML 요소 자체로 컨텐트의 종류에 대한 정보를 다룬다. 웹페이지의 구조를 설계하고 구성하는 역할을 하는 HTML에서 적절한 태그 사용은 브라우저와 사용자들에게 보다 의미있는 정보 전달이 가능하도록 해준다.
왜 Semantic Markup이 중요한가?
HTML에서 의미있는 마크업이 중요한 이유는 의미있게 마크업하여 작성하는 것은 모든 방문자들이 웹사이트에 접근가능하도록 하고, 검색엔진에서 높은 순위를 얻고, 전세계의 방문자로부터 가능하도록 하고, 다른 웹서비스들과 효과적으로 호환되기를 원한다면 의무적인 것이다.
또한 의미있게 마크업 작성하는 것은 사람과 컴퓨터 둘다 읽을 수 있는 웹 컨텐트를 만드는 것이다.
어떻게 Semantic Markup을 작성하는가?
의미있는 마크업을 작성하기 위해선 적절하게 HTML 태그들을 선택하고 사용한다. HTML 요소들에선 의미없는 요소들이 있다. 예를들어 div 와 span 은 어떠한 의미도 가지지 않는 요소들이다. 이러한 요소들에게는 id 나 class 속성을 추가하여 컨텐츠에 대한 의미를 힌트로 줄 수 있다.
주요 Semantic Elements
-
header주로 웹사이트 로고, heading 요소들, 사이트의 nav-bar 등을 포함하는 웹 페이지의 상단 부분의 container 역할로 사용한다
-
footer웹 페이지의 저작권, 연락처 등의 정보를 담고 있는 하단 부분의 container 역할로 사용한다.
-
main한 웹페이지에서
main요소는 한번만 사용가능하다. 모든 컨텐트를 담는 역할을 한다. -
nav웹 사이트에서 다른 페이지로 이동하는 링크를 담는 블록을 포함한다.
-
section챕터나 긴 형식 글의 주된 섹션을 담는 요소이다.
-
aside페이지의 기본 컨텐츠과 관련있지만 문서 전체의 주된 내용의 흐름에 포함시키기 어려울때 해당 요소를 사용해 준다.
-
article블로그나 기사 같이 컨텐츠 그 자체로 독립적으로 사용이 가능할 때 해당 요소로 묶어준다.
CSS에서 이미지를 추가하기
HTML의 역할은 적절한 태그를 사용하여 브라우저와 사용자에게 정보 전달하는 것이 중요하다. 웹 페이지에서 이미지를 추가할 때에는 그 이미지가 정보전달에 중요한지 아닌지 고려해봐야한다. 정보전달에 의미있는 역할을 하는 경우 HTML 파일 내에서 img 로 마크업 해줘야한다. 하지만 단순 스타일적인 요소로 이미지를 사용하는 경우는 CSS에서 처리해주는 것이 적절하다.
