HTMLCSS 4 OG 태그가 무엇이냐면 오픈 그래프입니다. 제목부터 답을 부르고 시작하는 싱거운 글입니다. 오픈 그래프, 들어보셨나요? 아니면 og:image 이런 태그는 보신 적 있으신가요? 일반적인 웹사이트를 카카오톡이나 페이스북/트위터 등에 공유하면 (티스토리도 마찬가지) 나는 URL만 그대로 갖다붙였을 뿐인데 저절로 페이지의 내용과 제목, 그리고 썸네일까지 불러올 때가 있습니다. 작성자는 따로 이 내용에 대해 설명할 필요가 없어지죠! 네 이것이 og 태그입니다. 평소에 접속하는 사이트에서 개발자도구 혹은 소스보기 탭에서 태그 속의 태그들을 살펴보세요. 메타태그는 HTML 문서의 태그 내에 입력하는 특수한 태그로, 사이트의 디자인이나 기능에는 거의 영향을 미치지 않고, 해당 문서가 어떤 내용을 담고 있고, 문서의 주요 키워드는 무엇이며, 누가 만들었는지 어.. 2021. 10. 6. 내가 만든 웹사이트, 잘 만든걸까? 객관적으로 어떨까? lighthouse + thinkwithgoogle Lighthouse는 웹 페이지의 품질을 개선하기 위한 자동화된 오픈 소스 도구입니다. 공개 또는 인증이 필요한 모든 웹 페이지에 대해 실행할 수 있습니다. 성능(보통 렌더링 속도), 접근성(장애인 접근성), 프로그레시브 웹앱(PWA), SEO(검색엔진최적화) 등에 대한 감사가 있습니다. Lighthouse는 Chrome DevTools, 명령줄 또는 노드 모듈로 실행할 수 있습니다. Lighthouse에 감사할 URL을 지정하면 Lighthouse에서 페이지에 대해 일련의 감사를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 거기에서 실패한 감사를 페이지 개선 방법에 대한 지표로 사용하십시오. 각 감사에는 감사가 중요한 이유와 수정 방법을 설명하는 참조 문서가 있습니다. 구글.. 2021. 10. 3. [CSS] 스크롤 따라다니는 사이드 바 만들기 (display: sticky) 요 사이트를 만들 때 사용한 CSS를 몇가지 정리해두는 글을 쓴다!! 적용하면서 블로그에도 메뉴바가 같이 따라내려오면 그럴싸할 것 같아서 똑같은 방법으로 적용했다!ㅎㅎ 공식 문서는 아래를 참조!! position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org CSS에서 블록요소에 포지션을 정하는 것은 너무도 간단한 일이다. 다만 여러가지 요소들이 겹쳐질때 한 자식요소가 다른 요소의 부모요소가 되는 부분이 많으면 많을 수록 각 .. 2021. 9. 25. [CSS+JS] 클릭하면 페이지 최상단으로 이동하는 버튼! 단, 부드~럽게! 이번에 프로젝트는 내용을 담은 카드가 한번에 50개 이하 정도가 나오기 때문에 스크롤을 아래로 내리면 좌우의 컨텐츠가 비고 다시 최상단으로 올라오기 힘들기 때문에, 첫번째로 position: sticky를 적용한 즐겨찾기 바가 함께 내려오고, 두번째로 스크롤을 최상단으로 올려버리는 버튼을 만들었다. 사실 이렇게 세로로 긴 형태의 페이지가 아니더라도 많은 블로그와 웹사이트가 이런 버튼을 사용한다. 다음 사진은 워드프레스에서 제공하는 최상단 이동 버튼인 듯 하다. 자바스크립트보다 파이썬을 먼저 배운 사람이지만, 셀레니움 웹스크래핑을 자주 해서 자바스크립트로 페이지를 조작하는 것은 꽤나 익숙하다. 간단하게 그 방법을 소개하고, 또 플러스로 이런 스크롤 이동이 애니메이션 효과로 부드럽게 오르내리게 하는 CSS를.. 2021. 9. 24. 이전 1 다음
