기로그 기로그

컨테이너 속성에 이어 아이템 속성에 대해 공부한 내용들을 정리했다. 1️⃣flex-basis flex로 설정된 컨테이너 안의 초기 아이템 크기를 설정하는데 사용된다. 길이 값(px,%등)을 사용하여 설정할 수 있다. 기본값은 auto이며 이 값은 컨텐츠 크기에 따라 결정된다. flex-direction에 따라 대상이 변한다. row:너비 column:높이 ⚠️flex-basis와 width의 차이점 원래의 width가100px이 넘지 않는 아이템은 100px이 되었고, 100px이 넘는 아이템은 그대로 크기를 유지한다. 참고로 flex-basis를 사용할 때 ,박스의 컨텐츠가 한글이거나 띄어쓰기가 있다면 자동으로 줄바꿈 된다. (flxe의 동작이 아닌 css의 동작이 그렇다고 한다.) 즉, basis는 ..

화면을 구성할 때 flex 속성을 사용하면 유연하게 아이템을 배치할 수 있다. flex는 기본적으로 컨테이너 속성과 아이템 속성 두 가지로 나눠볼 수 있다. 컨테이너 속성 1️⃣display : flex; display의 값을 flex 로 선언해주면 플렉스 박스로 만들어 줄 수 있다. 컨테이너 안의 아이템들은 화면 해상도에 맞는게 유연하게 동작하게 된다. inline-flex값도 존재하지만 거의 사용되지 않는다. 컨테이너의 아이템들이 반응형으로 동작하지 않기 때문이다. 👉🏻flex : 컨테이너가 블록 속성을 갖는다. 👉🏻inline-flex : inline-block과 같은 속성을 갖는다. flex속성을 지정하면 아이템들은 가로 방향으로 배치되고, 따로 길이를 지정하지 않으면 content만큼만 차지하..

position속성 CSS에서 요소들은 문서의 흐름에 따라 배치된다. item1 item2 item3 이러한 흐름에서 벗어나 배치를 하기 위한 속성이 존재한다. 바로 position속성이다. position속성은 요소가 어떤 위치 기준으로 배치되는지를 결정하는 위치지정 컨텍스트(positioning context)를 설정하는 옵션이다. 이 position속성의 값은 크게 5가지가 존재한다. 1.static(기본값) 기본 값으로 문서의 흐름에 따라 요소를 배치한다. top,right,bottom,left,z-index 속성을 적용할 수 없다. 2.absolute 요소를 문서 흐름에서 벗어나 가장 가까운 상위 요소 중 position값이 static이 아닌 첫 번째 요소를 기준으로 위치를 결정한다. 상위에 ..

CSS에서 요소들은 모두 박스로 인식이 된다. 박스는 Content,Padding,Border,Margin으로 구성된다. content영역에 입력한 내용이 들어가고 그 주위를 Padding,Border,Margin이 감싸고 있다. 이러한 박스(요소)들은 마진 상쇄(margin collapsing)의 영향을 받는다. 이는 margin이 겹치는 현상을 말한다. 마진 상쇄가 발생하는 조건 1.인접 형제 요소의 여백이 겹칠때 두 개 이상의 요소가 형제 관계에 있고, 상단 및 하단 마진이 서로 닿아 있는 경우, 마진이 하나로 겹쳐진다. 결합된 마진의 크기는 두 마진 중 더 큰 값으로 결정된다. 2.비어 있는 블록 내용물이 없고 패딩이나 테두리도 없는 요소의 상단 및 하단 마진은 상쇄된다. box-sizing 속성..

기본적인 CSS의 조작방법을 다룬다. CSS는 Properties(속성)와 Values(값)로 이루어진다. 이것을 선택자를 통해서 속성을 변경 할 수 있으며, 여러개의 선택자를 결합자를 이용하여 더욱 자세히 요소를 선택할 수 있게 할 수 있다. 자주 사용되는 선택자와 결합자 속성의 값에는 어떤 종류가 오는지에 대해정리. 선택자 HTML요소를 선택하고 스타일을 적용하는데 사용되는 패턴이다. 클래스,ID,속성 등을 사용하여 요소를 식별하고 선택한다. 🔎대표적인 선택자 1️⃣요소 선택자 HTML요소 이름을 사용해서 선택한다. div p h1 2️⃣클래스 선택자 HTML요소의 ‘class’속성 값을 사용하여 선택한다. ‘ . ’으로 시작한다. .container .wrap 3️⃣ID 선택자 HTML요소의 ‘ID..

자바스크립트 코드가 실행되는 과정 var x; x = 1; 이런 자바스크립트 코드가 있다. 이 코드는 자바스크립트 엔진에 의해 컴파일 되는데 이 소스 코드를 두 개의 과정으로 처리한다. 1.소스코드의 평가 실행 컨텍스트를 생성하고 변수,함수 등의 선언문만 먼저 실행 후 스코프에 등록한다.(호이스팅이 발생) 2.소스코드의 실행 평가가 끝나면 코드가 순차적으로 실행되는 런타임이 시작된다. 이때 코드는 실행에 필요한 정보(변수,함수)를 실행컨텍스트가 관리하는 스코프에서 검색한다. 즉, 실행컨텍스트(Execution Context)는 식별자를 등록하고 관리하는 스코프와 실행 순서를 관리하는 자바스크립트 내부 메커니즘이다. 실행 컨텍스트는 렉시컬 환경과 실행 컨텍스트 스택을 통해서 수행된다. 👉🏻렉시컬 환경(le..

유데미 강좌를 통해 작성하였습니다. 간단한 counter증가 예제를 통해 리덕스의 흐름을 복습. 리덕스를 사용하기 위해 라이브러리를 설치해준다. npm install redux react-redux 1.Store 생성하기 Store는 전역 상태를 저장하는 공간이다. 리덕스에서 Store는 하나만 존재해야 한다. 여러개의 스토어를 사용할 수는 있지만, 그럼 개발 도구를 활용해 상태를 추적할 수 없게 된다. store는 reducer를 인자로 받는다. 현재 createStore를 사용하면 취소선이 그어지는데, 리덕스에서 리덕스 툴킷의 configureStore를 쓰길 권장하고 있기 때문이다. 기능상의 문제는 전혀 없으니 사용해도 괜찮지만, 취소선을 없애고 싶다면.. -RTX configureStore를 사용..

[강의자료 복습] 리덕스를 사용하기 앞서 왜 필요하게 되었는지에 대한 이해와 비슷한 역할을 하는 context와 어떤 차이가 있는지를 정리 State의 세 가지 정의 State는 크게 세 가지로 정의 될 수 있다.Local stateCross-Component StateApp-Wide State 1️⃣Local State 하나의 컴포넌트 내에서 영향을 미치는 상태 2️⃣Cross-Component State 다수의 컴포넌트에 영향을 미치는 상태. props를 이용해서 컴포넌트들 간의 상태를 관리 할 수 있다. 3️⃣App-wide State 애플리케이션 모든 컴포넌트에 영향을 미치는 상태. 로그인 정보나 테마 등이 있을 수 있다. Context VS Redux 크로스-컴포넌트 상태와 앱-와이드 상태에서..