전체 글

[CSS_study] flex-wrap, align-content, flex-flow

* flex-wrap flexbox는 width보다도, '같은 줄'에 있도록 하는 것을 우선시함 width의 크기를 깨트려서라도 오직 같은 줄에 있도록 만드는 데만 신경을 쓴다. flex-wrap의 기본값은 nowrap이다. flex-wrap: wrap; (child의 사이즈를 유지하라고 하는 것) flex-wrap: nowrap; (child를 모두 같은 줄에 정렬함, 이때 width가 줄어들 수 있음) * flex-wrap 예시코드 * flex-wrap: nowrap 1 2 3 4 5 6 7 .father { display: flex; justify-content: space-around; height: 100vh; } .child { width: 200px; height: 200px; backgro..

[CSS_study] display : flex 그리고align-self와 order

* flex box의 규칙 flexbox에서는 children과 얘기하지 않는다. box를 배치하고 class를 사용해서 box의 위치, 공간의 속성을 주어 묘사하지 않는다. flexbox에서 뭔가를 움직이고 싶을 때는 flexbox container를 만들어야한다. inline-block와 같은 결과를 얻을 수 있다. box의 부모가 flex container이다. 다른 것의 부모가 될 수 없고 바로 붙어있는 부모여야한다. 항상 붙어있는 부모(father)가 자식(children)의 위치를 움직일 수 있다. * flex의 세계에는 두 가지가 있다. row(행): 가로를 의미한다. column(열): 세로를 의미한다. * flex container의 flex-direction 기본 값은 row다. 이때 ..

[JavaScript_error] forEach is not a function (유사배열)

* 문제 JavaScript 상에서 forEach 구문을 돌렸지만 해당 에러 메시지가 뜨며 실행이 되지 않는다. "forEach is not a function" 에러 메시지 발생 * 원인 배열이 아니기 때문이다. 유사배열이기 때문이다. * 유사배열(Array-like Objects)이란? 배열이 아닌데 배열인척 하는것 유사배열은 말그대로 배열과 유사한 형태로 흉내낸 객체일 뿐이기 때문에 Array 에서 제공하는 메서드가 기본적으로 제공되지않는다. 유사배열의 조건 1. 반드시 length가 필요하다. 2. 숫자 형태의 indexing이 가능해야한다. 쉽게 말해서 * 배열 = 객체 + length + 메서드 * 유사배열 = 객체 + length 로 이해하면 된다. 예외적으로 node같은 경우는 프로토타입에..

[CSS_study] display : block, inline, inline-block

* display : block div는 기본적으로 display : blcok이다. block는 element이고 block옆에는 어떠한 element도 올 수 없다. * display : inline inline는 box가 아니다. inline는 element이다. inline는 유동적이여서 너비와 높이가 없다. 같은 직선에 있다는 말이다. (ex. text는 inline이다, text는 box가 아님) inline은 너비와 높이를 함께 쓸 수 없으며 inline을 쓰면 block(=box)의 속성을 모두 잃는다. * display : inline-block inline-block은 block의 속성을 가지고 있어서 너비와 높이가 있다. 또한 block이 서로 옆에 있을 수 있다. (참고) inlin..

[JavaScript] JavaScript를 이용한 Web crawling - 2

JavaScript를 이용하여서 Daum news Crawling하기 * 개발환경셋팅 vscode node * node package셋팅해주기 npm install --save axiox CDN을 이용하여도 된다. npm install cheerio * package에 대한 간략한 설명 axiox : http request를 조금 더 쉽게 보낼 수 있게 도와주는 패키지 cheerio : 가져온 html을 조금 더 쉽게 가공할 수 있게 해주는 패키지 // 모듈 가져오기 const axios = require('axios'); const cheerio = require('cheerio'); axios, cheerio모듈을 가져와준다. function newsCrawler() { const URL = `htt..

[JavaScript] JavaScript를 이용한 Web crawling

JavaScript를 이용하여서 멜론 TOP100 리스트 Crawling하기 * 개발환경셋팅 vscode node * node package셋팅해주기 npm install --save axiox CDN을 이용하여도 된다. npm install cheerio * package에 대한 간략한 설명 axiox : http request를 조금 더 쉽게 보낼 수 있게 도와주는 패키지 cheerio : 가져온 html을 조금 더 쉽게 가공할 수 있게 해주는 패키지 // 모듈 가져오기 const axios = require('axios'); const cheerio = require('cheerio'); axios, cheerio모듈을 가져와준다. function melonCrawler() { const URL =..