개발자 블로그

https://seosh817.tistory.com/56

우리가 자주쓰는 기본 태그들의 의미:

opengraph의 기본 태그

1. og:title - 사이트의 제목 태그

2. og:type - 사이트의 종류 스타일 예) video.movie

3. og:image - 사이트를 나타낼 대표 이미지

4. og:url - 사이트의 대표 url

Copy!

 [소스 보기] 

	<meta property="og:title" content="명월일지" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://nowonbun.tistory.com" />
	<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/1935C94C505D9F8B13" />

opengraph의 옵션 태그

1. og:audio - 사이트에 포함되는 오디오 파일 url

2. og:description - 사이트의 설명

3. og:determiner - 문장 시작에 나타나는 단어 선택(?)이라는 것 같은데, 한글과는 관계가 없을 듯 싶네요. 그냥 공란입니다.

4. og:locale - 사이트의 언어 선택입니다. 기본값은 en_US입니다만, 한글의 경우는 ko_KR입니다.

5. og:locale:alternate - 사이트의 다른 언어 종류라는데, 다국적 사이트일 때 적용하는 태그일 듯 싶습니다.

6. og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

7. og:video - 사이트에 포함되는 비디오 파일 url

Copy!

 [소스 보기] 

	<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
	<meta property="og:description" content="개발 즐겁게 합시다." />
	<meta property="og:determiner" content="the" />
	<meta property="og:locale" content="en_GB" />
	<meta property="og:locale:alternate" content="fr_FR" />
	<meta property="og:locale:alternate" content="es_ES" />
	<meta property="og:site_name" content="Open graph 태그" />
	<meta property="og:video" content="http://example.com/bond/trailer.swf" />

opengraph의 구조 프로퍼티

og:오브젝트:url - 이미지 혹은 비디오, 오디오 오브젝트의 경로

og:오브젝트:secure_url - SSL(HTTPS)의 경로

og:오브젝트:type - 오브젝트 타입의 종류

og:오브젝트:width - 오브젝트 너비

og:오브젝트:height - 오브젝트 높이

og:오브젝트:alt - 오브젝트 설명

Copy!

 [소스 보기] 

	<meta property="og:image" content="http://example.com/ogp.jpg" />
	<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
	<meta property="og:image:type" content="image/jpeg" />
	<meta property="og:image:width" content="400" />
	<meta property="og:image:height" content="300" />
	<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
	<meta property="og:video" content="http://example.com/movie.swf" />
	<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
	<meta property="og:video:type" content="application/x-shockwave-flash" />
	<meta property="og:video:width" content="400" />
	<meta property="og:video:height" content="300" />
	<meta property="og:audio" content="http://example.com/sound.mp3" />
	<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
	<meta property="og:audio:type" content="audio/mpeg" />

저 위 링크를 통해 조사한 것인데 Arrays(배열) 과 Object Types의 경우는 필요가 없을 것 같네요.

예를 들면 music:duration는 음악 파일인 경우 음악 파일의 길이를 표시하는 것같은데, 이게 SNS상에서 표시가 되나? 제가 facebook이랑 twitter에서 시험해 봤는데 이 정보는 공유가 안되네요.

검색 엔진에서 좋은 건가? 개인적으로 좀 이해가 안되서 생략했습니다.

여기까지 opengraph에 대해서 조사했는데 많은 분들이 opengraph를 사용하면 검색 최적화가 된다라고 쓰여 있기는 하는데 제가 조사한 google 메뉴얼에는 어디에도 opengraph가 검색 순위에 영향을 준다라고 설명한 글은 없네요.

링크 - https://support.google.com/webmasters/answer/7451184?hl=ko

그러나 확실히 google 검색 랭크에는 다른 평판이 높은 사이트에 얼마나 링크가 되어있는지에 따라 블로그의 순위가 결정된다고 되어있습니다. 즉, opengraph 자체로는 구글 검색 엔진에 미치는 영향은 없지만 여러 SNS에 등록이 되어서 많은 사람들이 그 링크를 타고 오게 되면 2차적으로 구글 검색 순위에 도움이 된다고 할 수 있습니다.

출처: https://nowonbun.tistory.com/517 [명월 일지]

example:

기본적으로 웹에 설정해줘야하는 og 메타태그

Naver 블로그, 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목" />

<meta property="og:url" content="웹페이지 URL" />

<meta property="og:type" content="웹페이지 타입(blog, website 등)" />

<meta property="og:image" content="표시되는 이미지" />

<meta property="og:title" content="웹사이트 이름" />

<meta property="og:description" content="웹페이지 설명" />

트위터 미리보기 설정

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />

<meta name="twitter:title" content="콘텐츠 제목" />

<meta name="twitter:description" content="웹페이지 설명" />

<meta name="twitter:image" content="표시되는 이미지 " />

모바일 앱 미리보기 설정

모바일 앱이 존재하는 경우 앱으로 연결 시 노출

<--iOS-->

<meta property="al:ios:url" content=" ios 앱 URL" />

<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />

<meta property="al:ios:app_name" content="ios 앱 이름" />

<--Android-->

<meta property="al:android:url" content="안드로이드 앱 URL" />

<meta property="al:android:app_name" content="안드로이드 앱 이름" />

<meta property="al:android:package" content="안드로이드 패키지 이름" />

<meta property="al:web:url" content="안드로이드 앱 URL" />

https://velog.io/@micael17/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%A7%8E%EC%9D%B4-%EC%93%B0%EC%9D%B4%EB%8A%94-es6-%EC%99%80-es11%EC%9D%98-%EB%AC%B8%EB%B2%95

참고 블로그:https://chocoball3.tistory.com/202

예를 들면 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

에서 클라이언트 검색창에 붙여넣고 검색하면

https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css

그런데 주소링크에서 min을 지워버리면 아래와 같이 정렬된다.

그리고 꼬리부분을 잘라버리고 검색창에서 붙여넣고 검색하면

https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/ 

좌측 메뉴판에서 필요한 각종 소스들을 찾아볼수가 있다.

...을 클릭하면 메인으로 돌아갈수있다.

Hero

An imposing hero banner to showcase something

리스트

패키지들의 의미:

1.flask: 플라스크(Flask)는 파이썬으로 웹 어플리케이션을 만드는 마이크로 웹 프레임워크입니다.

대표적으로 웹 프레임워크에는 Flask, Django, Tornado 등이 있습니다.

그럼 마이크로 프레임워크는 무엇일까요?

마이크로 프레임워크란 핵심 기능만 간결하게 유지하지만, 확장 가능한 것을 목적으로 하는 프레임워크라고 합니다.

즉, 특별한 도구나 라이브러리가 필요 없기 때문에 마이크로 프레임워크라고 부른다고 합니다. 

출처: https://forensickelly.tistory.com/entry/Python-Windows에서-Flask-설치하기 [forensic's kelly]

2.requests: python에서 요청을 모아놓는 기능.

3.pymongo:

파이썬에서는 DBMS(DataBase Management System)을 간단한 명령어로 운용할수있다.

파이썬의 Pymongo 패키지로 NoSQL 데이터베이스인 Mongo DB에 접근한다.

Mongo DB는 JSON형태로 데이터를 저장하므로 DB를 유연하게 확장 가능

파이썬 PIP를 사용하여 pymongo를 설치한다.

#Reference:

1)https://www.w3schools.com/python/python_mongodb_getstarted.asp

2)https://www.mongodb.com/

3)https://www.youtube.com/watch?v=P1Qbf3A_E6U

4.bs4:

파이썬 크롤링 크롤러 설치 python BeautifulSoup bs4

크롤링이란?

웹페이지에서 필요한 데이터를 추출하는 작업을 의미한다.

웹 크롤링을 하기 위해서는

1) pip 명령어로 BeautifulSoup 모듈을 설치하고

2) Html에 대한 기본적인 이해가 필요하며

3) CSS의 선택자에 대한 이해가 필요하다.

BeautifulSoup란?

파이썬에 추가할 수 있는 크롤링을 위한 라이브러리이다. 결국, 웹에 있는 데이터를 가져와서 추출할 경우에 사용하는 외부 라이브러리로 추가 설치가 필요하다.

파이썬 개발환경에 새로운 모듈을 설치하려면 PIP(Python Install Package)를 이용하여 쉽게 설치가 가능하다. pip3 list는 설치된 목록을 볼 수 있다. pip3 install BeautifulSoup4는 새로운 패키지를 설치하는 명령어이다. pip3 uninstall BeautifulSoup4는 설치된 패키지를 제거하는 명령어이다.

웹크롤링에 필요한 라이브러리 설치

어떠한 웹페이지에 나와 있는 목차들을 한 번에 리스트로 가져오기 위해서는 Html이나 CSS의 기술을 약간이라도 이해하고 있어야 한다. 그리고 BeautifulSoup 라이브러리 및 request 라이브러리의 도움이 필요하다.

pip install BeautifulSoup4
pip install requests

예제 코드와 같이 pip 명령어를 사용해서 필요한 모듈 및 라이브러리를 설치할 수 있다. 그리고 Anaconda python을 설치하면 이미 설치되어 있기 때문에 따로 설치할 필요가 없다.

5.Selenium: 자동화 브라우저 프로젝트

Selenium은 웹 브라우저의 자동화를 허용하고 지원하는 다양한 도구와 라이브러리를 포함하는 프로젝트입니다.

Selenium을 이용해 브라우저를 제어하고 웹스크래핑을 할 수 있습니다.

https://www.selenium.dev/ko/documentation/

파이참에서 패키지 설치하기

https://jmoon.co.kr/241

Pyjwt:

https://speakerdeck.com/junojunho/jwtwa-flask-pyjwtro-injeung-api-seobeo-mandeulgi

https://blog.kakaocdn.net/dna/xEb3L/btq0Xp52DBu/AAAAAAAAAAAAAAAAAAAAAEGJqhX-AVSwj715YuC0dBaALRakcMOry60Fx0s1uJhX/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=GmgnTGMYci8HArocZ%2FKHq%2F%2BFAaU%3D

<!DOCTYPE html>

<html lang="kr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

*{

list-style: none;

text-decoration: none;

font-family: sans-serif;

font-weight: bold;

font-size: 0.9rem;

}

#index_wrap ul {

display: block;

margin-bottom: 50px;}

#index_wrap ul li {

position: relative;

display: inline-block;

margin: 0 20px;

height: 40px;

text-align: center;

line-height: 30px;

cursor: pointer;}

#index_wrap ul p {

font-size: 1.1rem;

font-weight:800;

}

#index_wrap ul li a {

color: #000;

}

#leftToRight li::after {

position: absolute; content:"";

display: block;

border-bottom: 3px solid #000;

transition: width 250ms ease-out;

left: auto;

right: 0;

width: 0;}

#leftToRight li:hover::after {

width: 100%;

left: 0;

right: auto;

}

#fromInsideOut li::after {

position: absolute; content:"";

display: block;

border-bottom: 3px solid #000;

transition: all 250ms

ease-out;

left: 50%;

width: 0;

}

#fromInsideOut li:hover::after {

transition: all 250ms ease-out;

left: 0%;

width: 100%;

}

#stretch li::after {

position: absolute;

content:"";

display: block;

border-bottom: 3px solid #000;

transition: width 250ms ease-in-out;

left: auto;

width: 0;

}

#stretch li:hover::after {

width: 100%;

}

</style>

</head>

<body>

<div id="index_wrap">

<ul id ="leftToRight">

<p>왼쪽에서 오른쪽으로</p>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">DESIGN CASE</a></li>

<li><a href="#">STORY</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

<ul id ="fromInsideOut">

<p>가운데서 바깥쪽으로</p>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">DESIGN CASE</a></li>

<li><a href="#">STORY</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

<ul id ="stretch">

<p>늘어났다 줄어들었다</p>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">DESIGN CASE</a></li>

<li><a href="#">STORY</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

</body>

</html>

출처: https://sudal89.tistory.com/56 [가을밤에 내리는 비]

추가설명:

http://triki.net/prgm/2061

또다른 설명:

https://stackoverflow.com/questions/13233991/combine-after-with-hover

CSS3 Hover Effect using:after Psuedo Element

https://codepen.io/larrygeams/pen/pdchG

기본코드

https://www.w3schools.com/csSref/sel_hover.asp

LOGO 제작 사이트

https://www.bizhows.com/?utm_source=google&utm_medium=cpc&utm_campaign=se_go_p22_%ED%99%95%EC%9E%A5%EA%B7%B8%EB%A3%B9C&gclid=CjwKCAjw64eJBhAGEiwABr9o2AVKr3wWSOIYi-MKLfOFW-GkJEBjL3aI2dKVIl7nXMSdnLmuqBtanhoC4BsQAvD_BwE 

https://post.naver.com/viewer/postView.nhn?volumeNo=25252144&memberNo=42458017 

https://www.ihee.com/517

내가만든 로고

https://en.logodownload.org/o2-logo/

MDN Web Docs:

https://developer.mozilla.org/ko/

https://developer.mozilla.org/ko/docs/Web/HTML

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

동영상 video 기본 코드:

<!-- Using multiple sources as fallbacks for a video tag -->

<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->

<!-- Poster hosted by Wikimedia -->

<video width="620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >

<source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"

type="video/mp4">

<source src="https://archive.org/download/ElephantsDream/ed_hd.ogv"

type="video/ogg">

<source src="https://archive.org/download/ElephantsDream/ed_hd.avi"

type="video/avi">

Your browser doesn't support HTML5 video tag.

</video>

w3schools:

https://www.w3schools.com/

stackoverflow:

https://stackoverflow.com/

wiki html:

https://en.wikipedia.org/wiki/HTML

https://fontawesome.com/

bulma:

https://bulma.io/

https://www.jsdelivr.com/

https://cssminifier.com/

https://beautifier.io/

http://javascriptcompressor.com/

제이쿼리 사이트 주소:

https://jquery.com/download/

https://api.jquery.com/css/

https://www.globalhost.co.kr/main/main.php

http://tcpschool.com/

https://www.pinterest.co.kr/

https://dribbble.com/