전체 글

개요reactstrap에서 className 속성을 통해 Bootstrap의 다양한 스타일을 적용할 수 있는데, 기존 템플릿 코드롤 보면서 이게 뭘까 하는게 많았는데 깔끔하게 속성들을 정리해보고 가자.1. 레이아웃이름설명container고정 폭 컨테이너container-fluid전체 너비를 차지하는 컨테이너rowFlexbox 행 생성col자동 크기 조정 열col-{size}-n특정 크기(sm, md, lg, xl, xxl)에서 n만큼 너비를 차지d-flexFlexbox 컨테이너 활성화d-inline-flex인라인 Flexbox 컨테이너d-block블록 요소 표시d-inline인라인 요소로 표시d-none숨김 처리 2, Flexbox 관련이름설명flex-row주축을 가로 방향(기본값)으로 설정flex-co..

개요프로젝트 코드를 분석하는데 Router에서부터 머리가 띵해졌다. 화면을 변경하는 건 알겠는데 도대체 어떤 원리로? 어떻게? 정리해야겠지. 1. React Router란?React Router는 React 애플리케이션에서 클라이언트 측 라우팅(Client-Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. React는 기본적으로 단일 페이지 애플리케이션(SPA, Single Page Application)이고, URL이 변경되더라도 페이지 전체를 새로고침하지 않고도 컴포넌트만 변경할 수 있도록 설계되어 있다. 여기서 React Router를 사용한다면 사용자가 특정 URL로 이동할 때 해당 URL에 맞는 컴포넌트를 렌더링한다. 1-1. React Router 필요성-> React..

개요프로젝트 템플릿 코드를 분석하면서 자꾸 flex라는 단어가 나오는데 이게 도대체 어떻게 사용하는거지 알 수가 없어서, 정리하고자 한다. 1. Flexbox란?CSS의 레이아웃을 구성하는 도구 중 하나로, 컨테이너 내부의 요소들을 효율적으로 정렬하고 배치할 수 있도록 도와준다.기존에 사용하던 float, inline-block과 같은 레이아웃 방식보다 유연성이 뛰어나고, 다양한 화면 크기에 대응하기가 쉽다.특징 1) 자동 크기 조절-> 아이템 크기가 자동으로 조정된다. 2) 반응형 레이아웃-> 다양한 화면 크기에 적용할 수 있다. 3) 간편한 정렬-> 중앙 정렬, 간격 조정 등이 쉽게 가능하다. 4) 아이템 순서 변경 가능-> HTML 구조를 변경하지 않고도 아이템 순서를 조정할 수 있다. Flexbo..

개요프론트나 안드로이드나 UI를 구성하는데 제일 까다로운게 배치나, padding, margin 같은 것들을 설정하는 것이다. 정말 세심하게 해야 기존에 기획했던 디자인에 벗어나지 않는 완벽한 플랫폼을 만들 수 있다!! 그런 의미에서 CSS에 박스 모델은 정말 중요하기 때문에 정리해야겠다. 1. 박스 모델모든 HTML 요소는 CSS에서 박스 형태로 표현되고, 이 박스 모델은 웹 페이지에서 요소가 차지하는 영역을 정의하는 개념이다. Content, Padding, Border, Margin 이렇게 네 가지 영역으로 구성되는데 하나씩 알아보자. 1-1. Content 영역-> 웹 요소가 표시하는 실제 데이터가 들어가는 부분이다.-> 텍스트, 이미지, 동영상 등의 콘텐츠가 배치되는 공간이다.-> 요소의 wid..