TIL HTML/CSS Chapter 20 (과제2)

finelinefe·2020년 8월 19일
0

HTML/CSS

목록 보기
2/9

시멘틱 웹, 시멘틱 태그

보다 명확하고 직관적인 의미를 전달하기 위해 이름 그 자체로도 의미를 나타낸다
form, table 등이 그 예이다. footer, section 등 이름 그자체로 어떤 레이아웃을 나타내기 위해 사용했는지 알 수 있는 태그를 의미한다.

이러한 태그를 모여 구성된 웹을 시멘틱 웹이라 한다. 이는 HTML5가 웹 개발을 위한 차세대 표준으로 정해졌기 때문에 이러한 마크업 규약에 따라야 하는 것이다. 따라서 시멘틱 태그를 이용해 시멘틱 웹을 작성하게 되면 마크업 구조를 잡고 이를 바탕으로 전체를 직관적으로 이해할 수 있다.

시멘틱 구조 태그

<header>,<nav>,<section>,<article>,<aside>,<footer> ..

사이트에 이미지를 넣는 두 가지 방법

  1. img 태그 이용 = img 자체 태그로 이미지를 집어넣는 방법을 말한다. alt 속성을 추가해 서버에 이미지가 없을 경우 해당 이미지의 이름을 보여줌으로써 어떤 것이 보이지 않는지 알려줄 수 있다. 태그로 이미지를 사용하였기 때문에 backgroound-image와 차이점은 css 등 각종 이벤트를 적용할 수 있다는 것이다. 또한 그 자체로서 이미지가 웹에서 가지는 정보전달성이나 가시성 목적이 있을 경우 background-image 보다는 이러한 방식을 사용한다. 예시로 상품리스트를 보여주는 페이지의 경우 그 상품 자체의 모습을 보여주어야 하고, 클릭시 서브페이지로 넘어가야 하기 때문에 이러한 경우 링크라는 이벤트도 걸 수 있어야 한다. 때문에 background-image는 적합하지 않고 img 태그가 더 적합하다고 볼 수 있다.

  2. background-image 이용 = 전자와 다르게 이벤트를 설정할 수 없다. 배경 이미지 그 자체로만 넣는데 의의를 두는 느낌. 때문에 전자와 다르게 정보전달성이나 웹에서 태그가 가지는 중요한 의미가 있지 않는 경우. 이러한 방식을 사용한다. 예시로, 웹 페이지의 디자인 목적을 위한 전체 배경을 지정하는 경우가 이에 해당한다. 이는 특히 클릭하거나 함으로써 다른 이벤트를 불러와야 하는 필요가 없으므로 전자보다는 background-image를 사용하는게 적합하다.

0개의 댓글