본문 바로가기

전체 글

 (49)
[MBTI 테스트(4)] 판다코딩 유튜브_메인페이지 꾸미기 container bootstrap을 사용하기 위해서는 container라는 클래스 안에 항상 선언되어있어야한다. 로 section 태그들을 감싸준다. (생략) section 파트는 탭으로 들여쓰기하는 것을 잊지말고 해주도록 한다. css 폴더 내 css 파일 만들기 defalut.css에는 전체에 영향을 주는 파일을 main.css에는 main부분에만 영향을 주는 파일로 만든다. head 부분에 생성한 css 파일을 링크시켜준다. defaul.css 수정해보기 잘 변경되어있는 것을 확인할 수 있다. main 부분만 컬러 변경해주기 #main 앞에서 .(점)은 class, #은 id라고 했다. 우리는 각 섹션을 id로 나누어주었으므로 #main이라고 하면, main 아이디를 갖는 부분을 의미한다. 따라서..
웹사이트 만들 때 개발자도구로 장치 별 화면 확인하기 (pc, 스마트폰 등) 개발자도구 - 장치 에뮬레이션 개발자도구에서 장치에뮬레이션(엣지기준) 클릭 크롬 등 다른 브라우저에서도 가능하다. 원하는 장치를 클릭하면 된다. 끝!!
[MBTI 테스트(3)] 판다코딩 유튜브_Bootstrap이란? 설치부터 부트스트랩 css 사용까지 Bootstrap 이란? 이런 mbti 테스트같은 경우 pc, 모바일로도 접속할 수 있다. 가장 좋은 방법은 모바일버전, pc버전을 만드는 것이다. '반응형 웹사이트'를 css로만으로도 가능하지만 코드가 길어지므로.. Bootstrap은 미리 만들어진 코드를 사용할 수 있는 프레임워크이다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. get..
[MBTI 테스트(2)] 판다코딩 유튜브_강의 주의사항 및 페이지 레이아웃, git hub에서 다운받기 https://www.youtube.com/watch?v=GUmESHONKaE&list=PLgqG2uj21HgmvkxcxKD0aYvF8zs0LGAES&index=3 강의를 따라 git hub 자료를 받아주고 유의사항을 체크한다. Html, css, javescript는 배우긴했지만 사용하지않은지가 오래되어서... 그래도 대략적으로는 기억이 난다. 생소했던 내용으로는 Javascript에서 css 선택자가 class는 . (점) id는 #으로 구분한단 점인데 일단 강의를 듣고 정 모르겠으면 Javascript 강의를 다시 듣도록 한다. (아니면 해당 내용만이라도 찾아보던가) 페이지 레이아웃 페이지 레이아웃이라고 하고 프로젝트로 치면 기획단계이다. MBTI 테스트는 기본적으로 메인페이지, QnA 페이지 그리..
[MBTI 테스트(1)] 판다코딩 유튜브_ATOM 에디터 패키지 설치하기 > 실패 > replit으로 변경... https://www.youtube.com/watch?v=vtUJLtF7pfw&list=PLgqG2uj21HgmvkxcxKD0aYvF8zs0LGAES&index=2 위 유튜브 영상을 참고로 MBTI 테스트 프로젝트를 진행한다. ATOM 페이지가 영상과 많이 달라져(2년 전 영상이라) 내가 찾아본 내용으로 정리해보았다. ATOM 검색 이렇게 겁색이 되는데 눌러서 들어가본다. 깃허브 아이디로 로그인을 하면 된다. (없으면 회원가입) 아톰 다운로드 영상 이미지와 다르게 이런식으로 깃허브페이지로 들어가진다. 스크롤을 쭉 내리면 아래와 같은 화면이 보인다. 클릭한다! 맥, 윈도우, 리눅스 선택해서 다운로드 맥, 윈도우, 리눅스 필요한 것으로 다운로드 해준다. 윈도우 버전 다운로드 하기 도서관 컴퓨터가 윈도우버전이..
[나도코딩 파이썬 활용편 웹스크래핑(13)] 다음 영화페이지에서 이미지 url(src) 가져오기 url의 변화에서 힌트를 얻는다. 년도 검색에 따라 url이 바뀌는데, 이 것을 응용해본다. 포스터 이미지를 바로 가져오는 동작을 구현한다. 포스터 이미지를 보려면 영화 순위 > 소개페이지 > 포스터 페이지 이렇게 단계를 거쳐 들어가야하는데, 웹스크래핑으로 바로 포스터페이지로 들어가보도록 한다. 이미지 가져오기 img 태그 내 클래스를 확인한다. src에 이미지 링크가 담겨있다. import requests from bs4 import BeautifulSoup res = requests.get("https://search.daum.net/search?w=tot&q=2019%EB%85%84%EC%98%81%ED%99%94%EC%88%9C%EC%9C%84&DA=MOR&rtmaxcoll=MOR") res.ra..
[나도코딩 파이썬 활용편 웹스크래핑(12)] 여러 페이지 반복문으로 한 번에 가져오기, 원하는 조건의 링크 가져오기 1페이지부터 5페이지까지 스크래핑하기 headers는 공통이므로 url보다 위로 올려주고 url의 페이지 표시부분만 숫자를 변경하여 반복해준다. 페이지 정보를 중괄호로 나타내 format(i)로 반복해준다. f + string으로 표시하기. f + string ----- 이렇게 점선표시를 string * 100으로 해주면 100개가 표시된다. 링크 표시하기 a 태그의 attrs=class를 가져오는 것도 있지만, href의 링크를 가져와줘야한다. ["href"] ... 이 부분 잘 이해는 안가지만... f + string으로 입력해도 되고 format 형식으로 입력해도 된다. 이런식으로 표시된다!
[나도코딩 파이썬 활용편 웹스크래핑(11)] GET방식 POST방식, 쿠팡 예제 (광고필터링, 특정 점수/문자열 필터링하기) Get 방식 vs Post 방식 url이 계속 변경된다 = GET url이 변경되지 않는다 = POST POST 방식이 GET보다는 보안이 나은 편이다. (ex 아이디, 로그인값이 url에 나타나지않음) 정규식 활용하기 지금 음영처리 된 부분은 광고부분이고 그 아래 li태그는 일반 물품이다. class 명을 보면, 앞부분은 같고 뒷부분에 _ad-badge라고 추가되어있다. 따라서 앞에서 배운 정규식을 응용해서 공통 코드부분을 검색해 가져오도록 한다. (search product 부분) 정규식을 사용하기 위해서 import re ...정규식 모듈 불러오기 또, class의 공통되는 부분을 검색하기 위해 {"class":re.compile("^search-product")} url 불러오기가 안될 때, lx..

티스토리툴바