semantic 이란? 사전적인 용어는 의미의, 의미론의 라는 뜻이다.
그렇다면 HTML이랑 semantic 이랑 무슨 관련이 있는것일까?
우선 결론부터 말하자면, HTML코드를 작성할때 좀 더 의미있게 코드를 작성하는것을 말한다.
우리가 자주 쓰는 컨테이너는 <div> 태그인데 주로 div는 division의 약자로 우리가 HTML 코드를 작성할때 주로
레이아웃이라고 해야하나.. 어쨌든 나눌때 사용한다. (레이아웃 등을)
오늘 쓴 글의 주제인 semantic 태그도 div랑 비슷한 역할을 한다. 기능은 거의 똑같다고 보면된다.
쉽게말하면 div랑 똑같은데 의미를 부여하는것이다!
다음 코드로 예를들어 설명하자면,
<body>
<header> News </header>
<main> Today is good day to coding </main>
<footer>© PJJ</footer>
</body>
header , main , footer 태그를 보면 알듯이, 우리가 코드를 읽을때 그 코드 안에 있는것이 무엇을 의미하는지 좀 더 파악하기 쉽게 해준다.
위 코드에 있는 header, main, footer 는 div로 바꿔서 써도 상관없다.
하지만 모든 전부 div코드로만 작성한다면, 그 내용을 보고 아 이부분이 머릿말이군.. 아 이 부분은 본론이고.. 이런식으로 파악해야한다.
semantic 태그를 사용하면 그런 수고로움을 좀 더 덜어준달까?
semantic 태그는 저렇게 세 가지만 있는것이 아니다. 더 많은 semantic 코드는 MDN 문서를 참고하도록하자.
결론은 모든 레이아웃들을 div태그로 떡칠하는것보다 semantic 태그로 작성하는게 이해하기가 쉬우니 되도록이면 잘 활용해서 작성하도록 하자!
'프로그래밍 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS]Flex box (0) | 2020.11.04 |
|---|---|
| HTML & CSS Class 와 id (0) | 2020.10.18 |
| 블럭과 인라인 (0) | 2020.10.18 |
| 웹페이지 탭창에 아이콘 넣기 (0) | 2020.10.15 |
| HTML, CSS, JavaScript (0) | 2020.10.12 |