우드의개발개발

환경 설정  가족수에 따른 생존 현황을 구하기 위한 데이터 작업SibSp = Sibling + Spouse / 형제 자매 + 배우자Parch = Parent + Child / 부모 + 자식1 = 자기 자신  가공한 데이터를 기반으로 세개의 도표를 시각화

1. 서울시 구별 주유소 데이터 정보를 수집하여 데이터 프레임화from bs4 import BeautifulSoupfrom selenium import webdriverfrom selenium.webdriver.common.by import Byimport time from tqdm import tqdmurl="https://www.opinet.co.kr/searRgSelect.do"driver=webdriver.Chrome()driver.get(url)#서울 선택sido_select=driver.find_element(By.ID, "SIDO_NM0")sido_select.send_keys('서울')time.sleep(3)# 서울시 구gu=driver.find_element(By.ID,'SIGUNGU_N..

1. 서울시 한정,  서울시 내에 있는 스타벅스의 매장 이름, 주소, 구를 가지고 와서 pandas data frame으로 정리하기from bs4 import BeautifulSoupimport numpy as npimport pandas as pdfrom selenium.webdriver.common.by import Byfrom selenium import webdriverurl = "https://www.starbucks.co.kr/store/store_map.do"driver = webdriver.Chrome()driver.get(url)# 지역 검색district_finding = driver.find_element(By.CSS_SELECTOR, '#container > div > form > ..

부모 컨테이너(flex 지정) 안 자식 요소 프로퍼티로 flex-basis는 flex-grow와 flex-shrink 조합에 따라 여러 의미를 갖는다. flex-grow가 자식 요소간의 비율 및 커지는 속도를 결정했고 flex-shrink가 화면 크기를 줄일 때 줄어드는 속도를 결정했다. 특히 flex-grow가 0으로 쓸 경우 더이상 커지길 원치 않는다라는 의미로 쓰이고 flex-shrink가 0으로 쓸 경우 더이상 줄어들기 원치 않는다의 의미로 쓰인다. flex-grow를 양수로 주고 flex-shrink를 0으로 줄 경우 더이상 줄어들기 원치 않음을 의미하므로 flex-basis의 의미가 mini-width 의미로 쓰인다. 최소의 가로 크기(초기값) 의미로 사용한다. 반대의 경우 flex-grow를..

부모 컨테이너 안에 여러 자식요소가 있다고 했을 때 화면 크기를 줄일 경우 자식 요소가 줄어드는 속도를 지정할 수 있다. 이 때 사용하는 속성이 flex-shrink이다. 값이 클수록 줄어드는 속도도 빠르다. 0일 경우 자식 요소에 텍스트가 있을 때 텍스트가 차지하는 비율 이상으로 줄어들지 않는다.

flex-grow 부모 컨테이너 안에 있는 자식 컨테이너 간의 비율을 조정할 수 있다. navigation 바의 로고 이미지와 네비게이션 탭 간의 크기 비율을 설정할 때 유용한 프로퍼티가 될 수 있다. .box:first-child { background-color: tomato; flex-grow: 2; } .box:last-child { background-color: teal; flex-grow: 1; } 예를 들어 하나의 컨테이너 안에 2개의 자식 요소가 들어가있다고 했을 때 위와 같이 flex-grow에 설정을 주면 2:1의 비율로 설정된다. flex-grow의 기본값은 0이다.

.box:nth-child(3) { background-color: blueviolet; order: 2; } .box:nth-child(6) { background-color: aqua; order: -1; } 부모 컨테이너 안 18개의 자식 요소가 있을 때 오름차순으로 각 상자에 번호를 매겼다. 컨테이너 안의 특정 자식 요소에 순서를 지정할 수 있는데 그 때 사용하는 속성이 order이다. 위의 그림은 6번째 박스에 order:-1을 부여하였고 3번째 박스에 order:2를 부여하였다. 기본적으로 컨테이너 안의 자식 box의 순서는 0이고 번호가 낮을수록 우선순위가 높다.

align-items 가로 세로 200px 상자 18개를 한줄에 배치하려고 하였으나 flex-wrap에 wrap 속성을 주어서 상자 본연의 크기를 유지하기 위해 한 줄이 더생기고 상자 9개가 배치되었습니다. 이 때 부모 요소(컨테이너)에 align-items: center; 를 부여할 경우 y축으로 space-around에 대한 속성이 부여됩니다. align-content 가로 세로 200px 상자 18개를 한줄에 배치하려고 하였으나 flex-wrap에 wrap 속성을 주어서 상자 본연의 크기를 유지하기 위해 한 줄이 더생기고 상자 9개가 배치되었습니다. 이 때 부모 요소(컨테이너)에 align-content: center; 를 부여할 경우 y축으로 justify-content: center; 속성이 적..

flex-flow flex-direction과 flex-wrap 속성을 한번에 지정할 수 있는 프로퍼티이다. flex-wrap은 자식 요소에 가로 세로 크기(200px, 200px)가 있을 때 해당 개수가 많아져 모두 한줄에서 표현할 수 없을 경우 이를 처리하는 방법을 결정하는 프로퍼티이다. no-wrap의 경우 한줄에서 표현할 수 없을 경우에도 한줄로 표현하여 지정한 자식크기가 변경이 된다. wrap의 경우 한줄에서 표현할 수 없을 경우 여러줄에 걸쳐 나누어서 표현하여 자식 크기를 온전히 표현한다.

flex-direction .father { display: flex; flex-direction: row; } 부모 요소에 display: flex; 속성을 지정한 경우 자식 요소의 위치를 결정 짓는 주요 축을 결정할 수 있다. x축 또는 y축을 지정할 수 있는데 기본축은 x축이다. flex-direction row; column을 값으로 지정할 경우 자식 요소를 y축을 기준으로 배치한다.