코드공부방

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data) 카카오톡을 통해 지인들에게 특정 이벤트나 정보같은 것을 공유하기 위하여 URL링크를 공유한 경험이 한번쯤은 있을 것이다. (난 아주 적극적으로 공유기능을 사용하는 편이다.) 나는 URL만 전달 해줬는데 카카오톡 메세지에 자동으로 해당 페이지의 정보가 이어서 전달된다. 썸네일이미지, 제목, 내용 일부 미리보기가 지원된다. 이게 어떻게 가능한걸까? 이는 http://~ 형태의 URL 메세지가 전달된 경우 카카오톡에서 웹페이지 링크라는 것을 판단하고 미리 해당 웹페이지의 head 태그 내에서 og(Open Graph) meta 정보를 찾고 그 중 "og:title(제목), og:descripti..

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙 1. HTML 스타일 규칙 1.1 Document Type HTML5를 사용한다. XHTML이 아닌 HTML을 사용한다. 홀태그는 닫지 않는다. 1.2 HTML 유효성 W3C HTML Validator 같은 툴을 활용하여 유효성을 검증한다. 1.3 Semantics 목적(의미)에 맞는 HTML 요소를 사용한다. 생성된 용도에 대하여 태그가 아닌 요소를 사용한다. (예를 들어 표는 표 요소, 단락에는 P요소, 앵커 요소 등..) HTML을 목적에 따라 사용하는 것은 접근성과 재사용 및 코드 효율성에도 중요하다. All recommendations All recommendations 1.4 멀티미디어 대체 멀티미디어를 위한 대체 콘텐츠를 제공한다..

HTML 구글 스타일가이드 자세히보기 #intro HTML 마크업에도 스타일가이드가 있을까? 당연히 존재한다. HTML 마크업 작업도 여러 작업자가 협업하여 진행하는 경우가 발생하기 때문에 일관된 스타일로 코드를 유지하기 위해서는 CSS와 마찬가지로 작성 규칙이 필요하다. 사실 CSS와 비교하면 HTML마크업에는 많은 규칙이 필요하진 않는다. 지금 머릿속에 어떤 규칙들이 있을지 떠올려봐도 떠오르는 것이라고는 들여쓰기, 따옴표, 뭐 어떤 태그의 사용 정도? (애초에 HTML코드를 작성하는 방식(?)이 다양하지도 않다) 그래서 구글 HTML 스타일 가이드에는 어떤 내용들이 있는지 자세히 보았다. GOOGLE CSS 스타일 가이드와 마찬가지로 구글에서 제공하는 공식 스타일가이드 문서를 참고하였고, 최대한 해당..