오열매의 코딩 공간

카카오톡에 링크를 공유했을 때 나오는 미리보기를 Meta Tag 의 og 를 이용하여 설정할 수 있다. # 양식 https://example.com/page.html"> https://example.com/image.jpg"> * index.html 의 head 태그 안에 정의한다. 만약 설정했는데 카카오톡에서 미리보기가 제대로 나오지 않는 경우, https://developers.kakao.com/tool/debugger/sharing 위의 kakao developers의 공유 디버거에서 캐시 초기화를 하면 된다. 참고) - https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A..

태그들 중에는 input, a, img 태그 등과 같이 태그 자체에 기능이 있는 경우도 있지만, 기능은 딱히 없지만 이름으로 내용을 구분하기에 용이하게 해주는 태그들이 있다. 이를 Semantic(의미의, 의미론적인) Tag라고 한다. 기능은 div 태그와 동일하다. div는 단순 block element에 불과하다. 박스라고 보면 된다. 원래는 이러한 박스에 모든 내용들을 넣었었다. 하지만 웹사이트의 규모가 커지면서, 그 내용물을 구분하기가 힘들어졌다. 이 부근엔 어떤 내용이 있는지 짐작해야만 했다. Semantic Tag를 이용하면, 이 태그 안에는 어떠한 내용들이 있겠구나 하는 것을 유추할 수 있다. 또한, 검색엔진 최적화와 웹 접근성 등에도 유리하다. 주요 Semantic Tag 종류) 1. : ..

태그의 종류는 매우 많다. 모두 외우는 것이 아닌, 어떻게 사용하는지만 알면 된다. 위 사진은 Advanced Web Ranking 이라는 사이트에서 통계낸 '사이트에서 가장 많이 사용하는 html 태그 순위' 이다. 일단 분류를 하자면, html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br, h2, input, h1, form, h3, nav, footer, header, iframe, button, strong, i 등이 있다. 재분류를 하기에 앞서, 가장 많이 사용하는 html 태그는 사용률 100% 인 것으로 봐도 알 수 있듯이 웹 사이트를 만드는 데 필수적이다. 사이트를 구성한느 필수 태그라고 보면..