Semantics

이재현·2021년 6월 8일
TILWeCodereplitsemantic
0
post-custom-banner

Build('apple'), createLiWithContent('apple')

위 두개의 코드를 보았을 때, 우측의 코드는 apple이라는 Content를 가지고 Li를 만들어 내겠구나, 추측할 수 있습니다. 하지만 왼쪽의 코드 Build만을 가지고는 어떤 코드일지 특정해내기 힘든 부분이 있습니다.
이 때, 우측의 코드를 조금 더 Semantic한 측면이 있다고 할 수 있는 것입니다. 즉 Semantic이란 해당하는 코드가 어떤 목적을 가지고 있는가? 어떤 효과를 발생시키는가? 에 대한 의미를 나타낼 수 있는 프로그래밍 방식을 의미합니다..

img 태그 vs div 태그에 background-image 속성을 추가하는 것

두가지 방식 모두 사이트에 이미지를 추가시키는 방법입니다.
하지만 img태그와 div태그를 보았을 때, img태그는 태그 자체에서 이미지라는 의미, 목적이 느껴지는 반면, div태그를 보았을 때, 해당 코드의 의미를 특정해내기 힘든 부분이 있습니다. 이 경우 둘중 img태그가 좀 더 semantic하다고 할 수 있을 것 같습니다.

Semantic 프로그래밍의 장점

  • 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다 (SEO 참조).
  • 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
  • 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
  • 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다
  • 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.
    • 참조 : https://developer.mozilla.org/ko/docs/Glossary/Semantics
    profile
    이재현
    항상 생각하는 개발자
    이전 포스트

    Function

    다음 포스트

    img vs div

    post-custom-banner

    0개의 댓글