Bibidi

* 새로운 CSS Spec을 배울 땐 해당 Spec 앞단에 깔린 모든 Spec을 한 번에 배운다는 마음가짐으로 들어가야 된다. level 4 이상의 module들은 모두 이러한 접근법을 이용해야 한다. * 이론들이 나오면 논리에 맞게, 이치에 맞게, 순서에 맞게, 구조적이고 체계적으로 설명할 수 있도록 트레이닝 해야 한다. CSS의 display는 표시한다는 의미의 display가 아니라 layout이라고 이해해야 한다. CSS에서 기본적으로 geometry를 구성할 때 사용하는 알고리즘을 결정한다. 현재 geometry를 계산하는 공식을 넣어주는 방법은 display와 position밖에 없다. [ Display Group ] 1. display에서 많은 layout을 결정하기 때문에 굉장히 많은 sp..

[ Semantic Web ] semantic web에서 어떻게 CSS를 어떻게 쿼리처럼 쓰는가에 대한 문제 Semantic Web : 의미론적 웹. HTML 태그를 화면에 보이는 요소를 구성하기 위해서가 아니라 하나의 문서로서 의미를 갖도록 tagging하자는 개념, 철학. HTML은 의미론적으로 작성하고 화면에 보이는 모양만 CSS로 조정하는 전략을 사용함. 검색 엔진이 HTML 문서를 읽어들였을 때 마치 데이터베이스처럼 문서로부터 유의미한 것들을 추출해서 다양한 검색 결과를 만들어내게끔 머신에 친화적인 문서를 만들자. 하나의 문서를 데이터베이스처럼 잘 조직화해서 필요한 속성들을 잘 넣어가지고 필요한 태그를 잘 만들어가자. 이걸 지키기 위해선 줄을 나누기 위해 div나 p 태그를 함부로 쓰는 것을 허..

[ Post Process ] 복습 1. graphics pipeline에 대해 2가지 배웠다. Geometry Calcuation, Fragment fill이다. 2. reflow 비용은 크다. geometry가 변했으므로 모두 repaint 해야 하기 때문이다. Post Process는 graphics pipeline에 추가된 것으로 geometry 계산과 fragment가 끝났을 때 바로 그리지 않고 한 번 더 가공할 수 있는 기회를 주는 것이다. 계산해서 바로 그래픽 비트맵에 쓰는 것이 아니라 이걸 메모리에 떠놓고서 메모리 안에서 조작한 이후에 그림을 그리도록 하는 것. 이러려면 버퍼가 있어야 한다. 예전에는 그림을 그리면 CPU pipeline을 타고 바로 그려졌다. 지금은 그림을 GPU가 그린..

[ CSSOM ] CSS는 스펙이 난잡하다보니 브라우저마다 지원 성향이 극적으로 변한다. 그래서 새로운 기능은 vendor prefix가 붙었다가 안정화되고 표준화되면 떼는 식으로 하는 게 업계 관행이다. 어떤 식에는 vendor prefix를 붙여야 작동하고 어떤 식에는 또 vendor prefix를 떼야 작동해서 까다롭다. DOM(Document Object Model) 이때 document는 HTML을 말한다. HJTML을 객체화 시켜서 프로그래밍 가능하게 바꿔놓은 게 DOM이다. javascript를 통해서 DOM API를 이용하면 직접 HTML을 수정하지 않고 요소나 속성을 고칠 수 있다. CSSOM CSS를 object화 시켜서 모델링한 것으로 javascript를 통해 CSS 조작할 수 있게..

[ 고전 Box Model ] CSS layout box라는 시스템 안에 들어가는 모든 element들이 지켜야하는 박스 규격을 Box Model이라고 한다. 다음과 같이 구성돼 있다. - margin : 무조건 투명하게 되어있고 이걸 바꿀 방법은 지금은 없다. 투명하지만 실체를 확보하고 있는 공간이다. - border : 외곽선을 칠하는 경계면이다. 이 부분도 contents처럼 쓸 수 있다. 현재 나오는 스펙들을 보면 border background도 있다. - padding : 투명하다. border로부터 contents box를 띄어주는 역할을 한다. 내부 마진이라고도 부른다. - contents - box-sizing : box의 width, height 기준을 정하는 속성이다. border-b..

[ Graphics System 제공 방식 ] 그래픽스는 점을 찍는 과정이라 볼 수 있으며 x, y, width, height, color를 이용해 표현할 수 있다. - FIXED NUMBER : 고징된 숫자를 이용하여 표현하는 체계. 그래픽스 시스템의 가장 원시적인 형태. 문제 : 환경에 적응할 수가 없다는 문제가 있다. 특히 screen size, chrome size, hierarchy가 문제가 된다. screen size를 예를 들면 전용 해상도를 가지고 있는 기기에 전용 프로그램을 만들 땐 문제가 아니었으나 범용성 있는 그래픽스 시스템을 만들려고 할 때 문제가 된다. - ABSTRACT CALCULATOR : 추상화되어 있는 계산기를 사용하는 체계. 함수를 통해 어떻게 계산할지 기술하는 방식이다..

* 리액트 개발 관련 : https://medium.com/@mr.november11/react-%EB%B2%88%EC%97%AD-2020%EB%85%84-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A1%9C%EB%93%9C%EB%A7%B5-%EB%AA%A8%EB%8D%98-%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EA%B0%80%EC%9D%B4%EB%93%9C-bedd9a0fed2f & https://geniee.tistory.com/9 * opt..