LEO Devlog LEO Devlog

CDD(Component Driven Development) ✔️ 개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Storybook ✔️ UI 개발 // Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다. 재사용성을 확대하기 위해 컴포넌트를 문서화한다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다. 기본적으로 독립적인 개발환경에서 실행되기 때문에 ..

CSS Selector 셀렉터 h1 { } div { } 전체 셀렉터 * { }​ Tag 셀렉터 section, h1 {}​ ID 셀렉터 #only {}​ class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요 x) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }​ 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p {}​ 인접 형제 셀렉터 section + p {}​ 형제 셀렉터 section ~ p {..

계산기 만들면서 ... 계산기의 작동에 대한 컴퓨터의 관점에서 사고하고 코드짜기 경우의 수 대비하여 코드 짜기 CSS로는 디자인적 요소를 최대한 가져가고, 자바스크립트로는 작동에 대한 완벽한 코드를 짜야 한다 내 생각만큼 잘 나오진 않았지만, hover만 조금 건드려봤다. 디자인의 세계란...만만치 않은 것 같다 CSS의 세세한 속성들이 많기 때문에 천천히 더 보자 !

CSS CSS의 사용 목적 ---> 웹페이지의 구조의 외부와 내부를 꾸미는 역할, 스타일링을 담당 HTML 내부에 직접 CSS를 정의하는 것은 좋지 않다 id와 class? CSS의 문법 구성 CSS 간단 속성 정리 텍스트의 가운데 정렬을 하기 위한 속성 text-align: center;​ 글자 색을 바꾸기 위한 속성 color: #4a4a4a;​ 배경 색을 바꾸기 위한 속성 background: #fff;​ background 속성과 background-color 속성은 어떻게 다른가요? : background-color는 단순히 색깔 옵션만 부여한 반면, background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적..