HTML 2

[HTML] [스파르타코딩클럽 웹] og 태그로 sns 미리보기를 지정해보자

개요 카카오톡, 페이스북 등 sns에 링크를 공유했을 때, 위 그림과 같은 미리보기가 나올려면 HTML 파일에 따로 작업이 필요하다. HTML에 og태그를 추가해 미리보기에 사용되는 사진, 제목, 설명을 지정한다. og(open graph) 태그 위 태그를 HTML의 사이에 위 태그를 추가한다. 주의점 og태그를 수정해도 미리보기가 수정되지 않고, 이전에 작성한 og태그가 적용되는 경우가 발생한다. 이는 sns에서 이미 공유된 링크들의 og태그들을 저장해 놓고, 저장해 놓은 정보들을 보여주기 때문에 업데이트가 되지 않은 것이다. 따라서 og태그를 업데이트하기 위해서는 우리가 따로 아래 sns사이트에서 og태그를 초기화 해줘야한다. 페이스북: https://developers.facebook.com/too..

Language/HTML & CSS 2022.07.21

[HTML & CSS] [스파르타코딩클럽 웹] HTML & CSS 기초

🔥 HTML , CSS 기본 내용 HTML 구역과 텍스트를 나타내는 코드 head 와 body로 구성됨 head 안에는 페이지의 속성정보 (meta, script, link, title) 를 담음 body 안에는 페이지의 내용을 담는다. 구역을 만들려면 div태그를 이용한다. div로 묶여져 있는 것은 내용물이 변경되면 같이 변경된다. (block element) 문자 일부만 선택해서 지정할려면 span태그를 이용한다. (inline element) 특정 부분을 지정하기 위해서 class와 id를 사용한다. 지정 범위는 class > id 이다. class 는 무언가를 그룹핑한다는 말. 그룹핑하고 싶은 것들을 같은 class로 지정. ex> 반 id는 무언가를 식별한다는 말. 하나만 존재할 수 있음. 정..

Language/HTML & CSS 2022.07.01