Programming27 원하는 곳에 스크롤 넣기 내가 원하는 곳에 scroll 속성을 넣고싶다면, css의 overflow 속성을 이용하면 된다. overflow: scroll - 원하는 상위 태그의 내용이 넘치든, 아니든 항상 스크롤바가 붙는다. overflow: auto - 내용물이 경계를 넘칠 때에만 스크롤바가 붙는다. 내용물에 따라 스크롤바가 붙었다 안붙었다 하기 때문에 디자인에 어려움이 생길 수 있다. overflow: hidden - 상위 태그의 내용이 넘쳐도 보여주지 않음 세로로 스크롤바를 표시하려면 아래와 같이 overflow-y: scroll을 사용하면 된다. 2021. 3. 4. Selenium에서 #document 안으로 들어가기 Selenium을 이용해 크롤링 하다보면 iframe 안의 내용은 가져오지 못하는 경우가 생긴다. 그럴 때에는 iframe을 바꿔 그 안에서 원하는 정보를 찾을 수 있다. from selenium import webdriver # 웹 드라이버 켜기 driver = webdriver.Chrome(executable_path='드라이버 위치') # 원하는 url로 이동하기 url = "원하는 url" driver.get(url) # iframe 안으로 이동하기 ## 몇 번째 iframe인지 확인 후, 그에 맞게 넣어주셔야해요. 저는 첫 번째 iframe에 들어가고 싶어 0을 넣어줬습니다! pop_up = driver.find_elements_by_tag_name('iframe')[0] driver.switc.. 2020. 12. 29. [CSS] em과 rem의 차이 간단히 말해 em은 상위 컴포넌트의 크기를 가져오는 것이고, rem은 root 컴포넌트의 크기를 가져오는 것이다. 예를 들어 안녕 이렇게 되어 있을 때, span의 "안녕" 사이즈는 바로 상위 div인 second-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-div의 font-size는 first-div(root-div)의 영향을 받아 100*0.5로 50px이다. 즉, span의 폰트 사이즈는 50*0.5로 25px가 된다. 하지만 만약, rem을 쓰게 된다면, 안녕 span의 "안녕" 사이즈는 root div인 first-div 클래스의 스타일을 상속받아 오게 된다. first-div의 폰트 사이즈가 100px 이므로, second-.. 2020. 8. 6. [Django] shell에서 pandas를 이용해 중복 데이터 drop하기 django_import_export를 쓰면서 기본적으로는 데이터 중복이 알아서 잘 들어가지만 가끔 안먹고 똑같은 데이터가 중복해 들어갈 때가 있다. 그런 경우에는 백단에서 어떻게 처리? 작업?을 해줘야 하는지 잘 모르겠어서 django shell을 사용해 중복을 제거해 주기로 결정했따. 사실 중복 제거.. 라기 보다는 db 내용을 복사해 dataframe으로 만들어 drop해준 후, db 초기화를 한 후 다시 넣어주는 것이다. 더 좋은 방법이 있으면 다시 포스팅 하는 것으로.. 일딴 시작! 필요한 라이브러리는 pandas! pip3 install pandas 위를 이용해 pandas 라이브러리를 다운받는당. python3 manage.py shell 터미널에 위 코드를 입력해 shell을 켜준다. fr.. 2020. 8. 3. [JS] Object.assign과 spread operator의 차이점 강의를 듣따가 궁금한 점이 생겼따. 1. Object.assign을 사용 handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat( Object.assign({}, data, { id: this.id++ ) }); }; 2. spread operator 사용 (...) handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat({ …data, id: this.id++ }) }); }; 두개가 똑같다고 하는데 분명 머가 다른점이 있을 것.. 2020. 7. 31. [1] LifeCycle API (생명주기) LifeCycle API (생명주기) 컴포넌트가 브라우저 상에서 나타날 때, 업데이트 될 때, 사라질 때 중간 과정에서 어떤 작업을 하고싶다 할 때에는 LifeCycle API를 사용하면 됨. 이 전체를 외우라는게 아니라 나중에 사용해야 할 때 적절히 사용하고, 사용하면서 외우면 됨. LifeCycle API의 종류는 매우 다양한데, 아래와 같은 개념들이 있다. Mounting (직역 : 설치) - 컴포넌트가 브라우저 상에 나타난다는 것 constructor : 생성자 함수 - 우리가 만든 컴포넌트가 처음 브라우저 상에 나타날 때 만들어지는 과정에서 가장 먼저 실행되는 함수. (저번에 잠깐 기록함) 컴포넌트가 가지고 있는 state를 초기 설정한다던지, 컴포넌트가 만들어지는 과정에서 미리 해야하는 작업이.. 2020. 7. 8. [1] Props, State Props와 State는 리액트에서 데이터를 다룰 때 사용되는 내용이다. Props란? 주로 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용되는 내용 하지만 자식 입장에서는 읽기전용 이기 때문에 값을 바꾸지 몬해용 나중에 컴포넌트를 만들게되면, 아래와 같이 그걸 불러와서 사용을 할 수가 있음. 그리고 만약 우리가 어떤 값을 컴포넌트를 렌더링 할 때 전달해주고 싶다, 하면 value="value1"처럼 값을 넘겨줄 수 있음. 여기에서 value가 바로 props 인 것! 되게 중요합니당! ⋌༼ •̀ ⌂ •́ ༽⋋ 실습! - 자식 컴포넌트에 값을 넘겨주기 // MyName.js // App.js에서 사용할 MyName이라는 컴포넌트를 하나 만들었다. import React, { Component, Fra.. 2020. 7. 8. [2] JSX 기본 문법 CSS Style과 Class를 사용하는 방법 const에 style을 정의해줄 수 있슴당. 1. 보통의 CSS에서는 '-' 를 사용해 띄워줬지만 js에서는 Camel Case를 사용해용 요런 식 입니다. background-color => backgroundColor font-size => fontSize import React, { Component, Fragment } from 'react'; class App extends Component { render() { const style = { backgroundColor: 'black', padding: '16px', color: 'white', fontSize: 15 + 10 + 'px' }; return ( 안녕하세용! ); } } export.. 2020. 7. 6. [1] JSX 기본 문법 JSX JSX는 HTML이랑 비슷하지만, 지켜야 할 규칙이 몇가지 있음 React 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 React.createElement를 사용하는 자바스크립트의 형태로 변환해줌. 1. 태그는 꼭 닫혀있어야 함 #한 번 열은 태그를 그 자리에서 바로 닫는다. 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 함. 안뇽1 안뇽2 근데 구찮게 이렇게 div로 꼭 감싸주어야하나?! 뭔가 불필요해 보인다. => 이런 문제를 해결하려면 Fragment로 감싸주면 된당! import React, { Component, Fragment } from 'react'; class App extends Component { render() { return ( 안녕.. 2020. 7. 6. 이전 1 2 3 다음
