파이썬으로 정적 페이지 웹 크롤링 하기 - 1

✔️ 사전 준비

- VSCode 설치

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

 

- 파이썬 설치

https://www.python.org/

 

Welcome to Python.org

The official home of the Python Programming Language

www.python.org

 

웹 크롤링 포스팅이기때문에 설치방법은 따로 다루지 않을 예정이지만 필수로 필요한 과정이니 찾아보고 제대로 설치하길 바란다.

✔️ 웹 스크래핑 ? 웹 크롤링 ?

웹 크롤링 : 웹 크롤링은 웹상을 돌아다니며 방대한 양의 정보를 수집

웹 스크래핑  : 웹 페이지의 내용을 추출하거나 분석하는 과정

웹 상에있는 '데이터를 추출한다'는 의미는 같지만, 정의에 나온 것 처럼 

웹 크롤링을 하는 방식은  웹 페이지의 링크를 타고 계속해서 탐색을 이어나가지만,

웹 스크래핑은  데이터 추출을 원하는 대상이 명확하여 특정 웹 사이트만을 추적한다는 차이점이 있다.

✔️ 라이브러리

 ✔️ 사용 라이브러리

- requests : 원하는 사이트의 html 코드를 가져올 수 있게 해주는 라이브러리
- bs4 > BeautifulSoup : 가져온 코드를 보기 편하게 html 코드로 파싱해주는 역할
 

 ✔️ 라이브러리 설치

#requests 라이브러리 설치
pip install requests
# bs4 라이브러리 설치
pip install bs4

 

위 코드를 입력 후 실행하여 라이브러리 설치를 하면 

~~ Successfully installed~~~ 라는 문구가 나오면 정상적으로 설치 되었다.

 

✔️  실제 사용해보기

* 연습 사이트는 유튜버 스타트 코딩님이 만드신  https://startcoding.pythonanywhere.com/basic 를이용했습니다.

import requests
response = requests.get("https://startcoding.pythonanywhere.com/basic")
response.text

requests 라이브러리 import 후

데이터 추출하고 싶은 사이트 url를 get메소드 안에 넣어준 후 text만 출력하도록  하면

 

● 결과값

'<!DOCTYPE html>\n<html lang="en">\n\n<head>\n\t<meta charset="utf-8">\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge">\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\n\n\t<title>Electro - HTML Ecommerce Template</title>\n\n\t<!-- Google font -->\n\t<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">\n\n\t<!-- Bootstrap -->\n\t<link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" />\n\n\t<!-- Slick -->\n\t<link type="text/css" rel="stylesheet" href="../static/css/slick.css" />\n\t<link type="text/css" rel="stylesheet" href="../static/css/slick-theme.css" />\n\n\t<!-- nouislider -->\n\t<link type="text/css" rel="stylesheet" href="../static/css/nouislider.min.css" />\n\n\t<!-- Font Awesome Icon -->\n\t<link rel="stylesheet" href="../static/css/font-awesome.min.css">\n\n\t<!-- Custom stlylesheet -->\n\t<link type="text/css" rel="stylesheet" href="../static/css/style.css" />\n\n\t<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\n\t<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->\n\t<!--[if lt IE 9]>\n\t\t  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>\n\t\t  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>\n\t\t<![endif]-->\n\n</head>\n\n<body>\n\t<!-- HEADER -->\n\t<header>\n\t\t<!-- TOP HEADER -->\n\t\t<div id="top-header">\n\t\t\t<div class="container">\n\t\t\t\t<ul class="header-links pull-left">\n\t\t\t\t\t<li><a class="brand-name" href="https://www.youtube.com/channel/UCHwhZ7HPBhUh2IscPSL0pHA" target="_blank"><i class="fa fa-youtube"></i>스타트코딩</a></li>\n\t\t\t\t\t<li><a class="email" href="#"><i class="fa fa-envelope-o"></i> kkj6369@naver.com</a></li>\n\t\t\t\t\t<li><a href="#"><i class="fa fa-map-marker"></i> 1734 Stonecoal Road</a></li>\n\t\t\t\t</ul>\n\t\t\t\t<ul class="header-links pull-right">\n\t\t\t\t\t<li><a href="#"><i class="fa fa-dollar"></i> USD</a></li>\n\t\t\t\t\t<li><a href="#"><i class="fa fa-user-o"></i> My Account</a></li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- /TOP HEADER -->\n\n\t\t<!-- MAIN HEADER -->\n\t\t<div id="header">\n\t\t\t<!-- container -->\n\t\t\t<div class="container">\n\t\t\t\t<!-- row -->\n\t\t\t\t<div class="row">\n\t\t\t\t\t<!-- LOGO -->\n\t\t\t\t\t<div class="col-md-3">\n\t\t\t\t\t\t<div class="header-logo">\n\t\t\t\t\t\t\t<a href="#" class="logo">\n\t\t\t\t\t\t\t\t<img src="../static/img/logo.png" alt="">\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /LOGO -->\n\n\t\t\t\t\t<!-- SEARCH BAR -->\n\t\t\t\t\t<div class="col-md-6">\n\t\t\t\t\t\t<div class="header-search">\n\t\t\t\t\t\t\t<form action="/basic" method="get">\n\t\t\t\t\t\t\t\t<select class="input-select">\n\t\t\t\t\t\t\t\t\t<option value="0">All Categories</option>\n\t\t\t\t\t\t\t\t\t<!-- <option value="1">Category 01</option>\n\t\t\t\t\t\t\t\t\t<option value="1">Category 02</option> -->\n\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t\t<input class="input" name="keyword" placeholder="Search here">\n\t\t\t\t\t\t\t\t<button class="search-btn">Search</button>\n\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /SEARCH BAR -->\n\n\t\t\t\t\t<!-- ACCOUNT -->\n\t\t\t\t\t<div class="col-md-3 clearfix">\n\t\t\t\t\t\t<div class="header-ctn">\n\t\t\t\t\t\t\t<!-- Wishlist -->\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<a href="#">\n\t\t\t\t\t\t\t\t\t<i class="fa fa-heart-o"></i>\n\t\t\t\t\t\t\t\t\t<span>Your Wishlist</span>\n\t\t\t\t\t\t\t\t\t<div class="qty">2</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- /Wishlist -->\n\n\t\t\t\t\t\t\t<!-- Cart -->\n\t\t\t\t\t\t\t<div class="dropdown">\n\t\t\t\t\t\t\t\t<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">\n\t\t\t\t\t\t\t\t\t<i class="fa fa-shopping-cart"></i>\n\t\t\t\t\t\t\t\t\t<span>Your Cart</span>\n\t\t\t\t\t\t\t\t\t<div class="qty">3</div>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- /Cart -->\n\n\t\t\t\t\t\t\t<!-- Menu Toogle -->\n\t\t\t\t\t\t\t<div class="menu-toggle">\n\t\t\t\t\t\t\t\t<a href="#">\n\t\t\t\t\t\t\t\t\t<i class="fa fa-bars"></i>\n\t\t\t\t\t\t\t\t\t<span>Menu</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- /Menu Toogle -->\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /ACCOUNT -->\n\t\t\t\t</div>\n\t\t\t\t<!-- row -->\n\t\t\t</div>\n\t\t\t<!-- container -->\n\t\t</div>\n\t\t<!-- /MAIN HEADER -->\n\t</header>\n\t<!-- /HEADER -->\n\n\t<!-- NAVIGATION -->\n\t<nav id="navigation">\n\t\t<!-- container -->\n\t\t<div class="container">\n\t\t\t<!-- responsive-nav -->\n\t\t\t<div id="responsive-nav">\n\t\t\t\t<!-- NAV -->\n\t\t\t\t<ul class="main-nav nav navbar-nav">\n\t\t\t\t\t<li class="active"><a href="#">Home</a></li>\n\t\t\t\t\t<li><a href="#">Hot Deals</a></li>\n\t\t\t\t\t<li><a href="#">Categories</a></li>\n\t\t\t\t\t<li><a href="#">Laptops</a></li>\n\t\t\t\t\t<li><a href="#">Smartphones</a></li>\n\t\t\t\t\t<li><a href="#">Cameras</a></li>\n\t\t\t\t\t<li><a href="#">Accessories</a></li>\n\t\t\t\t</ul>\n\t\t\t\t<!-- /NAV -->\n\t\t\t</div>\n\t\t\t<!-- /responsive-nav -->\n\t\t</div>\n\t\t<!-- /container -->\n\t</nav>\n\t<!-- /NAVIGATION -->\n\n\t<!-- BREADCRUMB -->\n\t<div id="breadcrumb" class="section">\n\t\t<!-- container -->\n\t\t<div class="container">\n\t\t\t<!-- row -->\n\t\t\t<div class="row">\n\t\t\t\t<div class="col-md-12">\n\t\t\t\t\t<ul class="breadcrumb-tree">\n\t\t\t\t\t\t<li><a href="#">Home</a></li>\n\t\t\t\t\t\t<li class="active"><a href="#">All Categories (<strong class="total_results">35</strong> Results)</a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- /row -->\n\t\t</div>\n\t\t<!-- /container -->\n\t</div>\n\t<!-- /BREADCRUMB -->\n\n\t<!-- SECTION -->\n\t<div class="section">\n\t\t<!-- container -->\n\t\t<div class="container">\n\t\t\t<!-- row -->\n\t\t\t<div class="row">\n\t\t\t\t<!-- ASIDE -->\n\t\t\t\t<div id="aside" class="col-md-3">\n\t\t\t\t\t<!-- aside Widget -->\n\t\t\t\t\t<div class="aside">\n\t\t\t\t\t\t<h3 class="aside-title">Categories</h3>\n\t\t\t\t\t\t<div class="checkbox-filter">\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-1">\n\t\t\t\t\t\t\t\t<label for="category-1">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t노트북\n\t\t\t\t\t\t\t\t\t<small>(10)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-2">\n\t\t\t\t\t\t\t\t<label for="category-2">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t데스크탑\n\t\t\t\t\t\t\t\t\t<small>(10)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-3">\n\t\t\t\t\t\t\t\t<label for="category-3">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t휴대폰\n\t\t\t\t\t\t\t\t\t<small>(10)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-4">\n\t\t\t\t\t\t\t\t<label for="category-4">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t모니터\n\t\t\t\t\t\t\t\t\t<small>(5)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-5">\n\t\t\t\t\t\t\t\t<label for="category-5">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t카메라\n\t\t\t\t\t\t\t\t\t<small>(128)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="category-6">\n\t\t\t\t\t\t\t\t<label for="category-6">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\t악세사리\n\t\t\t\t\t\t\t\t\t<small>(740)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /aside Widget -->\n\n\t\t\t\t\t<!-- aside Widget -->\n\t\t\t\t\t<div class="aside">\n\t\t\t\t\t\t<h3 class="aside-title">Price</h3>\n\t\t\t\t\t\t<div class="price-filter">\n\t\t\t\t\t\t\t<div id="price-slider"></div>\n\t\t\t\t\t\t\t<div class="input-number price-min">\n\t\t\t\t\t\t\t\t<input id="price-min" type="number">\n\t\t\t\t\t\t\t\t<span class="qty-up">+</span>\n\t\t\t\t\t\t\t\t<span class="qty-down">-</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<span>-</span>\n\t\t\t\t\t\t\t<div class="input-number price-max">\n\t\t\t\t\t\t\t\t<input id="price-max" type="number">\n\t\t\t\t\t\t\t\t<span class="qty-up">+</span>\n\t\t\t\t\t\t\t\t<span class="qty-down">-</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /aside Widget -->\n\n\t\t\t\t\t<!-- aside Widget -->\n\t\t\t\t\t<div class="aside">\n\t\t\t\t\t\t<h3 class="aside-title">Brand</h3>\n\t\t\t\t\t\t<div class="checkbox-filter">\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-1">\n\t\t\t\t\t\t\t\t<label for="brand-1">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tSAMSUNG\n\t\t\t\t\t\t\t\t\t<small>(578)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-2">\n\t\t\t\t\t\t\t\t<label for="brand-2">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tLG\n\t\t\t\t\t\t\t\t\t<small>(125)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-3">\n\t\t\t\t\t\t\t\t<label for="brand-3">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tHP\n\t\t\t\t\t\t\t\t\t<small>(755)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-4">\n\t\t\t\t\t\t\t\t<label for="brand-4">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tDELL\n\t\t\t\t\t\t\t\t\t<small>(578)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-5">\n\t\t\t\t\t\t\t\t<label for="brand-5">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tASUS\n\t\t\t\t\t\t\t\t\t<small>(125)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="input-checkbox">\n\t\t\t\t\t\t\t\t<input type="checkbox" id="brand-6">\n\t\t\t\t\t\t\t\t<label for="brand-6">\n\t\t\t\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t\t\t\tSONY\n\t\t\t\t\t\t\t\t\t<small>(755)</small>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /aside Widget -->\n\t\t\t\t</div>\n\t\t\t\t<!-- /ASIDE -->\n\n\t\t\t\t<!-- STORE -->\n\t\t\t\t<div id="store" class="col-md-9">\n\t\t\t\t\t<!-- store top filter -->\n\t\t\t\t\t<div class="store-filter clearfix">\n\t\t\t\t\t\t<div class="store-sort">\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\tSort By:\n\t\t\t\t\t\t\t\t<select class="input-select">\n\t\t\t\t\t\t\t\t\t<option value="0">Popular</option>\n\t\t\t\t\t\t\t\t\t<option value="1">Position</option>\n\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\tShow:\n\t\t\t\t\t\t\t\t<select class="input-select">\n\t\t\t\t\t\t\t\t\t<option value="0">10</option>\n\t\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<ul class="store-grid">\n\t\t\t\t\t\t\t<li class="active"><i class="fa fa-th"></i></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-th-list"></i></a></li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /store top filter -->\n\n\t\t\t\t\t<!-- store products -->\n\t\t\t\t\t<div class="row" id="product-container">\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product01.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product1_detail.html">에이서 스위프트 GO 16 OLED, 스틸 그레이, 코어i7, 512GB, 16GB, WIN11 Home, SFG16-71-77FT</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">1,419,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star-half-o"></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(16)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product02.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product2_detail.html">삼성전자 노트북 플러스2 15.6, 퓨어 화이트, NT550XDA-K24AT, 펜티엄, 256GB, 8GB, WIN11 Pro</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">549,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(405)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product03.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product3_detail.html">레노버 아이디어패드 슬림 1 15AMN7 15.6, 256GB, Free DOS, 82VG002EKR, 라이젠3, Cloud Grey (82VG), 8GB</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">529,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(903)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product04.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="sale">-3%</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product4_detail.html">레노버 V15 G4 AMN 15.6, Arctic Grey, 라이젠3, 256GB, 8GB, WIN11 Home, 82YU0009KR</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">624,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<del class="product-old-price">649,000</del>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(1)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product05.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product5_detail.html">LG 울트라PC 엣지 16, 차콜 그레이, 라이젠5, 256GB, 16GB, WIN11 Home, 16U70R-GA56K</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">1,135,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star-half-o"></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(155)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product06.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product6_detail.html">베이직스 베이직북 14 3세대, BB1422SS, 256GB, White, WIN11 Pro, 셀러론, 8GB</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">398,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star-half-o"></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(1541)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product07.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="sale">-18%</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product7_detail.html">레노버 아이디어패드 슬림 5i 14IRL 14, Cloud Grey, 코어i5, 512GB, 16GB, Free DOS, 82XD002XKR</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">899,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<del class="product-old-price">1,099,000</del>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(106)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product08.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product8_detail.html">레노버 아이디어패드 슬림 5 16IRL 16, Cloud Grey, 512GB, 16GB, Free DOS, 82XF001RKR</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">929,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(118)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product09.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product9_detail.html">에이서 스위프트 GO 16 OLED, 스틸 그레이, 코어i5, 512GB, 16GB, Free DOS, SFG16-71-51BY</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">1,008,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star-half-o"></i>\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(16)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class="col-md-4 col-xs-6">\n\t\t\t\t\t\t\t<div class="product">\n\t\t\t\t\t\t\t\t<div class="product-img">\n\t\t\t\t\t\t\t\t\t<img src="../static/img/product10.png" alt="">\n\t\t\t\t\t\t\t\t\t<div class="product-label">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<span class="new">HOT</span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="product-body">\n\t\t\t\t\t\t\t\t\t<p class="product-category">노트북</p>\n\t\t\t\t\t\t\t\t\t<h3 class="product-name"><a\n\t\t\t\t\t\t\t\t\t\t\thref="#product10_detail.html">삼성전자 갤럭시북 2 15.6, 500GB, 실버, NT550XED-K78AS, 코어i7, 16GB, WIN11 Home</a></h3>\n\t\t\t\t\t\t\t\t\t<h4 class="product-price">1,149,000원\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<div class="product-rating sub_cnt">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t <i class="fa fa-star"></i>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t(687)\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="product-btns">\n\t\t\t\t\t\t\t\t\t\t<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span\n\t\t\t\t\t\t\t\t\t\t\t\tclass="tooltipp">add to wishlist</span></button>\n\t\t\t\t\t\t\t\t\t\t<!-- <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button> -->\n\t\t\t\t\t\t\t\t\t\t<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick\n\t\t\t\t\t\t\t\t\t\t\t\tview</span></button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="add-to-cart">\n\t\t\t\t\t\t\t\t\t<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to\n\t\t\t\t\t\t\t\t\t\tcart</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\n\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /store products -->\n\n\t\t\t\t\t<!-- store bottom filter -->\n\t\t\t\t\t<div class="store-filter clearfix">\n\t\t\t\t\t\t<span class="store-qty">Showing 1 page</span>\n\t\t\t\t\t\t<ul class="store-pagination">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<li><a href="/basic?page=1&keyword=">1</a></li>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<li><a href="/basic?page=2&keyword=">2</a></li>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<li><a href="/basic?page=3&keyword=">3</a></li>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<li><a href="/basic?page=4&keyword=">4</a></li>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /store bottom filter -->\n\t\t\t\t</div>\n\t\t\t\t<!-- /STORE -->\n\t\t\t</div>\n\t\t\t<!-- /row -->\n\t\t</div>\n\t\t<!-- /container -->\n\t</div>\n\t<!-- /SECTION -->\n\n\t<!-- NEWSLETTER -->\n\t<div id="newsletter" class="section">\n\t\t<!-- container -->\n\t\t<div class="container">\n\t\t\t<!-- row -->\n\t\t\t<div class="row">\n\t\t\t\t<div class="col-md-12">\n\t\t\t\t\t<div class="newsletter">\n\t\t\t\t\t\t<p>Sign Up for the <strong>NEWSLETTER</strong></p>\n\t\t\t\t\t\t<form>\n\t\t\t\t\t\t\t<input class="input" type="email" placeholder="Enter Your Email">\n\t\t\t\t\t\t\t<button class="newsletter-btn"><i class="fa fa-envelope"></i> Subscribe</button>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t\t<ul class="newsletter-follow">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a href="#"><i class="fa fa-facebook"></i></a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a href="#"><i class="fa fa-twitter"></i></a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a href="#"><i class="fa fa-instagram"></i></a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a href="#"><i class="fa fa-pinterest"></i></a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- /row -->\n\t\t</div>\n\t\t<!-- /container -->\n\t</div>\n\t<!-- /NEWSLETTER -->\n\n\t<!-- FOOTER -->\n\t<footer id="footer">\n\t\t<!-- top footer -->\n\t\t<div class="section">\n\t\t\t<!-- container -->\n\t\t\t<div class="container">\n\t\t\t\t<!-- row -->\n\t\t\t\t<div class="row">\n\t\t\t\t\t<div class="col-md-3 col-xs-6">\n\t\t\t\t\t\t<div class="footer">\n\t\t\t\t\t\t\t<h3 class="footer-title">About Us</h3>\n\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor\n\t\t\t\t\t\t\t\tincididunt ut.</p>\n\t\t\t\t\t\t\t<ul class="footer-links">\n\t\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-map-marker"></i>1734 Stonecoal Road</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-phone"></i>+021-95-51-84</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-envelope-o"></i>email@email.com</a></li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class="col-md-3 col-xs-6">\n\t\t\t\t\t\t<div class="footer">\n\t\t\t\t\t\t\t<h3 class="footer-title">Categories</h3>\n\t\t\t\t\t\t\t<ul class="footer-links">\n\t\t\t\t\t\t\t\t<li><a href="#">Hot deals</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Laptops</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Smartphones</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Cameras</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Accessories</a></li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class="clearfix visible-xs"></div>\n\n\t\t\t\t\t<div class="col-md-3 col-xs-6">\n\t\t\t\t\t\t<div class="footer">\n\t\t\t\t\t\t\t<h3 class="footer-title">Information</h3>\n\t\t\t\t\t\t\t<ul class="footer-links">\n\t\t\t\t\t\t\t\t<li><a href="#">About Us</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Contact Us</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Privacy Policy</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Orders and Returns</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Terms & Conditions</a></li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class="col-md-3 col-xs-6">\n\t\t\t\t\t\t<div class="footer">\n\t\t\t\t\t\t\t<h3 class="footer-title">Service</h3>\n\t\t\t\t\t\t\t<ul class="footer-links">\n\t\t\t\t\t\t\t\t<li><a href="#">My Account</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">View Cart</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Wishlist</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Track My Order</a></li>\n\t\t\t\t\t\t\t\t<li><a href="#">Help</a></li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<!-- /row -->\n\t\t\t</div>\n\t\t\t<!-- /container -->\n\t\t</div>\n\t\t<!-- /top footer -->\n\n\t\t<!-- bottom footer -->\n\t\t<div id="bottom-footer" class="section">\n\t\t\t<div class="container">\n\t\t\t\t<!-- row -->\n\t\t\t\t<div class="row">\n\t\t\t\t\t<div class="col-md-12 text-center">\n\t\t\t\t\t\t<ul class="footer-payments">\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-cc-visa"></i></a></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-credit-card"></i></a></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-cc-paypal"></i></a></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-cc-mastercard"></i></a></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-cc-discover"></i></a></li>\n\t\t\t\t\t\t\t<li><a href="#"><i class="fa fa-cc-amex"></i></a></li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<span class="copyright">\n\t\t\t\t\t\t\t<!-- Link back to Colorlib can\'t be removed. Template is licensed under CC BY 3.0. -->\n\t\t\t\t\t\t\tCopyright\n\t\t\t\t\t\t\t<script>document.write(new Date().getFullYear());</script>. startcoding all rights reserved | This\n\t\t\t\t\t\t\ttemplate is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a\n\t\t\t\t\t\t\t\thref="https://colorlib.com" target="_blank">Colorlib</a>\n\t\t\t\t\t\t\t<!-- Link back to Colorlib can\'t be removed. Template is licensed under CC BY 3.0. -->\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<!-- /row -->\n\t\t\t</div>\n\t\t\t<!-- /container -->\n\t\t</div>\n\t\t<!-- /bottom footer -->\n\t</footer>\n\t<!-- /FOOTER -->\n\n\t<!-- jQuery Plugins -->\n\t<script src="../static/js/jquery.min.js"></script>\n\t<script src="../static/js/bootstrap.min.js"></script>\n\t<script src="../static/js/slick.min.js"></script>\n\t<script src="../static/js/nouislider.min.js"></script>\n\t<script src="../static/js/jquery.zoom.min.js"></script>\n\t<script src="../static/js/main.js"></script>\n\n</body>\n\n</html>'

 

이렇게 한줄로 해당 사이트의 html 코드가 string 형태로 추출되었다.

그런데 보기 너무 불편하니까 보기 쉽게 html코드로 변환해주는 작업이 필요하다

따라서 bs4 의 BeautifulSoup 라이브러리를 사용하면

import requests
from bs4 import BeautifulSoup
response = requests.get("https://startcoding.pythonanywhere.com/basic")
html = response.text
soup = BeautifulSoup(html,'html.parser')
soup

 

html 코드로 파싱한걸 soup 변수에 담고 그 변수를 출력해준다.

 

● 결과값

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Electro - HTML Ecommerce Template</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet"/>
<!-- Bootstrap -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Slick -->
<link href="../static/css/slick.css" rel="stylesheet" type="text/css"/>
<link href="../static/css/slick-theme.css" rel="stylesheet" type="text/css"/>
<!-- nouislider -->
<link href="../static/css/nouislider.min.css" rel="stylesheet" type="text/css"/>
<!-- Font Awesome Icon -->
<link href="../static/css/font-awesome.min.css" rel="stylesheet"/>
<!-- Custom stlylesheet -->
<link href="../static/css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
...
<script src="../static/js/nouislider.min.js"></script>
<script src="../static/js/jquery.zoom.min.js"></script>
<script src="../static/js/main.js"></script>
</body>
</html>

 

이제 여기에서 필요한 정보를 선택해서 추출해주면 웹크롤링의 기본이 끝난다 !

그럼 여기서 내가 추출하고 싶은 부분을 또 선별을 해야하는데 ,

 

우선 위 사이트 전체에서 아이템 1개를 선택하고싶을때를 가정하여 연습해보자

사이트 접속 후 F12 방향키를 눌러 개발자 도구함을 열어주고 검사할 페이지 요소 선택(Ctrl+Shift+C) 을 누른 후 해당 상품을 클릭하면

 

해당 html 코드가 선택된다. 여기서 이 상품의 정보를 모두 담고 있는 html 태그를  골라주면 되는데 , 

나는 위 사진상으로 선택되어진 태그 아래에 있는 class명이 product인 div 태그를 선택해보겠다.

import requests
from bs4 import BeautifulSoup
response = requests.get("https://startcoding.pythonanywhere.com/basic")
html = response.text
soup = BeautifulSoup(html,'html.parser')
soup.select_one(".product")

soup의 select_one메서드를 사용하여 class명이 product 인 요소를 선택해 오는 코드를 입력 후 실행하면

결과값이 아래와 같다.

 

● 결과값

<div class="product">
<div class="product-img">
<img alt="" src="../static/img/product01.png"/>
<div class="product-label">
<span class="new">HOT</span>
</div>
</div>
<div class="product-body">
<p class="product-category">노트북</p>
<h3 class="product-name"><a href="#product1_detail.html">에이서 스위프트 GO 16 OLED, 스틸 그레이, 코어i7, 512GB, 16GB, WIN11 Home, SFG16-71-77FT</a></h3>
<h4 class="product-price">1,419,000원
										
									</h4>
<div class="product-rating sub_cnt">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
												
												
												(16)
									</div>
<div class="product-btns">
<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
...
<div class="add-to-cart">
<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to
										cart</button>
</div>
</div>

 

참고 https://youtu.be/Uf21RUo3KNc?si=CbWRBpDLGw6Mm0JN

'Back > Python' 카테고리의 다른 글

[Python] 선택구조  (3) 2024.03.25
[Python] 제어구조  (25) 2024.03.22
[Python] 프로그래밍 기초  (21) 2024.03.21