Semantic 검색 하면 (의미론적인)
세상에 의미를 붙이고자하면 못 붙이는게 있을까?
무엇이 의미론적이라는 것인가?
무엇을 의미론적으로 접근해야하는 것인가?
그래서 결국, 시멘틱 마크업(Semantic Markup) 어떻게 해야하는가?
1. 시작하기에 앞서 먼저 생각해볼 이야기
때로는 당연하게 알고있던 것들이 새로운 것을 파악하는데 도움이 된다.
당연한거 아닌가? 싶은 질문을 해보며 되짚어보는 시간을 가지자.
초등학교 시절.
빨간 네모의 이름표에 이름을 적었던 기억을 꺼내보자.
그리고 소지품에 이름표를 붙였던 기억도 같이.
1학년 1반 김코드 이름표를 왜 붙였을까?
누구의 것인지 알기 위해서 사물함에도 이름표, 번호를 표시했을 것이다.
왜 표시를 했을까?
42번 사물함을 열어보세요. 지칭 할 수 있기 떄문이다.
42번 사물함이 누구것이죠? 지칭 할 수 있기 때문이다.
해당 사물함의 주인도 확인 할 수 있을 것이다.
누구의 사물함인지 알기 위해서이다.
그래서 표시 한 것이다.
어..거기아래..아니요 거기보단 위에...아뇨 그보단 뒤쪽에...는 분명히 좋은 방법이 아니다.
그래서 우리는 어렸을 때부터 익숙하게 써왔다. '라벨링' 이라는 방법 말이다.
2. 다시 시멘틱 마크업(Semantic Markup)
div로만 가득하게 마크업을 작성했다고 해보자. 그렇다면 문제가 뭘까?
한 두줄만 있을 때는 별로 문제가 안되겠지만.
코드가 길어지고 복잡해진다면 인식성이 매우 떨어진다.
아래와 같은 주문을 받았을 때 제대로 수정/편집이 가능할까?
div안에 div그리고 그 안에 div 그안에 그안에div아래에 div안에 4번째 div에 제목을 써주세요.
어디에 무엇을 놓아야하는지 모르는 상태일 것이다.
어..거기아래..아니요 거기보단 위에...아뇨 그보단 뒤쪽에...
div안에 컨텐츠가 없다면 ?
제목 / 내용 / 타이틀 에 해당하는 곳을 인식할 수 있을까?
-> 인식성이 떨어진다. 힘들다. 일단 넣어보고 테스트 화면에서 식별이 가능할 수도 있다. 매우 비효과적이다.
이제, div div div 말고 라벨링을 사용해보자.
h2 : 제목을 나타내는 heading요소 중 2번째 위계에 해당하는 타이틀임을 나타내주는 태그
dl : Description List 설명 목록을 나타내는 태그 (dt요소를 dd로 설명함)
dt : Description Term 설명할 대상의 이름, 용어의 이름 등을 넣는다. 주제, 타이틀을 적는 태그
dd : Description Details dt에서 적은 것이 가위라면, 가위에 대한 설명을 적는 태그
정리 1 : 코드를 작성하는 입장에서 작성, 유지보수 등에 편의가 있다.
댓글