# metatag
크로스 브라우징 적용과 모바일 호환성
🔎 크로스 브라우징이란 >적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제 작하는 기법 , 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미 참고 : 한국소프트웨어진흥원 현재 많은 웹 브라우저 (크롬, 사파리, 파이어폭스 등등...)가 존재하며 각 웹 브라우저마다 렌더링 방식이 다르기 때문에 내가 작성한 코드가 각 웹 브라우저마다 동작이 안 될 경우가 생긴다 이러한 크로스브라우징 이슈를 해결하기 위해 HTML,CSS,JS 코드들을 모든 브라우저에 잘 렌더링 될 수 있도록 설정을 해줘야한다
ngrok 으로 오픈그래프(메타태그) 테스트하기
안녕하세요, QA 엔지니어 Hardin 입니다. 오픈 그래프(Open Graph)란? 인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 것이었고, 이후 트위터와 링크드인에서 이를 차용하여 더 나은 UX를 제공하는 데에 활용하고 있다. (출처 : https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0) 오픈그래프 동작 원리 먼저 오픈그래프(Open Graph) 동작 원리는 다음과 같습니다. 
33일차)[React/JS] Optimistic UI
✍Optimistic UI > 속이기 즉, 거의 성공 확률이 99%인 Query, Mutation와 같은 요청에 마치 완료된 것 처럼 미리 보여줌 > 성공확률이 높거나, 큰 영향이 없는 요청에 적용 ex) 좋아요 코드 예시(좋아요) ✍메타태그, OpenGraph(OG) > 오픈그래프는 어떤 HTML 문서를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 타입, URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜 예시코드
웹개발 종합반_homework_5주차
🛠 웹사이트 배포 (ver. playlist) > 'Our Playlist' 사이트 바로가기 👉 output 원래 숙제는 4주차 숙제로 한 팬명록 : 웹개발 종합반homework4주차를 웹배포하는 거 였지만, 팬명록을 응용해서 만든 playlist 사이트로 대체함 1) 리스트 저장하기 (1) API 만들고 사용하기 - 닉네임, 아티스트명, 타이틀명 (Create → POST) 요청 정보 : URL= /playlist, 요청 방
웹개발 종합반_개발일지_Day 8 [完]
Ⅰ. 📚 오늘 배운 내용 > 1. [prac] 버킷 리스트 페이지 만들기 1) 리스트 작성하기 2) 리스트 보여주기 3) 리스트 완료하기(done : 0->1) 웹 배포 1) 기본 셋팅 2) AWS 서버 구매하기 3) 서버 세팅하기 4) 도메인 연결 5) meta 태그 생성 (사이트 배포용) 🔥 [prac] 버킷 리스트 페이지 만들기 1) 리스트 작성하기 (1) API 만들고 사용하기 - 포스팅API (Create → POST) 요청 정보 : URL= /bucket, 요청 방식 = POST 클라(ajax) → 서버(flask) : bucket 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!) + 리스트당 넘버링 해주기, 진행 중/완료 표시하기 > ❗️ 작업 순서 ① 클라이언트와 서버 연결 확인하기 ② 서버부터 만들기 ③ 클라이언트 만들기 ④ 확인하기 ① 클라이언트와 서버 연결 확인하기 `app.py
meta tag
meta data 데이터를 설명하는 데이터 meta tag 글의 본문에 표현되진 않지만 웹페이지 설명하는 상당히 중요한 정보 인코딩과 디코딩을 할 때에 중요하게 사용되는 정보 ~ name 속성 값 application-name, author, description, generator, keywords http-equiv 속성값 content-type, default-style, refresh og 속성값 og:type 용도 og:title 제목 og:description 설명 og:image 이미지 og:url 주소 > meta 태그 웹페이지의 내용은 아니지만 그 웹페이지를 설명하는 태그 HTML문서에 대한 색인정보 하이퍼텍스트 생성 언어(HTML) 문서의 맨 위쪽에 위치 HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치