본문 바로가기
반응형

분류 전체보기76

[CSS Rendering] CSSOM & Vendor Prefix1 CSS Rendering - 3_Box Model & Absolute Position CSS는 브라우저마다 지원 사양이 매번 다르다. 따라서 그것에 대해 vendor prefix 가 붙는 것이 대부분이다. 새로운 기능들은 vendor prefix 가 붙었다가, 안정화, 표준화가 이루어지면 vendor prefix 를 떼는 식으로 진행되는것이 관행이라 vendor perfix 처리가 까다롭다. ex) border-radius 에 vendor prefix 를 붙일 시 작동하지 않는다. CSSOM이 무엇일까? 이에대해서 깊이 이해하고자 한다면 브라우저 랜더링(정독)에 대한 이해가 반드시 따라야 할것같다. DOM(Document(HTML) Object Model) - HTML을 객체화시키어 프로그래밍 가능하게 .. 2019. 11. 3.
[JS] 2-2_reduce,_pipe,_go 함수형 프로그래밍 - 2-1_함수형으로 전환하기 reduce 만들기 function _reduce(list, iter, memo){ _each(list, function(val){ memo = iter(memo, val); }); return memo; } console.log(_reduce([1, 2, 3], add, 0)); memo(초기값) 이 설정이 되어있지 않는경우 //array like Object를 위한 함수 만들기 var slice = Araay.prototype.slice; function _rest(list, num){ return slice.call(list, num || 1 ); } function _reduce(list, iter, memo){ if( arguments.length.. 2019. 11. 1.
[JS] 함수형 프로그래밍 - 2-1_함수형으로 전환하기 함수형 프로그래밍 - 1_개요 함수형 프로그래밍의 예시 //명령형 코드 var temp_user = []; for(var i = 0 ; i = 30){ temp_user.push(user[i]); } } 위와같은 명령형 코드가 반복될 때, 함수형 코드로 전환할 수 있다. 중복을 줄이고 코드재활용도를 간단히 높일 수 있다. //2._filter, _map으로 리펙토링 // 함수형 프로그램에서 추상화의 단위는 객체나 메서드나 클래스가 아닌, '함수'의 단위이다. function _filter(list, predi){//predi는 함수임 var new_list = []; for( var i = 0 ; i < list.length ; i++).. 2019. 10. 30.
JS시계 API - flip clock을 이용한 출퇴근 관리 이 글은 앞서 종료된 프로젝트의 사용 API와 코드 정리글입니다. :-D 프로젝트 구현이 끝나가고 간단한 시계가 필요하던 차에 유투브 Online tutorials 채널에서 flip clock api를 보게되었다.단순한 시계는 굳이 이것을 사용하지 않고 javascript 만으로도 구현이 가능하고, 구글에 오픈되어있는 소스도 많지만 flip clock 은 시계 뿐만아니라 타이머, 달력 등등으로도 조정할수 있고, 디자인 역시 (이미)완성형이므로 이를 활용게되었다. ( 하지만 이는 동시에 크게 수정이 불가능하다는 뜻이기도 하다! 색상외에 상세한 UI를 변경하려 하는 즉시 배치가 깨지기 시작한다..ㅠ) - 화면의 우측 상단의 시간 카운팅 flip clock 가장 기본적인(현재 날짜로서의) 활용법은 Online.. 2019. 10. 29.
[CSS Rendering] Box Model & Absolute Position CSS Rendering - 2_고전 레이아웃 코드스피츠 유투브 강의 (고전)Box Model - 하나의 element 는 4단계의 box를 갖고있다. margin은 무조건 투명하며, 아직까지 색깔을 넣을 수 있는 기능은 없다. 투명하지만 실체를 확보하고 있는 공간이다. Border 도 외곽'선'이지만, 끝없는 영역 차지가 가능하기 때문에 하나의 property라고 볼 수 있다. 현재 Draft 중 border background 또한 줄 수 있기도 하다. Padding은 Border 과 Contents를 띄워주는 역할을 한다. Box-sizing - 박스 사이즈를 여러가지 관점에서 볼 수 있다. 기본값 : Contents-Box를 기준으로 되어있다. 하지만 padding-box(파이어폭스에서만 지원)나.. 2019. 10. 29.
[JS] 함수형 프로그래밍 - 1_개요 함수형 프로그래밍은 애플리케이션, 함수의 구성요소, 더 나아가서 언어 자체를 함수처럼 여기도록 만들고, 이러한 함수 개념을 가장 우선순위에 놓는다. 함수형 사고방식은 문제의 해결 방법을 동사(함수)들로 구성(조합)하는 것 /* 데이터(객체) 기준*/ duck.moveLeft(); duck.moveRight(); dog.moveLeft(); dog.moveRight(); /*함수 기준*/ moveLeft(dog); moveRight(duck); moveLeft({ x:5, y:2 }); moveRight(dog); // 객체 지향 프로그래밍은 데이터를 디자인하고,데이터에 맞는 method를 디자인 하는 식으로 프로그래밍. // 함수형 프로그래밍은 함수를 먼저 만들고 데이터를 넣는다. 성공적인 프로그래밍 모.. 2019. 10. 28.
[CSS Rendering] 고전 레이아웃 CSS Rendering - 1 정리 blog 코드스피츠 유투브강의-2 Float ( left, right, none, inherit) New BFC Float over normal flow text, inline guard - float는 inline 요소의 가드로 작동한다. Line Box - BFC, IFC에 따라 그려지는것이 아니라, Line Box에 따라 그려진다. New BFC - Normal Flow + Float Model See the Pen QWWgVaJ by YunJeong (@melangyun) on CodePen. 두번째 div에서 float를 지정해주는 즉시 이전까지의 BFC를 파기하고 새로운 BFC영역이 시작된다. - 새로운 BFC영역은 inline (영역)공간의 차지하는 끝까.. 2019. 10. 27.
728x90
반응형