IT/인터넷 마케팅2022. 4. 1. 16:57

안심 골꼴파일 서비스

반응형

 

국민 누구나 저작권 걱정없이 자유롭게 이용할 수 있는 '안심 글꼴파일 서비스'

<안심 글꼴파일 서비스 안내>

1.이 글꼴로 무엇을 할 수 있나요?온라인으로 문서나 PPT 작성 등도 가능하고 인쇄도 가능하고, 다른 사람에게 보내줄수 있어요.2. 더 많은 글꼴을 보고 싶다면 어떻게 하나요?공유마당과 공공누리로 들어오세요. 다만, 공유마당과 공공누리에 있는 글꼴은 이용조건이 다르니 주의해주세요.

 링크 :https://www.korea.kr/news/policyNewsView.do?newsId=148899052&pWise=mostViewNewsSub&pWis

반응형

'IT > 인터넷 마케팅' 카테고리의 다른 글

스마트 스토어 원가 계산 엑셀 쉬트  (294) 2022.03.31
샤오미 홍미노트 10 출시 특가 배송비&관부가세 포함 $147  (193) 2021.03.24
다용도실에 세탁기와 같이 사용하면 편리한 유가  (82) 2021.03.19
GTX3060 쿠팡 최저가   (9) 2021.03.11
애플 초특가 세일 합니다.  (10) 2021.03.10
Posted by Dream Come True
IT2022. 4. 1. 03:40

HTML5 각종 태그 사용법

반응형

[티스토리] HTML5 각종 태그 사용법 (메타, 문단, 문자, 이미지, 하이퍼링크, divide 태그)

안녕하세요. 설쥐아빠예요. 저번 포스팅에서는 HTML5의 개념, 역사, 특징, 기본구조에 대해서 설명드렸었는데요. 혹시 못 보신 분들은 아래 포스팅 참고하시면 됩니다.

2021.04.14 - [IT & 코딩] - [티스토리] HTML5가 뭐야? (HTML5 개념, 역사, 특징, 기본 구조)

 

[티스토리] HTML5가 뭐야? (HTML5 개념, 역사, 특징, 기본 구조)

[티스토리] HTML5가 뭐야? (HTML5 개념, 역사, 특징, 기본 구조) 안녕하세요. 설쥐아빠예요. 제가 티스토리를 운영하면서 힘들었던 것 중에 하나가 스킨을 편집하거나 구글 애드센스 광고를 편집하는

schrysalis.tistory.com

이번 포스팅에서는 티스토리에서 HTML을 이용하여 글을 작성하거나 스킨을 편집할 때, 주로 사용하는 태그들인 메타태그, 문단태그, 문자 태그, 이미지 태그, 하이퍼링크 태그, divide 태그에 대해서 설명해드리려 해요. 그럼 태그 하나하나 순서대로 설명하도록 할게요. 보시죠~!



메타(meta)태그

메타태그는 <head> 태그 안에 사용하는 태그로 키워드, 사용언어와 같은 웬 문서의 정보를 제공해주는 태그예요.
아래 테이블을 보시면 메타태그의 속성, 값, 기능에 대해 알 수 있답니다.

속성 값 기능
name application-name 웹 사이트의 이름
author 문서의 저작자
description 문서에 대한 설명
keywords 문서의 키워드
http-equiv content-type 문서의 인코딩
default-style 대체 스타일시트 선언
refresh 문서의 새로고침 추가
content 텍스트 http-equiv의 속성
name의 속성
charset 문자셋 문서의 표현 언어

이제 이것을 활용하여 티스토리에 있는 스킨 편집의 HTML을 보도록 해볼까요?

티스토리 스킨편집 HTML

<meta charset="utf-8"/>는 표의 속성에서 charset을 사용했으므로 이 문서가 "utf-8" 문자셋인 한글을 표현할 수 있는 문서라는 것을 알 수 있어요. 문서에서 한글을 사용한다면 반드시 이 메타태그를 넣어줘야 한답니다.

<meta name="naver-site-verification" content="exxx9"/>는 표의 속성에서 name에 application-name을 사용했으므로 웹사이트 이름이 "naver-site-verification"라는 것을 알 수 있고 문서의 내용이 "exxx9"로 정의되어 있다는 것도 같이 알 수 있답니다.

만약 <meta name="author" content="설쥐아빠"/>이렇게 작성된 메타태그가 있다면 속성 name에 값이 author이기 때문에 이 문서의 작성자가 설쥐아빠라는 것을 알 수 있겠죠?

문단 태그

문단 태그는 웹문서의 문단을 구분해주는 태그예요. 보통 많이 쓰는 태그로는 <br>과 <p>가 있답니다.

<br>, </br>은 줄 바꿈 기능으로써 티스토리 상에서 shift키와 enter키를 동시에 누를 때 사용되는 태그이고 <p>, </p>는 문단을 나누어주는 기능을 하는 태그로써 티스토리 상에서 enter키만 누를 때 사용되는 태그예요.

<br>과 <p>가 정확히 어떤 차이인지 구분이 잘 안 가실 수도 있는데요. <p>는 새로운 문단의 시작을 알리는 태그로써 <br>을 2개 한 것과 동일한 역할을 수행한답니다. 실제로 티스토리에서 엔터를 눌러보시면 한 줄 사이즈의 빈 공간이 생기는 것을 보실 수 있어요.

문자 태그

문자 태그는 문자의 모양과 관련된 태그예요. 문자 태그의 종류를 한번 살펴볼까요?

◆ <i>, </i> : 흘림체, italic.
◆ <b>, </b> : 강조체, bold.
◆ <code>, </code> : 프로그램 코드체.
◆ <strong>, </strong> : 강조체, strong.
◆ <em>, </em> : 강조체, emphsized.
◆ <sup>, </sup> : 윗 첨자, superscript.
◆ <sub>, </sub> : 아래 첨자 subscript.
◆ <h1~h6>, </h1~h6> : 문서의 제목을 표시.

종류가 많죠? 사용하는 방법은 어렵지 않아요.
예를 들어 '설쥐아빠'라는 말을 강조하고 싶으면, html에서 <b>설쥐아빠</b> 이렇게 하면 설쥐아빠가 강조된답니다. 이런 식으로 표현하고 싶은 말 좌우로 시작 태그와 끝 태그를 넣어주면 문자가 문자 태그가 반영되어 출력되는 것이에요.

티스토리를 하면서 흘림체나 강조체 같은 경우에는 신에디터에서 쉽게 이용할 수 있으니 굳이 따로 문자 태그를 사용할 필요는 없지만 윗 첨자, 아래 첨자, 문서의 제목은 알아두시면 유용할 거예요. 특히 과학이나 수학적 내용을 적을 때는 위, 아래첨자가 정말 많이 쓰여요.

 



이미지(img) 태그

이미지 태그는 웹문서에 이미지를 삽입하기 위한 태그예요. 티스토리에서는 '첨부'를 누른 후 '사진'을 누르면 쉽게 이미지가 들어가서 따로 html에서 이미지 태그를 이용할 필요는 없어요. 하지만 이미지가 너무 크면 웹문서를 열 때 시간이 오래 걸리기 때문에 속성을 확인하시고 파일 크기를 줄여주셔야 해요.

이미지 태그의 대표적인 속성 5가지를 살펴보도록 할게요.

◆ src : 이미지 경로 표시
◆ alt : 이미지 설명문 (이미지가 표시되지 않으면 출력되는 문자)
◆ width : 이미지의 가로 크기
◆ height : 이미지의 세로 크기
◆ loading : 이미지 로딩 방식 (eager : 모든 이미지 표시, lazy : 사용자가 볼 수 있는 일정 이미지만 표시(속도 증가))

이미지 파일을 올리게 되면 아래와 같은 형식으로 된답니다.
<img ..., width="200", height="250",...>
다른 것을 볼 필요도 없이 width와 height만 보면 내 사진 파일이 몇 픽셀짜리인지 알 수 있어요. width="200"은 가로가 200픽셀이라는 뜻이고 height="250"은 세로가 250픽셀이란 뜻이랍니다.

여기서 중요한 것 하나를 알려드리면 이미지를 첨부할 때 구글 SEO(Search Engine Optimization)가 좋아하는 형식으로 사진을 올려야 구글 노출이 더 잘된답니다. 구글 SEO가 좋아하는 형식이란 이미지 태그 안에 alt 속성을 꼭 넣어주시는 거예요.

우리가 이미지를 티스토리에 올리고 html에 들어가면 <img ..., width="xx", height="xx",...>이렇게 되어있는데, 여기서 alt="간단한 사진설명"을 넣어주셔야 구글 SEO가 좋아해요. alt 속성을 어떻게 넣냐면 그냥 이미지 태그안에 아무데나 넣으면 되는데 저는 height 속성 뒤에 넣는답니다. <img ..., width="xx", height="xx", alt="xx",...> 이런 식으로 말이죠.

여러분들도 꼭 티스토리에서 이미지를 넣으실 때 사진 아래에 사진설명과 함께 html 편집에 들어가셔서 alt속성을 넣으시길 바라요~! 그래야 구글 유입도 생기겠죠~?

하이퍼링크 태그

하이퍼링크 태그는 하이퍼링크를 웹문서에 사용할 수 있게 해주는 태그에요. <a>태그로 사용한답니다.

하이퍼링크 태그의 속성에는 크게 3개가 있어요.

◆ href : 링크주소를 선언하는 곳.
◆ target : 링크처리 방법.
  ▷ "_self" : 현재 창에서 링크처리
  ▷ "_blank" : 새 창에서 링크처리
  ▷ "name" : iframe에 할당된 name의 창으로 링크처리
◆ download : 웹브라우저의 설정에 상관없이 링크된 대상을 다운로드.

하이퍼링크 태그를 어떻게 사용하는지 예시를 통해 설명드릴게요.
<a href="사이트 주소" target="_self">설쥐아빠</a>
티스토리 글 작성하실 때 html편집으로 변환해서 이렇게 치시면 '설쥐아빠'라는 글씨에 하이퍼링크가 생기게 되요. 이 때 '설쥐아빠'를 클릭하게 되면 입력한 사이트 주소로 넘어가게 된답니다. target을 _self로 했으니 새 창에서 열리는게 아니라 사용하던 창에서 바로 열리겠죠? 새창으로 열고 싶으면 target="_blank"로 입력하면 됩답니다.

divide 태그

divide 태그는 <div>,</div>로 사용해요. divide 태그는 하이퍼링크 등에 name이나 id를 설정하여 그것을 그룹으로 사용할 수 있게 해주는 태그랍니다. 이렇게 설명만 들으면 이해가 잘 안되실꺼에요. 바로 예제를 보시죠.

<div id = "website">
다음
네이버
</div>

반응형

'IT' 카테고리의 다른 글

올인원 핵킹 툴.All in One Hacking tool For Hackers  (423) 2022.03.31
python 스토어 가격 가저오기  (491) 2022.03.31
KDE Mouse 스크롤 줄수 설정 방법  (7) 2021.07.11
### 리눅스에서 문자 변환을 할때 sed 명령어를 주로 사용한다.  (5) 2020.12.10
컴퓨터 위급사항시 필요 복구 시디  (0) 2020.12.01
Posted by Dream Come True
IT2022. 3. 31. 23:16

올인원 핵킹 툴.All in One Hacking tool For Hackers

반응형

핵킹의 입문자라면 이것부터 정리 하고 가는 것이 좋을 것 같습니다.

 

 

 

 

 

https://github.com/Z4nzu/hackingtool

 

GitHub - Z4nzu/hackingtool: ALL IN ONE Hacking Tool For Hackers

ALL IN ONE Hacking Tool For Hackers. Contribute to Z4nzu/hackingtool development by creating an account on GitHub.

github.com

 

반응형

'IT' 카테고리의 다른 글

HTML5 각종 태그 사용법  (821) 2022.04.01
python 스토어 가격 가저오기  (491) 2022.03.31
KDE Mouse 스크롤 줄수 설정 방법  (7) 2021.07.11
### 리눅스에서 문자 변환을 할때 sed 명령어를 주로 사용한다.  (5) 2020.12.10
컴퓨터 위급사항시 필요 복구 시디  (0) 2020.12.01
Posted by Dream Come True
IT2022. 3. 31. 23:08

python 스토어 가격 가저오기

반응형

1. 태그의 클래스 값만 가져오는 함수.

 

태그의 지정된 클래스 값을 가져오는 함수를 만들어 보겠습니다.

from urllib.request import urlopen
from bs4 import BeautifulSoup

웹 크롤링을 위해 가장 기본이 되는 라이브러리를 불러오겠습니다. 간략하게 설명하면 urlopen은 url 페이지의 html 코드를 가져오는 라이브러리이고 BeautifulSoup는 html 문서를 파싱해 데이터를 쉽게 가져올 수 있도록 도와주는 라이브러리입니다.

def getClassValue(url, tag, className) :
    html = urlopen(url)
    bsObject = BeautifulSoup(html, "html.parser")
    content = bsObject.body.find(tag,{"class", className})
    return content.text

getClassValue는 입력된 url을 urlopen으로 html 소스를 가져온 뒤 BeautifulSoup로 파싱 합니다. 파싱 된 데이터에서 입력된 tag와 className을 찾고 마지막에 해당 태그에 있는 value값을 리턴하는 함수입니다.

 

find를 쓰게 되면 1개 항목만 가져오게 됩니다. 혹시 모든 항목을 검색하고 싶다면 find_all로 변경하면 되고 배열로 값을 받을 수 있습니다.

 

2. 네이버 스토어 상품명 가져오기

 

url_list = [
    "https://smartstore.naver.com/soommask/products/4828127993",
    "https://smartstore.naver.com/aseado/products/4837257765",
    "https://smartstore.naver.com/aseado/products/4837266971",
    "https://smartstore.naver.com/aseado/products/3765693172",
    "https://smartstore.naver.com/aer-shop/products/4722827602",
    "https://smartstore.naver.com/aer-shop/products/4722827602",
    "https://smartstore.naver.com/korea-mask/products/4825762296",
    "https://m.smartstore.naver.com/ygfac/products/3905641271",
    "https://smartstore.naver.com/gonggami/products/4705579501"
];

상품명을 가져오기 위한 주소를 배열에 담아줍니다.

titles = []

tag = 'strong'
className = 'title_simplebuy'

for url in url_list :
    titles.append(getClassValue(url, tag, className))

검색할 태그와 클리스 이름을 정의하고 for문으로 배열에 있는 데이터들을 실행하며 title을 수집합니다.

print(titles)

위와 같이 출력되는 것을 볼 수 있습니다.

 

3. 가격 가져오기

 

제목처럼 이제 가격을 가져오겠습니다.

위에선 이미 태그를 분석하여 상품명이 있는 태그와 클래스를 알았기 때문에 한 번에 가져올 수 있었습니다.

이번에는 어떤 태그에 가격이 있을지 확인하여 가져오는 방법을 정리하겠습니다.

html= urlopen("https://smartstore.naver.com/sangkong/products/4762917002")
bsObject = BeautifulSoup(html, "html.parser")
bsObject

BeautifulSoup로 파싱 한 데이터를 출력해 보면 위와 같이 확인할 수 있습니다.

이 요소들 중에 가격이 표시된 부분을 찾아봅시다.

<input name="productSalePrice" type="hidden" value="18000"/>

위 태그에 가격이 있는 것을 발견할 수 있네요

이제 위에서 했던 함수를 응용해서 값을 가져오는 함수를 만들어 보겠습니다.

def getNameValue(url, tag, name) :
    html = urlopen(url)
    bsObject = BeautifulSoup(html, "html.parser")
    content = bsObject.find(tag, {"name": name})
    return content.get('value')

해당 태그의 value 값을 가져오도록 조금 수정했습니다.

이제 다시 함수를 돌려줄까요?

prices = []

tag1 = 'input'
name = 'productSalePrice'

for url in url_list :
    prices.append(getNameValue(url, tag1, name))
print(prices)

상품마다 가격을 가져오는 것을 확인할 수 있습니다.

반응형

'IT' 카테고리의 다른 글

HTML5 각종 태그 사용법  (821) 2022.04.01
올인원 핵킹 툴.All in One Hacking tool For Hackers  (423) 2022.03.31
KDE Mouse 스크롤 줄수 설정 방법  (7) 2021.07.11
### 리눅스에서 문자 변환을 할때 sed 명령어를 주로 사용한다.  (5) 2020.12.10
컴퓨터 위급사항시 필요 복구 시디  (0) 2020.12.01
Posted by Dream Come True

티스토리툴바