Hero's TIL

2022.08.26

CSS의 기초

8월 24일에 배웠던 HTML의 기초에 기반하여 강의가 진행되었다.
HTML을 맛보기로 조금 배웠지만 페이지 소스를 살펴보고 직접 HTML을 끄적여보니 CSS의 기초를 배울때 도움이 되었다!
CSS는 HTML을 꾸밀때 주로 사용하는 언어로 스타일 시트를 꾸밀때 쓰인다.

content를 지정해서 딕셔너리 구조로 정의해준 뒤 문단별로 class를 설정하여 HTML형식으로 다운로드 해서 파일을 열어주면

이런 형식으로 나타나는데, 첫번째 문단을 보면 content1로 클래스가 지정이 되어있다.
content1의 성질을 보면 폰트, 색깔이 지정된 것을 확인할 수 있는데, font-family는 폰트를, color는 색깔을 지정한다고 볼 수 있다.
따라서, content1은 궁서체를 사용하는 빨간색 "첫번째 문단"을 보여준다.
그럼 "두번째 문단"은?
두번째 문단은 content2로 굴림체와 배경색깔이 노란색으로 지정되어있음을 알 수 있다.

타슈 크롤링 및 지도 시각화 하기

라이브러리 임포트

from urllib.request import urlopen
from bs4 import BeautifulSoup
import time
import re
import pandas as pd

타슈 크롤링

# 1) 데이터 프레임 생성
data = pd.DataFrame(columns=['스테이션명','위치','상태정보','위도','경도'])
# 2) 타슈 사이트 접속 주소 : https://new.tashu.or.kr/stationList.do
url = 'https://new.tashu.or.kr/stationList.do'
# 3) url 접속하여 HTML 가져오기
html = urlopen(url)
# 4) HTML 태그를 파싱(parsing)하여 변환
bsOject = BeautifulSoup(html, 'html.parser',from_encoding='utf-8')
# 5) 타슈 정류장 정보가 있는 table만 가져오기
table = bsOject.find_all('table',{'class', 'board-tp-01 stationtable'})
# 6) 상세 정보 추출하기
# 6-1) table내에 tr을 찾기
tr = table[0].find_all('tr')
# 6-2) 첫 tr(table의column정보)는 제외
tr = tr[1:len(tr)]
# 6-3) 타슈 정류장 상세 정보 추출
for index_tr in range(0,len(tr)):
    td = tr[index_tr].find_all('td')
    # 장소
    station = td[0].text.split('.')[1] # 1.무역전시관입구(택시승강장) -> . 자르고 -> 무역전시관입구(택시승강장)
    # 위치
    location = td[1].text
    # 상태정보
    status = td[2].text
    # 좌표 추출
    # 위도 Latitude
    lat = td[3].button.attrs['data-lat']
    # 경도 Longitude
    lon = td[3].button.attrs['data-ltd']
    # 7) 타슈 정류장 상세 정보 DataFrame에 담기(append)
    data = data.append({'스테이션명': station,
                        '위치': location,
                        '상태정보': status,
                        '위도': lat,
                        '경도': lon}, ignore_index=True)
    print('Complets od ' + station)
    print('-----------------------------------------------------------')
    print(data)
    ```

인덱스 값 변경하기

#인덱스 변경 0, 1, 2 -> 무역전시관입구(택시승강장), 대전컨벤션센터, ...
data.set_index(keys=['스테이션명'],inplace=True)

크롤링한 데이터 저장하기

data.to_csv('TASU.csv',encoding='utf-8-sig')

크롤링 데이터를 활용한 지도 시각화

데이터 준비하기

df= pd.read_csv('/content/TASU.csv')

지도 시각화하기

import folium
#타슈 정류장의 상태에 따라서 Marker를 다른 색으로 표시
#1) 타슈 정류장 위치 기반으로 중심좌표를 설정
t_map = folium.Map(location=[df['위도'].mean(),df['경도'].mean()],zoom_start=14)
#2) 타슈 정류장의 상태에 따라서 Marker를 다른색으로 표시(df.상태정보.unique()) -> 정상: 파란색. NETWORK 오류: 빨간색
status = df.상태정보 # df['상태정보']
#3) 타슈 정류장 Marker 추가하기
for index_draw in range(0, len(status)):
    if status[index_draw] == '정상':
        folium.Marker([df.loc[index_draw,'위도'],df.loc[index_draw,'경도']],
                      popup = '<pre>' +df.loc[index_draw,'스테이션명'] + '</pre>',
                      icon=folium.Icon(color ='blue', icon='info-sign')).add_to(t_map)
    elif status[index_draw] == 'NETWORK 에러':
        folium.Marker([df.loc[index_draw,'위도'],df.loc[index_draw,'경도']],
                      popup = '<pre>' +df.loc[index_draw,'스테이션명'] + '</pre>',
                      icon=folium.Icon(color ='red', icon='info-sign')).add_to(t_map)
t_map