본문 바로가기

CSS311

코로나확진자 웹사이트 최근 업데이트 시간 크롤링(worldometers.info/coronavirus) 코로나 확진자 수를 가져오는 여러 가지 방법이 있다. 뉴스를 통해 확인하는 방법, 특정 사이트에 가서 가져오는 방법 등이 있을 것이다. 이번 글은 www.worldometers.info 에서 제공하는 coronavirus 정보가 언제 업데이트되었는지 그 시간을 가져오는 코드를 작성해 보려고 한다. 방법은 간단하다. 사이트를 분석해서 어떻게 정보를 가져올지 분석한 후 파이썬을 이용해서 크롤링 코드를 작성하면 된다. 사이트 분석은 크롬의 개발자 도구를 이용하며 파이썬 개발환경은 구글의 코랩을 이용하면 빠르게 개발할 수 있다. 사이트 분석은 정적인 웹사이트인지 아니면 동적인 웹사이트인지 구분하고 그에 따라 사용하는 도구를 바꾸면 크롤링이 완료된다. 이번 예시를 통해서 그림을 그려보도록 하자. 아래 사진은 사이.. 2020. 5. 3.
박스 모델 박스 모델은 아래 그림으로 표현할 수 있다. 왼쪽에 있는 박스를 박스1, 오른쪽에 있는 박스를 박스2라고 하겠다. 박스에 대한 설명 1. 빨간색 부분이 content가 들어갈 부분이다. width, height는 빨간색 사각형의 가로 세로 길이이다. 2. 주황색 선은 content와 border의 중간에 위치한다. {border: 1px solid}와 같이 적용하면 보이는 것이 박스의 가장 외측에 있는 테두리선(border)이다. 주황색 선은 빨간색 영역과 테두리선 사이의 여유 공간이며 padding이라고 부른다. border를 100px로 설정하여도 빨간색 부분은 바뀌지 않는다. 노란색 선에 대한 설명 노란색 선은 박스와 박스 사이에 위치한 선이다. 이것이 바로 margin이다. 박스1의 margin이.. 2020. 5. 3.
Inline element vs Block element 비교 요소는 기본값으로 display속성이 inline 아니면 block 이다. 이는 css3의 display 속성인데 default로 inline아니면 block으로 설정되어있다. 기능적인 관점이나 종류 별로 볼 수도 있지만 레이아웃 배치에서 중요한 것은 사용하려는 요소가 인라인/블락 중 어디에 속하는지 파악하는 것이다. 다만, css의 dispaly 속성을 변경하여 inline, block을 전환할 수 있다. 인라인은 가로로 배치가 되며 해당 태그가 사용하는 부분만큼만 공간을 차지한다. 그래서인지 margin, padding과 같은 값들이 수직으로는 사용이 안된다. 또한, width, height를 지정할 수 없다. width, height 모두 사용하는 만큼만 차지한다. 블락은 세로로 배치가 되며 사용하.. 2020. 5. 2.