meta3 [HTML] Meta 태그, OG(오픈그래프) 사용 방법 HTML 에서 Head 부분에 해당하는 meta og(오픈그래프)에 대해 알아보도록 하겠습니다. 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다. OG (Open Graph) 사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다. 대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다. OG Type 사용 방법 meta og 태그를 사용하기 위해서는 HTML의 .. FRONT-END/HTML 2022. 10. 5. [HTML] Meta 태그 HTML에서 meta 태그에 대해 알아보도록 하겠습니다. Meta meta 태그는 보이지 않는 태그라고 볼 수 있습니다. 즉 meta는 부가적인 정보를 보여주는 것이죠. 예를 들어 구글에 넷플릭스를 검색하고 아내와 같은 로그인 링크를 볼 수 있는데, 그 아래 세부 정보중 '스마트 TV, 태블릿...'과 같은 텍스트를 확인할 수 있습니다. 이것을 넷플릭스 홈페이지의 개발자 도구를 통해 확인해보면 meta의 content 안에 그대로 들어가 있는 것을 확인할 수 있습니다. 그리고 meta 태그는 닫는 태그가 없이 사용됩니다. 위에서 봤던 것처럼 meta 태그는 두 개의 속성을 가지고 있습니다. 바로 name =""과 content =""입니다. Meta 태그 활용 meta 태그는 위와 같이 문서의 정보를 담.. FRONT-END/HTML 2022. 10. 4. [HTML #4] 기본구조 head, body 및 폰트 깨짐방지 HTML에서 가장 기본이 되는 구조와 폰트가 웹사이트에서 깨졌을때 해결하는 방법에 대해 알아보도록 하겠습니다. HTML 구조 HTML에는 기본적으로 가장 핵심이 되는 태그가 존재합니다. 위처럼 은 최상단에서 웹사이트를 만드는 기준이 되고, 태그는 본문이라고 생각하면 됩니다. 그렇다면 태그는 무엇일까요? 기본적으로 HTML에서는 몇 가지 정해놓은 약속 같은 것이 존재하는데, 에 만 들어가야 하는 태그들과 그 외적인 태그들을 특정 태그 안에만 넣도록 정해놓았습니다. 본문이 아닌 태그들은 태그 안에 넣어주면 되는데, 대표적으로 , 태그 등이 있습니다. 태그는 태그 위에 위치시켜주면 됩니다. 태그는 위에서 언급했듯이 본문이라고 생각하면 됩니다. 위키백과에서 개발자 도구를 열어 구조를 살펴보면 다음과 같습니다. .. FRONT-END/HTML 2022. 7. 24. 이전 1 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기