html512 html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교) 두 가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻어낼 수 있다. 그러면 둘을 결정하는 기준은 무엇일까? 답은 html과 css의 기본에 있다. html 태그들은 웹 페이지를 구성하는 작은 부분들이다. 따라서, 사용할 이미지가 컨텐츠로 의미를 갖는다면 img태그를 사용하면 된다. 그것이 아니라 디자인적인 필요에 의해 background-image로 사용하면 될 것이다. 프론트엔드 개발 중에 위와 같은 대체 기능이 보이고 고르는 것이 헷갈릴 수 있다. html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있을 것이다. 2020. 5. 5. css3 박스 모델의 통찰(css3 box model insight) 이전까지 태그는 box element 이거나 inline element임을 공부하였다. 두 종류의 css 속성 값에 대한 정리를 하면 다음과 같다. block element: width, height, padding, margin, border를 가질 수 있다. inline element: width, height을 적어도 적용되지 않음. padding, margin은 적어도 좌우만 적용됨. border는 가질 수 있음. 실제로 inline element에다가 5가지 속성 값을 변경해가면서 적용해보고 인접 박스와 어떻게 배치가 되는지 보면 쉽게 이해할 수 있다. a태그와 같은 경우 클릭을 할 수 있는 공간을 크게 하기 위해 상하 패딩이나, 마진을 주고 싶은 경우가 생긴다. 이 때는 inline-block.. 2020. 5. 4. css 셀렉터 기본설명(css3 selector basic) selector {(property : value;)+ }에서 selector 부분을 살펴보도록 한다. 우리는 앞으로 ".class > #id + p ~ div" 와 같은 selector를 보고 어떤 것을 의미하는지 이해하면 되는 것이다. .class, #id, p, div가 들어가는 부분은 uni_selector라 지칭하고 >, +, ~ 와 같은 것을 op라고 지칭하도록 하겠다. 앞으로 css 문법을 보고 이해가 안 된다면 uni_selector를 모르거나 op를 모르는 것이라 보면 될 것이다. 추가 문법 등은 이 구조 하에서 추가하면 될 것이다. manual을 보지 않고 임의로 정한 방식이니 우선 이 글을 통해 이해하고 매뉴얼을 통해 정리하는 것을 추천한다. 개인적으로 간단히 정리해보면 selecto.. 2020. 5. 3. 코로나확진자 웹사이트 최근 업데이트 시간 크롤링(worldometers.info/coronavirus) 코로나 확진자 수를 가져오는 여러 가지 방법이 있다. 뉴스를 통해 확인하는 방법, 특정 사이트에 가서 가져오는 방법 등이 있을 것이다. 이번 글은 www.worldometers.info 에서 제공하는 coronavirus 정보가 언제 업데이트되었는지 그 시간을 가져오는 코드를 작성해 보려고 한다. 방법은 간단하다. 사이트를 분석해서 어떻게 정보를 가져올지 분석한 후 파이썬을 이용해서 크롤링 코드를 작성하면 된다. 사이트 분석은 크롬의 개발자 도구를 이용하며 파이썬 개발환경은 구글의 코랩을 이용하면 빠르게 개발할 수 있다. 사이트 분석은 정적인 웹사이트인지 아니면 동적인 웹사이트인지 구분하고 그에 따라 사용하는 도구를 바꾸면 크롤링이 완료된다. 이번 예시를 통해서 그림을 그려보도록 하자. 아래 사진은 사이.. 2020. 5. 3. 이전 1 2 3 다음
