📝 성장을 위한 기록
-
[코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, FloatStudy/HTML & CSS 2019. 11. 23. 10:32
[ 브라우저에서 사용하는 좌표계 ] : 기본적으로 element는 위에서 아래로, 왼쪽에서 오른쪽으로 확장된다. 왼쪽 상단의 좌표가 (0,0) 이다. 좌표는 px 단위 또는 % 단위 등을 쓸 수 있다. 좌표계를 바탕으로 절대/상대적인 위치에 포지셔닝 할 수 있다. [ Display 요소 ] 각 요소는 고유한 크기를 가질 수 있으나, inline 요소는 컨텐츠가 차지하는 크기로 고정된다. inline block 은 width와 height를 별도로 설정할 수 있다. - 한 줄을 다 차지하는 block ex) , , ... - 컨텐츠 공간만 차지하는 inline ex) , , ... - 높이 + 넓이를 제어할 수 있는 inline-block (span 태그에 css속성으로 display : inline-bl..
-
[코드스테이츠 TIL] CSS 선택자 : CLASS, IDStudy/HTML & CSS 2019. 11. 22. 21:53
[ CSS ] Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어 CSS를 HTML에 적용하는 세가지 방법 1. inline HTML의 특정 태그에 직접 style을 적용 Hello world 2. HTML 내부에 stylesheet 작성 태그 이용하여 Hello world Contents here Here too! 3. HTML 외부에 stylesheet 작성 태그 이용 css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입 Hello world Contents here Here too! [ CSS SELECTOR ] CSS 선택자 : CSS에서 요소(element)를 선택하는 규칙 1. 각각의 ELEMENT에 고유한 ID를 부여 : #I..
-
[코드스테이츠 TIL] Fetch 서버에 요청하기Study/JavaScript 2019. 11. 14. 22:23
[ fetch ] 브라우저 내장 메소드이며, 서버에 요청하는 용도로 사용한다. 요청하는 주체: 클라이언트 요청에 따른 응답을 주는 것: 서버 일반적으로 서버에게 HTTP (URL) 요청 후, 응답을 처리한다 응답은 다양한 형태로 받을 수 있다 (JSON, HTML, plain text 등등) http 요청은 fetch API를 활용한다. //날씨 API 사용 fetch('http://서버주소/weather?q=Seoul') .then(function(resp) { return resp.json(); // 응답 형식에 따라 resp.text() 가 될 수도 있다 }) .then(function(json) { console.log(json); // { tempature: 27 } }); * 날씨 API ht..
-
[코드스테이츠 TIL] 재귀 RecursionStudy/JavaScript 2019. 11. 13. 12:08
재귀 : 함수를 스스로 호출하는 것 - 기본적으로 반복문이므로 모든 재귀는 반복문으로 표현 가능하다 - 무한 반복을 방지하기 위해 반드시 탈출 조건이 있어야 한다 //재귀 function factorial(n) { //base case : n이 0이면 재귀를 더 이상 진행하지 않는다 if(n===0){ return 1; } //recursive case return n * factorial(n-1); } //반복 function factorial(n) { let result = 1; for (let i=n; i>0; i--) { result = result * i; } return result; } 재귀의 사용 : 피보나치 수열, 돔 트리 구조 탐색 재귀의 장점 : 알고리즘이 재귀로 표현하기 자연스러울경..
-
[코드스테이츠 TIL] 비동기호출 Asynchronous Call & Callback 함수Study/JavaScript 2019. 11. 12. 12:01
[ Callback ] 콜백함수 : 다른 함수의 전달인자로 넘겨주는 함수 파라미터를 넘겨받는 함수는 콜백함수를 필요에 따라 즉시(synchronously) 실행할 수도 있고, 아니면 나중에(asynchronously) 실행할 수도 있다. 1. callback in action : 반복 실행하는 함수 iterator [1,2,3].map(funciton(el, index){ return el * el; }); 2. callback in action : 이벤트에 따른 함수 event handler document.querySelector('#btn').addEventListener('click', function(el) { console.log('button clicked'); }); ※ 콜백함수는 함수 실..