=> 사이트 링크
: 안에는 h1, ul, ol, li, a태그 등 다양한 태그를 썼지만 일단 전체적인 프레임을 시맨틱으로 잡아본다는 측면에서 작성했고, 위와 같이 짜봤다. 먼저 이 페이지의 이름 혹은 로고와도 같은 부분인 '용기위키'를 header로 했고, 그 밑에 나에 대한 소개부분을 한 섹션으로 나눴다. 큰 틀에서 그 바로 밑에 전체 페이지의 내용이 나를 소개하는 내용이기에 사이드 프로젝트 바로가기도 나의 소개에 해당되지만 직접적으로 관련되지는 않으면서도 페이지의 내용과 관련되므로 aside에 배치했다. nav는 position:fixed를 걸어놓고 우측 하단에 놨고, footer에는 나의 깃헙 링크를 걸어뒀다. 그리고 마지막으로 section안에 article들은 각각을 따로 떼어놔도 고유의 영역으로 독자적인 의미를 갖는다고 판단하여(각각 나의 인적사항, 기술 스택, 개발 경험이다) article을 썼다.
=> 내가 만든 html 코드를 테스팅 해본 결과
: 꽤나 많은 오류가 있었다.
: 이처럼 특정 사이트를 이용하면 내 HTML 태그가 웹 표준을 잘 지켰는지 체크할 수 있다.
: 내가 최근에 toy project로 만드는 플젝의 코드 중 일부인데, 여기서 나름 main, section 등을 썼는데 이게 시맨틱한지는 사실 아직은 모르겠지만, 김버그님께서는 div 태그를 남발(?)[솔직히 과거의 나는 시맨틱 태그의 중요성과 필요성을 전...혀 느끼지 못했던 개발자였다.. 인정]해서는 안된다고 한다. div 태그를 남발하면 태그간의 위계 질서를 브라우저가 인식하지 못한다고 한다!.
** 예를 들어 내가 네비게이션을 고치고 싶은데 이 많은 부분에서 navigation이 어딘지 전부다 div로 해놨으면 모름.
=> 과거의 내가 저질러(?) 놓은 것들을 미래의 내가 후회하지 않으려면 반드시 시맨틱하게 코딩을 해야하고, 팀원들을 위해서도 그러하다. 협업시에도 굉장히 유용하고, 필수적임.
: 다시 내 용어로 정리해보면, 글을 쓸 때도(블로깅을 예로들면), 지금 내가 쓰는 방식처럼 나는 내가 생각했을 때 소주제라고 생각하는 부분에 velog에서 제공하는 '#####' html로 치면 h5정도 되는 bold체와 크기를 쓴다. 그것은 내가 이 소주제 밑으로 쓸 내용들이 이 소주제와 관련된 것임을 명시하기 위함이고, 좀더 눈에 띄게 하기 위해서이다(중요도에 구분선을 짓는 것!). 이처럼 HTML도 전부다 div태그로 같은 위계 혹은 그냥 A4용지를 같은 크기, 굵기의 글씨로 똑같은 패턴으로 쓰는 것처럼 작성하면 브라우저가 해당 HTML에서 뭐가 중요한지 전혀 파악할 수 없다. 그렇게 되면 실제로 검색 엔진이 HTML을 탐색할 때도 똑같은 글씨체 및 굵기로 된 긴~~~문장에서 뭐가 중요한지 탐색을 제대로 할 수 없게 된다(검색 엔진 최적화가 여기서 적용되는것).
: HTML을 의미있게 정보의 구조를 짜서 작성하는 연습을 하자
** 근데 항상 의문을 가졌던게 그게 시맨틱한 HTML인지 어떻게 알지??...
김버그님 왈 : "내가 그에 대해서 논리적인, 합리적인 근거를 댈 수 있으면 된다. 단지 페이지를 완성시키기 위해서 의식의 흐름으로 작성하지만 안으면 된다..?(근데 무슨 말인지 알 것 같다)"
깃헙 마크다운 작성 양식 관련 튜토리얼 사이트
vscode color theme 바꾸는 익스텐션 = framer
1) 시맨틱 태그는 보통 header, nav, main, footer, section, article, aside를 사용해서 만든다. 여기에 h1-h6, p태그, em 태그 등등이 추가되는 것이고!.
시맨틱 태그를 쓰는 이유는
2) 시맨틱 태그를 썼다 혹은 잘썼다의 기준? : 그 부분에 대한 의미론적 정의를 얼마나 고민했고, 그에 따라 '논리적인 근거'를 바탕으로 마크업을 했으면 시맨틱하다고 생각. 그러나 예를 들어,
section vs article
: 이렇게 섹션과 아티클을 구분해서 쓰는건 논리도 있지만 어느 정도 명확한 구분이 있다. section은 article처럼 독립된 구획을 표기 혹은 나눌 때 쓰지만 article은 그 자체로 따로 쓰일 수 있을 정도의 독립성을 갖고, section은 주변부와 관련이 있으나 따로 구획을 나눠놓은 것을 마크업할 때 쓴다. 이 때, 섹션 안에 아티클을 쓸 수 있고, 아티클 안에 섹션을 쓸 수 있다.
3) 오늘 배운 태그들 재정리
a(anchor) 태그 : 어딘가에 닻을 내리는 태그(?)로 href(hyper reference) 속성을 부여하여 특정 사이트(링크), 특정 html 파일, 특정 id를 가진 태그로 이동할 수 있게 하고, 전화번호, 이메일에 쓸 때는 바로 전화 연결 및 메일쓰기로 연결할 수 있다. 추가로, target 속성을 줘서 새창 열기 등을 할 수 있다.
em, strong : 뭔가를 강조하고 싶을 때 쓰는 같은 용도이므로(UI 상 기능은 다름) 선택에 따름. 디자인적 요소는 css로 컨트롤하므로 상관 없음.
br : break 태그로 줄넘김을 할 때 씀
p 태그의 lang 속성을 통해(html 태그에도 쓸 수 있음) 이 부분이 어느나라 언어로 된 것인지를 표기해줄 수 있음.
: HTML은 브라우저와 소통하기 위한 편지이다. 그렇기에 그 편지를 두서없이 쓰면 안되고 시맨틱(의미론적)한 부분을 신경써서 일목요연하게 작성하는 센스가 필요하다!! 나 자신도 앞으로 html을 짤 때 시맨틱 태그에 유의해서 논리적인 html 코드를 짜도록 노력하자. 명확한 정보를 전달하는 편지를 쓴다고 생각하자.