1. HTML
HTML의 구조는 head, body로 이루어져있다.
쉽게 말하면
head : 메타 데이터, 즉 웹사이트에 대한 정보
body : UI같은 디자인적 측면
✨ 웹페이지 만들 때 body는 웹페이지의 구조를 어떻게 구성할건지 짜봐야겠다.
나는 디자인 툴로 Adobe XD로 디자인하고 아이패드로 시맨틱 태그를 달아서 쓰고 있는데 가장 편한건 그냥 종이에다가 손으로 그리는 것이긴 하다.
만약 손으로 그리는걸 TIL에 깔끔하게 남길 수 있으면 계속 그렇게 할듯 ㅋㅋ
2.시맨틱 태그
시맨틱 태그를 쓰는 이유 🧐
시맨틱 태그는 의미가 있는 태그다. 협업할 때 내 문서를 타인이 읽었을 때 가독성을 위해서, div 떡칠 안하려고 그런 이유와 관련 있지만 무엇보다 가장 중요한 이유는 스크린 리더 (screen reader)가 인식하기 좋게 하기 위해서다.
시맨틱 태그 종류 ✨
(간략히 정리)
header : 상단과 중요한 내용을 담당하는 부분
nav : 링크를 연결해 다른 페이지로 연결하는 부분
footer : 맨 아래 하단에 있고 웹사이트의 부차적인 내용이 담긴 부분
main : 주 내용이 있는 부분. section이나 article 태그가 들어가도 됨
aside : main에서 부가적인 내용이 담긴 부분
article : 하나의 주제에 대해서 나열된 정보를 담고 있는 부분
div는 디자인적으로 쓰는 것 같다. container로 묶을 때 처럼. 아무래도 의미있는 요소가 아니니까..?
✨✨
mdn문서를 참고하는 것 만큼 정확하고 좋은 공부는 없는 것 같다.
시맨틱 태그 구조를 공부하고싶거나
웹사이트 구조를 짤 때
진짜 유용한 사이트 발견했다!!!
(이 MDN 페이지 링크는 아래에 첨부하겠슴다~)
오늘 여기 페이지를 정독했다. 시맨틱 태그 종류랑 설명이 있고 예제도 있다.
항상 mdn 읽는게 어려웠고 커다란 장벽처럼 느껴졌는데, 학습 수준에 맞는 내용을 천천히 읽으니까 재미있었다.
이게 훈련되면 공식문서 참조해서 공부하는거에 속도 붙겠지. 지금은 한글을 읽지만 앞으론 영어 한국어 다 읽어봐야겠다.
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
