DAY42[N322]

13540 ワード
テキストリンク

HTML & CSS


HTML


:Webページの内容を何らかの方法で表示する方法を示す寸法言語です.

HTML Element

  • head、body、div、liなど;
  • はタグとして表される:開いたタグ(<head>)と閉じたタグ(</head>)
  • すべてのタグが閉じられるわけではありません(空行を追加:<br>,線を追加:<hr>)

    • HTML Children

  • Html要素への追加を許可
  • 例)htmlを使用してリストを表示
    • <ul>
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
</ul>
    結果
  • Hello
  • World
  • !

    • CSS


    :Webドキュメントがどのように表示されているかを示すスタイルシート言語です.
  • HTMLはタグ内でスタイル情報を提供することもできる
  • butは、スタイルに関する内容が多ければ多いほどHTMLが複雑になり使いにくくなるため、使い分ける

    • CSS Selector

  • Type selector:CSSタイプに応じて選択(例えば「p」、「div」など)
  • Class Selector:クラス別選択
  • Idセレクタ:idによる選択
  • コレクタを使用すると、必要な要素をより簡単に選択してアクセスできます

    • CSS継承

  • 親要素のスタイルを要素の位置に従って継承
    • <div style="color:red">
    <p>I have no style</p>
</div>
    結果
    I have no style<p>スタイルは適用されませんが、<div>の影響を受けます.

    CSSレベル

  • クラス特定の要素を指定するスタイル
  • 複数の要素に同時にスタイルを設定するように設定されている場合は継承クラス
    • <p class="banana">I have a banana class</p>
    .banana {
    color:"yellow";
}

    CSS ID

    <p id="pink">My id is pink</p>
    #pink {
    color:"pink";
}
    -「#」記号でスタイルを決定できます.
  • IDは通常、あるHTML要素を指す場合にのみ使用されます(複数ともエラーは発生しませんが、ルールがそうであるため、複数の要素として使用されません)

    • DOM



    :HTML、XMLなどのドキュメントのプログラミングインターフェース
  • プログラミング言語によるHTML文書へのアクセスを許可
  • 他のWebページの要素またはスタイルの追加または変更
  • Webページと対話する際に非常に重要な概念(スクロールなど)

    DOM methods

    開発者ツールを開いてコンソールウィンドウに入り、JavaScriptを使用してDOM
    • を簡単に使用
  • getElementsbyTagName:タグ名を使用してドキュメントの要素を返します.
  • getElementById:idに一致する要素を返します.
  • getElementsByClassName:クラスに一致する要素を返します.
  • querySelector:コレクタに一致する要素を返します
  • querySelectorAll:コレクタに一致するすべての要素を返します.
    • 例
    document.querySelectorAll('p')
    この方法ではスクロール時よりも近づきやすい

    Web Scraping


    Webスキャン、スクロール

  • Webスクロール:Web上で情報を収集する動作
  • 自動化に焦点を当てる->自分で戻る
  • インターネット上のサイトをインデックスする
  • Webブラウズ:特定情報のインポート

    • Webスキャン手順


    リクエストライブラリ&レスポンス受信

    $ pip install requests
    import requests 
requests.get('https://google.com') 
#get(http 요청 메소드):  뭔가를 가지고 올 때 사용
------------
<Response [200]> #정상적인 연결, requests 라이브러리의 Response 타입
    HTTP状態コード 
    resp.status_code #응답코드 확인
  • raise_for_status応答が成功しなければ、エラー
    • を引き起こす可能性もあります.

    応答内容

  • 'text'属性サーバが受信した応答
    • をテキスト形式で表示
    resp.text
    結果-成功
    '<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="ko"><head>...</body></html>'

    BeautifulSoupライブラリ


    実際に返された応答をグループ化し、情報を取得します.
    $ pip install beautifulsoup4

    デフォルトのグループ化

  • parsing(解析):文字列内の特定のドキュメント(HTML、XML)をPythonでの使いやすいドキュメントに変換
    • import requests
from bs4 import BeautifulSoup
url = 'https://google.com'
page = requests.get(url)
soup = BeautifulSoup(page.content, 'html.parser')
  • requestsライブラリ最初に割り当てるページを受信
  • コンテンツを文字列に変換するページ.contentをパラメータ
    • に移動
  • 'html.解析器"(プライマリ・リポジトリに含む)解析器をパーティション化

    • 要素の検索


    findとfind all

    find:条件に一致する最初の結果を返します.find_all:条件に一致するすべての結果を返します.
    cat_elements = soup.find_all(class_='cat')
for cat_el in cat_elements:
    cat_el.find(class_='fish')

    タグの使用

  • 詳細を検索するには、ラベルと組み合わせて使用します.
    例:catクラスはdivラベルにもpラベルにも存在します
    • # div 태그 활용
cat_div_elements = soup.find_all('div', class_='cat')

    文字列の使用

    soup.find_all(string='raining')
    #대소문 구분없이 찾고 싶을때
soup.find_all(string=lambda text: 'raining' in text.lower())
    # 태그 추가
soup.find_all('h3', string='raining')

    情報の取得

    <p class='cat'>This is a p-cat</p>
    cat_el = soup.find('p', class_='cat')
cat_el.text #=> 'This is a p-cat'
    # 불필요한 띄어쓰기 있을때
cat_el.text.strip()
    課題参照サイト
    動画をスクロール

    詳細


    WebスクリプトマッピングによるTOYプロジェクトの試行
    例)Melon 100チャートor JimarketまたはCoopang Best 100を使用してみる
    pygameゲーム開発リファレンスガイド
    一歩一歩Reactの世界に入る(React+Webpack+ES 6コンビネーション構成)