Sementic : 의미의, 의미론적인
말그대로 태그를 사용하거나 웹을 만들때 표현하는것에 중점을 두는것이 아닌
의미에 중점을 두는것을 얘기한다.
예를 들어 두 코드는 모두 img를 표현한다
<img src="..." alt="..."><div style="background-image : url(..)"></div>간단하게 정리하자면, 표현의 결과는 똑같을 수 있어도 의미적으로 봤을때는
이미지가 좀 더 내용적인 것이 부각이되어야 한다면 첫번째 코드를 사용하는 것이 맞고,
이미지가 단순히 배경적인 부분이라면 두번째 코드를 사용하는것이 맞다.
여러가지를 얘기할 수 있겠지만 일단 첫번째는
img 태그같은 경우는 이미지가 로딩이 되지 않을경우
alt의 내용이 표시가 된다거나 또는 엑스박스 같이 이미지가 있다는 것을 알려주지만
background-image 는 그렇지 못하다.
img 태그의 경우에는 이미지 자체가 중요한 부분이기 때문에
크기를 변경하거나 하여도 이미지가 찌그러지거나 왜곡될 수는 있어도
한 부분만 표현된다거나, 그림이 잘려나가는 경우는 잘 없지만
background-image의 경우에는 div의 크기를 변경함에 따라서
이미지의 일부(끝단쪽)가 잘려나가거나 정확하게 표현되지 않는다.
당연한 이야기겠지만, 차후에 코드의 수정에 있어서도
img 태그가 확인하거나 알아보기가 훨씬 용이하다.
이와같이 태그를 사용하거나 웹을 만드는데 있어서는
결과로서의 표현되는 부분 뿐만 아니라 좀 더 의미적으로 알맞은 태그를 사용하는것이 맞다.
찾아보고 어느정도 알겠다 하는 내용을 머릿속에서 글로 옮기려니
쉽지는 않지만, 이것도 하다보면 조금씩 더 좋아질거라 생각한다.
새로운 시작