본문 바로가기
728x90
반응형

HTML5

open graph 사용하여 소셜 공유 미리보기 만들기(메타태그) 카카오톡, 페이스북 등등 sns에 링크를 공유하게 되면 미리보기가 가능하게 함 메타데이터 - 미리 배포해놓은 웹 사이트 주소를 활용함 ex) 나만의 블로그 하하하하하하하 소셜공유 미리보기 확인 사이트(페이스북 로그인해야함) 공유 디버거 페이스북 https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 페이스북 디버거 로그인 후 입력창에 배포한 주소 입력하고 디버그 클릭 짜잔~!!!! 카카오.. 2023. 9. 5.
Netlify 웹배포 웹배포를 도와주는 클라우드 서비스 간단한 프로젝트는 무료로 사용 가능 https://www.netlify.com/ Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com 먼저 작업한 파일을 폴더안에 넣어놓는다 1. 회원가입 및 로그인 2. 회원가입 후 Sites 클릭 작업한 파일을 밑에 이미지처럼 클릭후 폴더를 올려주고 기다려주면~!! 3. 아래 이.. 2023. 9. 5.
[html]시멘틱 태그 의미있는 요소 장점은 1. 검색 최적화 (seo) 사이트 최적화 (head 태그안에 meta태그 & 시멘틱태그 꼼꼼하게 작성) 네이버에 검색했을 때 상단에 사이트가 검색되게끔하는것 2 웹 접근성(A11y) 스크린리더를 사용하여 시각장애인이 사용할 수 있게 도와줌 장벽없는 인터넷을 만드는데 중요함 1. header html문서의 헤더를 정의하는 요소(로고, 네비게이션바 등등 포함) ex> ​ 2. section html 문서의 sction을 정의하는 요소 section이란 제목이 있으면 html문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합(li처럼 목록으로 묶여있는?) ex) ​ 3.footer html문서의 푸터부분을 정의하는 요소 ex) ​ 4.main html요소의 주요 컨텐츠 부분을 정의하는 요.. 2023. 5. 22.
[html]Html 기초 Visual Studio code 다운로드 방법은 구글이나 네이버에 Visual Studio code 후 윈도우용 설치 한글로 변경하는 방법 extensions선택 후 ko검색 맨첫번째꺼 install live sever 플러그인: 수정하거나 작성할시 실시간으로 브라우저에 바로 적용 해주는 가상 서버 ​ display: block p, div, h1~h6, ol, ul, li, dl, dt, dd *한 행을 다 차지함. *너비와 높이를 지정할 수 있음. ​ display: inline-block, inline img, span, input, select, mark, sup, sub, ins, del, a ​ inline: 컨텐츠 크기가 너비가 됨 너비와 높이를 지정할 수 없음 공간이 있으면 가로로 쌓임 .. 2023. 5. 21.
10/11 Html 기초 보호되어 있는 글 입니다. 2023. 5. 21.
728x90
반응형