- 내일배움캠프 5일차 목차
[오늘 한일]
- 팀 결과물 검토.
- 프로젝트 발표회 참여.
- 개발일지 작성법 강의수강.
[오늘 배운점]
팀 결과물을 돌아보면서,
프로젝트 진행중에는 자세히 못 봤던 프론트엔드 쪽 새로 알게된 것들을 체크했다.
<a태그 하이퍼링크를 새창으로 띄우기>
<a class='blog' href="url" target="_blank"></a>a태그와 하이퍼링크 속성을 사용하는게 링크 작성방법 중에는 가장 기본적이라고 생각한다.
여기에 target="_blank"를 넣어서 간단하게 새창으로 뜨게할수 있다.
기본적인 형태이니 활용도가 높을것 같다.
a태그를 사용하면 태그 안 문구에 밑줄이 그어진다.
이 부분은 css에서 간단하게 해결할수 있다.
text-decoration-line: none;이렇게 스타일을 줘서 밑줄을 없애면 된다.
(a태그는 밑줄이 디폴트다라는 느낌이다.)
<form태그를 이용한 검색페이지 만들기>
form태그 자체가 검색한 내용과 함께 페이지를 띄우는 역할을 한다.
팀 결과물 리뷰페이지 쪽에서 쓰였다.
<form action="https://search.kyobobook.co.kr/search?keyword=" method="GET" target="_blank">
<input placeholder="독서록 쓰고 싶은 책을 검색해 주세요." name="keyword" type="text">
<button>검색</button>
</form>같은 방법으로 target="_blank"로 새창에서 띄우게 설정한거 같다.
method=GET이 중요한 부분같은데, 기능으로나 작성법으로나 아직은 잘 모르겠다.
알게되는 대로 정리해봐야겠다.
<커서 포인터로 기능 식별하기>
버튼이 버튼 모양이 아니라면 (그냥 텍스트 뿐인 버튼이라면)
버튼에 기능이 들어있는 지 식별하기 어렵다.
커서포인터를 이용한다면,
커서를 올렸을때 손모양으로 바뀌는 동작만으로 기능의 유무 표시가 용이하다.
<a>태그와 <button>태그에는 기본적으로 커서포인터가 포함되있는거 같다. (역시나 디폴트라는 느낌이다.)
하지만 <div>태그나 <h2>태그에는 css로 추가 해줘야한다.
<div style="cursor: pointer;" class="logo"></div>css 부분(스타일 태그 안쪽)에 작성하지 않고 태그 안에 이렇게 작성해주셨다.
몇몇개 적은 수의 태그에만 스타일을 줄때는 이런 방법이 있다는 걸 배웠다.
<웹스크래핑 none출력 문제 분석>
엊그저께 웹스크래핑에서 난제가 있었는데,
해결방법은 찾아 해결했었지만 혹시몰라 문제원인을 자세히 분석해봤다.
img_tag1 = soup.select_one("#contents > div.prod_detail_header > div > div.prod_detail_view_wrap > div.prod_detail_view_area > div.col_prod_info.thumb > div.prod_thumb_swiper_wrap.active.hover > div.swiper-container.prod_thumb_list_wrap.swiper-container-fade.swiper-container-horizontal > ul > li.prod_thumb_item.swiper-slide.swiper-slide-visible.swiper-slide-active > div > div.portrait_img_box.portrait > img")
img_tag2 = soup.select_one("div.portrait_img_box > img")
img_tag3 = soup.select_one("img[src^='https://contents.kyobobook.co.kr/sih/fit-in/']")
print('case1:',img_tag1)
print('case2:',img_tag2)
print('case3:',img_tag3)
강의 때 배운 대로 chrome개발자 도구의 copy selector기능을 이용하면,
img_tag1에 담긴 것처럼 긴 선택자를 만든다.
이 긴 선택자에서 하나라도 잘못된 부분이 있으면 태그를 못 찾는 것이다. (즉, none이 출력된다.)
그래서 해당하는 태그를 찾을 수 있게 선택자를 만들어줘야 한다.
한참을 이렇게도 넣어보고 저렇게도 넣어봤다.
선택자 맨뒤부터 한단씩 잘라서 어디부터 못 불러오는지 추적했다.
그러자 col_prod_info.thumb부분부터는 불러와졌다.
그 태그를 기준으로 하위 태그를 전부 못 불러왔다.
해당 태그도 그렇고 바로 하위 태그도 그렇고, 클래스 값을 두개가지고 있다는게 특이했다.
혹시 싶어서 클래스 두개중 하나씩만 선택자에 넣어보았다.
클래스를 하나만 넣으니까 태그를 잘 불러온다!
img_tag2가 그 부분이다. 최하위 div태그에서 portrait를 제외하고 portrait_img_box만 찾게 바꿨다.
그런데 또 특이한건 거꾸로 portrait_img_box를 제외하고 portrait으로 찾게하면 못찾는다.
즉 portrait가 범인이라는 말이 된다.
(두번째줄 태그 클래스중에 active도 범인이다.)
해결방법은 문제가 있는 속성 값은 포함되지 않게 하고.
(클래스든, id든, 다른 속성이든)
잘 불러와지는 속성 값을 찾아 원하는 태그를 찾을수 있는 선택자를 작성해야 한다는 것이다.
이 분석 내용은 결국 교보문고 url에 한정한 분석이니까,
다른 사이트를 스크래핑 할때는 또 다른 문제가 발생할 것이다.
그때도 이런 접근으로 가장 적절한 선택자를 만들어 낼수 있을 거다.
결론, 선택자를 골라내는 노하우가 중요하다!
※ 발표 때도 튜터님께서 피드백을 주신 내용인데,
스크래핑 같은 기능은 새로운 사이트에 하려고 할때마다 새로운 문제점에 부딫힐거라고 하셨다.