👨🏻💻학습 내용
💡 시맨틱 테그.
시맨틱 테그?
시맨틱 테그는 특정한 의미가 있는 테그를 의미한다. 기존 HTML에서는 div 또는 span 테그를 이용해 사이트의 구조를 만들고 별도의 내용이나 역할 같은 것은 포함하지 않았다. 하지만 HTML5부터 시맨틱 테그 요소를 이용해 컨텐츠를 논리적으로 구성하고 각 부분의 역할에 대해 포함할 수 있게 되었다.
더 쉽게 이야기 하면 기존에는 HTML의 div나 span 테그만 보면 해당 내용을 전혀 유추할 수 없었지만, header, nav, article, section 등과 같은 시맨틱 테그를 이용하면 테그만 봐도 내용을 어느 정도 유추할 수 있도록 더 명시적이고 직관적으로 설계가 가능해졌다는 뜻이다.
시맨틱 테그 요소 종류
1. header
- 페이지 소개나 제목과 같은 내용.
- 아이콘이나 작성자 이름 같은 항목.
2. nav
- 내비게이션 링크 모음을 감쌀 때 사용.
3. aside
- 사이드바
4. main
- 메인 내용을 담는 테그.
- 문서에 유일해야함.
- 모든 페이지의 테그 앞에 온다.
5. article
- 독립적인 글.
- 블로그 게시물, 뉴스, 제품 리뷰 등에 사용.
6. footer
- 문서 가장 아래에 위치.
- 연락처, 저작권 데이터, 사이트 맵 등과 같은 내용이 들어감
7. section
- 구체적인 시맨틱 테그가 없는 경우.
장점.
시맨틱 테그를 사용하면 접근성 향상, CSS 스타일링이 편해지는 등 여러 장점들이 생기는데 내가 학습한바 가장 큰 장점은 아래 두가지인 것 같다.
#### 1. 가독성 향상.
의미가 있는 테그들을 사용하면 테그만 읽고도 어떤 내용이 들어가 있을지 예측이 가능하고 다른 개발자가 읽을 때에도 빠른 이해를 도울 수 있다.
2. SEO
검색 엔진 크롤러가 각각의 테그명만으로 전체 페이지 구조와 컨텐츠를 파악하는데 도움을 줄 수 있다. 예를 들어 article이라는 시맨틱 테그로 감싸져 있는 영역을 보고 해당 영역을 보고 검색 엔진이 별도의 문서로 인식할 수 있고 이를 반영하여 저장할 수 있게 된다. 즉, 시맨틱 테그를 이용하면 명확해진 구조를 검색 엔진 크롤러의 파악을 쉽게 도와준다.
💡 이벤트 위임.
이벤트 위임의 예시 참고 - https://ko.javascript.info/event-delegation
이벤트는 기본적으로 버블링이라는 현상을 일으킨다. 예를들어 아래와 같은 코드가 있을 때 각각의 테그에 이벤트 리스너를 이용해 클릭 이벤트를 등록하고 버튼을 클릭하면 다음과 같은 순서로 이벤트가 발생할 것이다.
button → span → div
즉 클릭을 하면 클릭의 대상인 event.target을 기준으로 부모 테그로 클릭 이벤트가 전파되는 것이다.
<div class="div-content">
<span class="span-content">
<button class="btn">버튼 텍스트</button>
</span>
</div>why?
내가 이해한바가 맞다면 이벤트 위임의 목적은 이벤트 리스너 등록을 줄이고 싶다라는 생각에서 나온 것 같다. 앞서 봤던 것처럼 이벤트 리스너를 많이 등록하게 되면 개발자가 의도하지 않은 결과를 발생시킬 수 있고 코드의 복잡도와 메모리면에서도 좋지 않다.
장점.
- 이벤트 리스너 수 감소.
- 메모리 성능 향상.
- 예기치 못한 결과를 줄여줌.
- 코드 간소화.
- 반복되는 이벤트 리스너 등록 대신 부모 요소에 하나의 리스너만 등록하면 된다.
- 동적 요소 추가시 이점.
- 동적으로 추가되는 요소에도 자동으로 이벤트 처리가 가능하다.
방법.
이벤트 위임을 위해서는 공통된 부모 요소에 이벤트 리스너를 하나만 추가하는 방식으로 구현한다.
그 후 closest 와 같은 함수를 이용해 정화한 타겟을 식별해 실행시키면 된다.
💡 반응형 웹 & 적응형 웹.
반응형 웹 디자인의 경우 화면 크기에 따라 자동으로 페이지의 배치가 바뀌게 만드는 것이고
적응형 웹 디자인의 경우 각각의 기기에 따라 기기에 알맞게 설계된 페이지를 따로따로 제작하는 것이다.
이렇게 말해도 썩 와닿지 않을 수 있다. 그렇다면 아래 두 사이트를 예시로 보면 이해가 더 빨리 될 것이다. 두 사이트의 넓이를 넓혔다가 줄였다가 해보면 그 차이를 분명하게 알 수 있을 것이다.
토요타 사이트 (반응형) - https://www.toyota.co.kr
애플 코리아 (적응형) - https://www.apple.com/kr/
토요타의 반응형 웹 디자인을 보면 넓이에 따라 모든 디자인이 유동적으로 알아서 크기가 맞춰지는 것을 볼 수 있다. 반면 애플의 사이트를 보면 특정 넓이 포인트에 오면 사이즈에 맞는 레이아웃을 불러오는 것을 볼 수 있다.
결론
반응형 웹의 경우 하나의 화면만 개발하면 되고 전체적인 컨텐츠가 일관되어 있다는 장점이 있다. 하지만 개발자가 모든 기기에 대해 최적화된 디자인을 만들기가 어렵다. 반면 적응형 웹의 경우 기기별로 최적화된 화면을 개발하기 때문에 각각의 기기별로 최적화된 화면을 보여줄 수 있다. 하지만 여러가지 버전의 화면을 따로따로 개발해야하고 새로운 기기가 나오거나 하면 새로운 버전을 출시해야하는 단점이 있다.
참고 자료
시맨틱 테그
- https://velog.io/@syoung125/시맨틱-태그-Semantic-Tag-잘-사용하기
- https://www.semrush.com/blog/semantic-html5-guide/
이벤트 위임
반응형 웹 & 적응형 웹
- https://jocoma.tistory.com/entry/반응형-웹-vs-적응형-웹?category=935771
- https://ko.wix.com/blog/post/responsive-vs-adaptive-design?utm_source=google&utm_medium=cpc&utm_campaign=14051298432^124501874839^search - dsa&experiment_id=^^535938152124^&gad_source=1&gbraid=0AAAAADwEfwUP_D9EiFRFs63cq0MPC8lER&gclid=CjwKCAjw8rW2BhAgEiwAoRO5rBXb_ztxDNIw6wVSHmrjZmfKBElbHQ6RGBX-hvPUlGaeCu5oX4ZDQxoCvBUQAvD_BwE
- https://velog.io/@dev_jihee/반응형-웹-vs-적응형-웹
em & rem
