혼자 적어보는 노트

SCSS는 브라우저에서 동작할 수 없기 때문에 표준 CSS로 변환을 해주어야 한다. 보통 Create React App 환경에서 SCSS를 사용했기 때문에 간단하게 설치 후 사용했지만 그냥 HTML파일만 달랑 있는 상태에서 하려니 난감했다. 물론 전역으로 node-sass 설치 후 명령어를 통해 컴파일 하는 방법도 있었지만 저장 시 바로 빌드되고 새로고침 없이 브라우저 창에서 확인하기를 원했다. webpack 설정은 조금 복잡하지만 Parcel은 간단하게 설정 할 수 있다. 1. Parcel 전역 설치 npm install -g parcel-bundler 2. Sass 설치 npm install --save-dev node-sass 3. Sass 파일 연결 4. 실행 parcel index.html

✅ 오늘의 학습 📌 CSS 심화 (3) - SCSS 변수, 데이터, 연산자 - mixin을 사용한 재활용 변수 파일 상단에 전역 변수를 사용할 수 있고 선택자에서 사용 시 지역적으로 선언되어 유효범위를 가진다. *재할당 가능 !global 지역변수에 $h:200px !global; global 플래그를 사용하여 전역화 가능 !defualt 지역변수를 지정할 때 이미 동일한 변수가 있을 경우 기본 값을 사용하겠다 라는 뜻 $primary: blue; .box { $primary: orange !default; background-color: $primary /* blue */ } 문자 보간 #{}를 사용하여 변수값을 넣을 수 있다. $name: "jay"; $path: "assets/images"; .bo..

✅ 오늘의 학습 📌 CSS 심화 (3) - Transform 3D - Columns - Filter - 변수 - @supports - @media perspective - 원근의 의미를 가지고 있으며 원근의 거리를 지정할 수 있다. 함수로 사용 함수로 사용할 경우 변환 효과가 일어나는 요소에 부여한다. .container .item{ transform: perspective(300px) rotateY(45deg); } 속성으로 사용 속성으로 이용할경우 변환 효과가 일어나는 요소의 상위요소에 부여한다. .container{ width: 150px; height: 150px; border: 4px solid; margin: 100px; perspective: 300px; } .container .item{ ..

Grid 말은 들어봤지만 직접 사용해본 적은 한 번도 없었어서 강의를 들으면서 정리를 해보기로 했다 📑 Grid의 용어 Grid Container Grid의 전체 영역 Grid Item Grid 컨테이너의 자식 요소들 Grid Track Grid의 행 또는 열 Grid cell Grid의 한 칸을 의미, 가상의 틀 Grid Line Cell을 구분하는 선 Grid Number Grid 라인의 각 번호 Grid gap Cell 사이의 간격 Grid Container Grid를 적용하는 Grid의 전체 영역으로 display: grid; 를 사용하여 설정 가능. * inline-grid 컨테이너의 특성을 inline요소로 변경 수평으로 쌓이는 구조로 변경 가능. 📌 container에서 지정할 수 있는 속성..

✅ 오늘의 학습 📌 CSS 심화 (2) - Grid 처음 접하는 grid라서 정리를 하면서 익혀야 할 듯하여 Grid 정리 포스팅을 따로 진행했다. 응용해서 활용해보고 이후에 포스팅 내용에에 추가해 볼 예정이다. ✍ 느낀 점 아직 직접 프로젝트에 적용해 본 적은 없지만 이번에 CSS 과제를 진행하며 Grid를 사용할 수 있으면 사용해 볼 예정이다. 이전에 Flex를 정리하면서 Grid도 해야지 했었는데 학습할 것들이 많아서 미뤄왔었다.. 이번 기회에 미뤄왔던 grid에 대해 조금은 알게 되었고 직접 활용해보면서 익혀볼 예정이다.

✅ 오늘의 학습 📌 CSS 심화 (1) - float - position - 쌓임맥락 - flex float 요소가 원래의 흐름으로부터 빠져나와서 텍스트와 인라인 요소와 함께 배치할 수 있게 해주는 속성이다. - 자식 요소에 float를 사용하면 부모요소의 높이가 사라져버린다. * float가 끝났음을 알려주기 위해 해제(clear) 시켜주어야 한다. - float 속성을 부여하면 자동으로 block 요소로 변경된다. float 해제 방법 - 부모에 overflow 속성 사용 overflow: hidden; - 마지막 자식 요소에 clear속성 적용 .container .item:nth-child(4){ clear: left; } - 부모요소에 clearfix 적용 * 가장 적합한 방식 .clearfix..

✅ 오늘의 학습 - 고양이 사진첩 과제 제출 과제 제출 고양이 사진첩을 보완하는 과제를 오늘 제출했다. 새로운 코드를 작성하기보다는 기존에 있던 코드들을 조금 리팩토링을 했다. state 변경 시 렌더링 최적화 isRender함수를 사용하여 조건 만족 시 렌더링을 하도록 하였는데, 객체만 탐색해서 비교하고 나머지는 전부 값을 직접 비교를 했다. import { isObject } from "./typeCheck.js"; export const isRender = (currentState, nextState) => { if (isObject(currentState)) { return compareObject(currentState, nextState); } return currentState !== nex..

✅ 오늘의 학습 - TodoList Drag&Drop Drag&Drop Drag&Drop은 이전에 미니 프로젝트에 적용해보고 스터디에서도 간단하게 진행해 본 적이 있었는데 완전히 익숙하게 다루지는 못했던 부분이라 다시 한번 상기시켰다. 이전엔 droppable을 따로 지정하지 않고 li들이 ondragover과 ondrop이벤트를 지니게 만듬으로써 drop요소를 지정했어서 이 부분에 대해 처음 알게 되었다. 개념에 대해 조금 보완할 부분이 생겨서 이전에 올렸던 Drag&Drop 이벤트 관련된 포스팅을 조금 수정했다 ✍ 느낀 점 확실히 처음에 미니프로젝트 때는 접했던 Drag&Drop은 조금 어려웠는데 두번째, 세번째 접하고 나니 많이 익숙해 진 듯한 느낌을 받았다. 시간차로 복습을 하는 것이 확실히 기억..