Sementic tag와 기타

Sementic tag

HTML에서 sementic tag를 사용하면 섹션을 보다 직관적으로 나눌 수 있도록 할 수 있는 것 같다. 예를 들어 아래와 같은 두가지 방법으로 섹션을 나눌 수 있다. 전자의 코드는 div에 class를 부여하여 섹션을 구분하였지만, 후자의 코드는 div가 아닌 header와 footer로 구분하여 섹션을 구분하였다. 따라서 sementic tag를 이용하면 보다 직관적인 코드작성이 될 것이라고 생각하고 있다.

<div class="header">
</div>
....
<div class="footer">
</div>

<header>
</header>
...
<footer>
</footer>

img vs background-image

<img alt="" src="">
background-img{url:""}

또 웹에 이미지를 추가하는 방법은 위와 같이 html에서 img태그를 사용하는 것과 CSS에서 background-img를 사용하는 두가지 방법이 있다. background-img를 사용하면 프린트 출력시에 출력되지 않고, 이미지 로딩에서 에러가 발생하더라도 따로 어떤 메세지가 출력되지 않는다. 따라서 정말 디자인적인 의미만을 갖고있는 이미지라면 background-img를 추가하여도 괜찮지만, 그렇지 않고 문서에서 의미가 존재하는 이미지라면 img 태그를 사용하는 것이 현명할 것으로 생각된다.

생각해보기

위에서 다루었던 예제와 같이 이미지 하나를 추가할 때에도 여러가지 상황들을 고려하여 코드를 작성해야 하는 것을 생각할 수 있다. 따라서 코드를 작성할 때에는 여러가지 상황들을 고려하여, 특히 유저의 입장을 유의하여 코드를 작성하여야 할 것 같다.