The Open Graph Protocol ❓ 오픈그래프는 무엇인가요? 우리는 이미 일상 생활에서 '공유' 버튼을 통해 오픈그래프를 자주 접하고 있습니다. 이런 공유 버튼들을 통해서 여러분들은 무엇을 전송하게 되나요? 보통 해당 경로로 접속할 수 있는 url, 링크를 전송하게 됩니다. 공유를 하게 될 서비스들 sns, 카카오톡 등에 링크를 전송하게 되면 해당 링크에 대한 부가적인 정보가 동봉되어 추가가 되는데요, 그것이 바로 오픈그래프의 특징입니다. https://www.inflearn.com/ 인프런 - 미래의 동료들과 함께 성장하는 곳 | IT 정보 플랫폼 프로그래밍, 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전까지 업계 최고 선배들에게 배울 수 있는 곳. 우리는 성장 기회의 평..
Favicon의 특성을 알아보기 ✔️ Favicon은 무엇인가요? Favicon은 웹 페이지 상단의 탭에 보여지는 조그마한 아이콘입니다. 저의 구글 북마크 지정한 사이트들인데요 흔히 북마크를 지정하거나 즐겨찾기를 활용하면 같이 표시되는 작은 아이콘인데, 특정 웹 사이트를 방문할 때 브라우저가 웹 사이트의 루트 디렉토리에서 favicon.ico 파일을 찾아서 이 아이콘을 표시합니다. ✔️ Favicon을 HTML에서 사용하는 법 브라우저가 이것을 자동으로 찾기 때문에 우리는 루트 디렉토리에서 찾을 수 있도록 favicon.ico 파일만 잘 등록해주고, 따로 html에서 등록할 필요가 없습니다. html에서 따로 등록할 필요는 없지만, 자신이 원하는 이미지 파일로 대체해서 올릴 수 있는 방식이 있습니다. l..
서론 html을 상당히 클래식한 방식으로 나누면 이런식의 부류로 나눌 수 있다. header, main, nav, aside, footer, section, article, ... 와 같이 웹 페이지를 의미 단위로 나누기 위한 태그, 의미를 가진 이 태그들을 시멘틱 태그 (Sementic) 이라고 부른다. 시멘틱 태그를 사용하면 개좋은점을 설명해보자면 1. 시맨틱 태그를 안쓸때 흔히 말하는 divdivdiv... div지옥이 펼쳐진다. 2. 시맨틱 태그를 쓸때 코드를 접었다가 다시 펼 때 어디로 바로 찾아들어가면 되는지 알수 있기 때문에 개발자도구 들어갈때 개 편함. (유지보수 용이) ✔ header 영역 흔히 사이트의 로고, 메뉴, 검색창, 로그인/로그아웃, 회원가입 버튼으로 구성되어 있는 영역을 he..
