🤔 Semantic이 뭔데?!
프로그래밍에서 semantic은 코드 블럭의 의미를 뜻한다.
예를 들어, JS에서 함수의 이름을 기능에 맞게 명명하는 것, CSS에서 선택자만 보고도 무엇을 의미하는지 이해 할 수 있도록 명명하는 모든 것들이 semantic하다고 말 할 수 있다.
JS에서 semantic
function add (){};
function oh(){}; -> 'add'에 비해 'oh'라는 함수명은 기능에 대한 어떠한 정보도 제공하지 못한다.
CSS에서 semantic
.selected{};
.red {};-> 단순히 red라고 명명하기보다는 상태에 대한 의미를 전달 할 수 있는 클래스명을 쓰는 것이 좋다.
📌 웹에서 Semantic이 중요한 이유
하나의 코드블럭에도 각 목적에 따른 의미를 부여했던 것처럼, web에서 보여지는 데이터들에도 그 목적과 역할에 따른 의미를 부여해야한다.
이때 우리는 semantic tag를 사용하여 그 의미를 컴퓨터가 이해할 수 있도록 전달 할 수 있다.
예를 들어 이미지를 삽입하는 두 가지 방법에 대해 살펴보자!
1. img 태그 사용하기
2. div 태그 사용하기 (background-image 속성 추가)
두 방법 모두 화면 상에 보이는 모습은 동일하지만 코드가 갖는 의미는 전혀 다르다. img 태그는 그 자체로 해당 데이터가 이미지라는 것을 의미하며, alt라는 속성을 통해 해당 이미지에 대한 정보를 제공할 수 있지만, div는 데이터에 대한 어떠한 정보도 제공하지 않는다.
-> 로고나 설명글과 관련된 이미지같이 정보로써 꼭 필요한 존재라면 img태그를 사용하고, 단순히 배경이나 장식으로써의 역할을 하는 이미지라면 css에서 첨부하는 것이 좋다!
프론트엔드 개발자로서, 단순히 스크린뷰를 위한 코드를 작성하는 것이 아니라 각각의 데이터들의 구조와 목적에 대한 의미를 전달 할 수 있는 페이지를 만들자!!
