chap1-3.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1-3 CSS 선택자\n",
    "* CSS 선택자로 DOM 내부의 원하는 요소를 지정해서 추출하기 위해 CSS 선택자에 대해 자세히 알아보고자 한다.\n",
    "\n",
    "### 이 장에서 배울 내용\n",
    "* HTML의 구조를 확인하는 방법\n",
    "* CSS 선택자\n",
    "\n",
    "### 웹 브라우저로 HTML 구조 확인하기\n",
    "* 구글 크롬의 경우 개발자 도구를 이용, F12 버튼 또는 마우스 오른쪽 버튼을 클릭하여 검사를 선택하면 뜸\n",
    "\n",
    "#### 원하는 요소 선택하기\n",
    "* 원하는 요소를 마우스를 이용해 선택한 후 오른쪽 마우스를 눌러 `[Copy>Copy selecor]`를 이용\n",
    "\n",
    "### 위키 문헌에 공개되어 있는 윤동주 작가의 작품 목록 가져오기\n",
    "* 위키문헌 (<https://ko.wikisource.org/wiki>) 에 공개되어 있는 윤동주의 작품목록을 가져오기\n",
    "* 윤동주 위키 (<https://ko.wikisource.org/wiki/%EC%A0%80%EC%9E%90:%EC%9C%A4%EB%8F%99%EC%A3%BC)>\n",
    "* 하늘과 바람과 시 부분을 선택한 후 오른쪽 마우스 이용해 copy selector로 카피하면 다음의 CSS 선택자가 카피됨\n",
    "* `#mw-content-text > div > ul:nth-child(6) > li > b > a`\n",
    "* nth-child(n) 은 n 번째 요소를 의미 즉 6번째 요소를 의미, #mw-content-text 내부에 있는 url 태그는 모두 작품과 관련된 태그. 따라서 따로 구분할 필요는 없으며 생략해도 됨. BeautifulSoup는 nth-child 지원하지 않음\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "- 하늘과 바람과 별과 시\n",
      "- 서시\n",
      "- 자화상\n",
      "- 소년\n",
      "- 눈 오는 지도\n",
      "- 돌아와 보는 밤\n",
      "- 병원\n",
      "- 새로운 길\n",
      "- 간판 없는 거리\n",
      "- 태초의 아침\n",
      "- 또 태초의 아침\n",
      "- 새벽이 올 때까지\n",
      "- 무서운 시간\n",
      "- 십자가\n",
      "- 바람이 불어\n",
      "- 슬픈 족속\n",
      "- 눈감고 간다\n",
      "- 또 다른 고향\n",
      "- 길\n",
      "- 별 헤는 밤\n",
      "- 흰 그림자\n",
      "- 사랑스런 추억\n",
      "- 흐르는 거리\n",
      "- 쉽게 씌어진 시\n",
      "- 봄\n",
      "- 참회록\n",
      "- 간(肝)\n",
      "- 위로\n",
      "- 팔복\n",
      "- 못자는밤\n",
      "- 달같이\n",
      "- 고추밭\n",
      "- 아우의 인상화\n",
      "- 사랑의 전당\n",
      "- 이적\n",
      "- 비오는 밤\n",
      "- 산골물\n",
      "- 유언\n",
      "- 창\n",
      "- 바다\n",
      "- 비로봉\n",
      "- 산협의 오후\n",
      "- 명상\n",
      "- 소낙비\n",
      "- 한난계\n",
      "- 풍경\n",
      "- 달밤\n",
      "- 장\n",
      "- 밤\n",
      "- 황혼이 바다가 되어\n",
      "- 아침\n",
      "- 빨래\n",
      "- 꿈은 깨어지고\n",
      "- 산림\n",
      "- 이런날\n",
      "- 산상\n",
      "- 양지쪽\n",
      "- 닭\n",
      "- 가슴 1\n",
      "- 가슴 2\n",
      "- 비둘기\n",
      "- 황혼\n",
      "- 남쪽 하늘\n",
      "- 창공\n",
      "- 거리에서\n",
      "- 삶과 죽음\n",
      "- 초한대\n",
      "- 산울림\n",
      "- 해바라기 얼굴\n",
      "- 귀뚜라미와 나와\n",
      "- 애기의 새벽\n",
      "- 햇빛·바람\n",
      "- 반디불\n",
      "- 둘 다\n",
      "- 거짓부리\n",
      "- 눈\n",
      "- 참새\n",
      "- 버선본\n",
      "- 편지\n",
      "- 봄\n",
      "- 무얼 먹구 사나\n",
      "- 굴뚝\n",
      "- 햇비\n",
      "- 빗자루\n",
      "- 기왓장 내외\n",
      "- 오줌싸개 지도\n",
      "- 병아리\n",
      "- 조개껍질\n",
      "- 겨울\n",
      "- 트루게네프의 언덕\n",
      "- 달을 쏘다\n",
      "- 별똥 떨어진 데\n",
      "- 화원에 꽃이 핀다\n",
      "- 종시\n"
     ]
    }
   ],
   "source": [
    "from bs4 import BeautifulSoup \n",
    "import urllib.request as req\n",
    "# 뒤의 인코딩 부분은 \"저자:윤동주\"라는 의미입니다.\n",
    "# 따로 입력하지 말고 위키 문헌 홈페이지에 들어간 뒤에 주소를 복사해서 사용하세요.\n",
    "url = \"https://ko.wikisource.org/wiki/%EC%A0%80%EC%9E%90:%EC%9C%A4%EB%8F%99%EC%A3%BC\"\n",
    "res = req.urlopen(url)\n",
    "soup = BeautifulSoup(res, \"html.parser\")\n",
    "# #mw-content-text 바로 아래에 있는 \n",
    "# ul 태그 바로 아래에 있는\n",
    "# li 태그 아래에 있는\n",
    "# a 태그를 모두 선택합니다.\n",
    "a_list = soup.select(\"#mw-content-text   ul > li  a\")\n",
    "for a in a_list:\n",
    "    name = a.string\n",
    "    print(\"-\", name)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### CSS 선택자 알아보기\n",
    "* CSS 선택자 참고 및 실습해보기 : <https://www.w3schools.com/cssref/css_selectors.asp>\n",
    "\n",
    "선택자 기본서식\n",
    "\n",
    "| 서식 | 설명 |\n",
    "| --- | --- |\n",
    "| * | 모든 요소를 선택 |\n",
    "| <요소 이름> | 요소 이름을 기반으로 선택 |\n",
    "| .<클래스 이름> | 클래스 이름을 기반으로 선택 |\n",
    "|#<id 이름> | id 속성을 기반으로 선택 |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### CSS 선택자로 추출 연습하기\n",
    "* HTML 코드를 보고 특정 요소를 추출하는 프로그램 연습"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``` html\n",
    "<ul id=\"bible\">\n",
    "  <li id=\"ge\">Genesis</li>\n",
    "  <li id=\"ex\">Exodus</li>\n",
    "  <li id=\"le\">Leviticus</li>\n",
    "  <li id=\"nu\">Numbers</li>\n",
    "  <li id=\"de\">Deuteronomy</li>\n",
    "</ul>\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* HTML에서 Numbers 요소를 추출하는 경우를 생각"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n",
      "Numbers\n"
     ]
    }
   ],
   "source": [
    "from bs4 import BeautifulSoup \n",
    "fp = open(\"books.html\", encoding=\"utf-8\")\n",
    "soup = BeautifulSoup(fp, \"html.parser\")\n",
    "# CSS 선택자로 검색하는 방법\n",
    "sel = lambda q : print(soup.select_one(q).string)\n",
    "sel(\"#nu\")  #(※1)\n",
    "sel(\"li#nu\")  #(※2)\n",
    "sel(\"ul > li#nu\")  #(※3)\n",
    "sel(\"#bible #nu\")  #(※4)\n",
    "sel(\"#bible > #nu\")  #(※5)\n",
    "sel(\"ul#bible > li#nu\")  #(※6)\n",
    "sel(\"li[id='nu']\")  #(※7)\n",
    "sel(\"li:nth-of-type(4)\")  #(※8)\n",
    "# 그 밖의 방법\n",
    "print(soup.select(\"li\")[3].string)   #(※9)\n",
    "print(soup.find_all(\"li\")[3].string) #(※10)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1. id 속성이 nu 인것을 추출\n",
    "1. 위의 방법에 li 태그 추출\n",
    "1. ul 태그의 자식이라는 의미를 추가로 지정\n",
    "1. id 속성을 사용해 #bible 아래의 #nu를 선택하기 한 것.\n",
    "1. 위의 방법에 태그들이 직접적인 부모 자식 관계를 가지고 있다는 것을 나타냄\n",
    "1. id가 bible인 ul 태그 바로 아래에 있는 id가 nu인 li 태그를 선택하는 것\n",
    "1. 속성 검색을 사용해 id가 nu인 li 태그를 지정하는 것\n",
    "1. 4번째 li 태그를 추출하는 것\n",
    "1. select()와 find_all() 으로 `[3]`의 의미는 0부터 시작해서 4번째 요소를 추출한다는 의미임, select는 css 선택자도 포함시키는 것이 가능"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### CSS 선택자로 과일과 야채 선택해보기\n",
    "* 조금 더 복잡한 HTML에서 원하는 요소를 추출해보기"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```html\n",
    "<html>\n",
    "<body>\n",
    "<div id=\"main-goods\" role=\"page\">\n",
    "  <h1>과일과 야채</h1>\n",
    "  <ul id=\"fr-list\">\n",
    "    <li class=\"red green\" data-lo=\"ko\">사과</li>\n",
    "    <li class=\"purple\" data-lo=\"us\">포도</li>\n",
    "    <li class=\"yellow\" data-lo=\"us\">레몬</li>\n",
    "    <li class=\"yellow\" data-lo=\"ko\">오렌지</li>\n",
    "  </ul>\n",
    "  <ul id=\"ve-list\">\n",
    "    <li class=\"white green\" data-lo=\"ko\">무</li>\n",
    "    <li class=\"red green\" data-lo=\"us\">파프리카</li>\n",
    "    <li class=\"black\" data-lo=\"ko\">가지</li>\n",
    "    <li class=\"black\" data-lo=\"us\">아보카도</li>\n",
    "    <li class=\"white\" data-lo=\"cn\">연근</li>\n",
    "  </ul>\n",
    "</div>\n",
    "<body>\n",
    "</html>\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "아보카도\n",
      "아보카도\n",
      "아보카도\n",
      "아보카도\n",
      "아보카도\n",
      "아보카도\n"
     ]
    }
   ],
   "source": [
    "from bs4 import BeautifulSoup \n",
    "fp = open(\"fruits-vegetables.html\", encoding=\"utf-8\")\n",
    "soup = BeautifulSoup(fp, \"html.parser\")\n",
    "# CSS 선택자로 추출하기\n",
    "print(soup.select_one(\"li:nth-of-type(8)\").string)  #(※1)\n",
    "print(soup.select_one(\"#ve-list > li:nth-of-type(4)\").string)  #(※2)\n",
    "print(soup.select(\"#ve-list > li[data-lo='us']\")[1].string)  #(※3)\n",
    "print(soup.select(\"#ve-list > li.black\")[1].string)  #(※4)\n",
    "# find 메서드로 추출하기 ---- (※5)\n",
    "cond = {\"data-lo\":\"us\", \"class\":\"black\"}\n",
    "print(soup.find(\"li\", cond).string)\n",
    "# find 메서드를 연속적으로 사용하기 --- (※6)\n",
    "print(soup.find(id=\"ve-list\")\n",
    "           .find(\"li\", cond).string)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1. 모든 li 태그 중 8번째 요소를 추출하는 것\n",
    "1. 야채를 나타내는 id가 ve-list인 요소 바로 아래에 있는 li 태그 중에 4번째 요소를 추출하는 것\n",
    "1. select() 메소드를 사용해 id가 ve-list인 요소 바로 아래에 있는 li 태그 중에 data-lo 속성이 \"us\"인 것을 모두 추출하고, 그 중에서 `[1]` 인 두번째 요소를 선택하는 것. 현재 HTML에서는 data-li가 \"us\"인것은 파프라키와 아보카도 뿐이기 때문에 이 방법을 사용하는 것이 가능\n",
    "1. select() 메서드를 사용해 class 소석이 \"black\"인 요소 가운데 `[1]`의 요소를 선택하는 것으로 class 속성이 \"black\" 인 것은 가지와 아보카드 뿐임\n",
    "1. find() 메서드는 객체를 사용해 여러 개의 조건을 한번에 지정할 수 있음\n",
    "1. find() 메서드를 두 번 조합해서 사용하는 방법으로 ve-list 다음 li까지 만족하는 걸 추출"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 정규 표현식과 함께 조합하기\n",
    "* BeautifulSoup의 기능으로 정규 표현식을 조합해 요소 추출이 가능. \n",
    "* 링크를 나타내는 a 태그 중에서 https 프로토콜로 통신하는 링크만 추출하고 싶다면 다음과 같은 코드를 사용하면 됨"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "https://example.com/fuga\n",
      "https://example.com/foo\n"
     ]
    }
   ],
   "source": [
    "from bs4 import BeautifulSoup \n",
    "import re # 정규 표현식을 사용할 때 --- (※1)\n",
    "html = \"\"\"\n",
    "<ul>\n",
    "  <li><a href=\"hoge.html\">hoge</li>\n",
    "  <li><a href=\"https://example.com/fuga\">fuga*</li>\n",
    "  <li><a href=\"https://example.com/foo\">foo*</li>\n",
    "  <li><a href=\"http://example.com/aaa\">aaa</li>\n",
    "</ul>\n",
    "\"\"\"\n",
    "soup = BeautifulSoup(html, \"html.parser\")\n",
    "# 정규 표현식으로 href에서 https인 것 추출하기 --- (※2)\n",
    "li = soup.find_all(href=re.compile(r\"^https://\"))\n",
    "for e in li: print(e.attrs['href'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}