개인 프로젝트 진행 중에.. Button 클릭 후에 Modal이 위 화면에 생성되면서 Modal UI 제외 부분은 Blur 처리를 하려고 했다.  코드를 아래와 같이 작성하고나서 저장하니,띠링?어떻게 이렇게 되지? 신기해서 다른 스타일 코드를 마구 보며, 원인을 찾기 시작했다.레이아웃과 요소 배치 방식과 관련된 속성인 position, display에 원인이 있지 않을까? 생각하고 관련 속성 코드들은 // 주석처리를 하며 확인해보았다. 그 결과, position: relative 부분에 원인이 있었다. CSS의 속성들을 별도로 공부하고 React를 했던게 아니었기에 요소의 정확한 개념과 활용 방식을 숙지해야함을 다짐하고 이유를 찾아보았다.블러 처리된 배경 위에서 position: relative로 설정한..

flex-shrink - flex-item의 요소값을 설정하는 속성 - 사용하는 경우 : 부모 컨테이너 크기보다 클 때 (=공간 부족) - flex-shrink : 0 => 부모 컨테이너의 크기가 줄어들어도 해당 요소는 줄어들지 않는다. - 숫자가 커질수록 더 줄어든다. flex-wrap - flex-item의 요소들을 정렬하는 속성 - 사용하는 경우: 줄바꿈을 하고 싶을 때 - no wrap : default - wrap : 아래 방향으로 여러 줄로 나눈다. - wrap-reverse : 위 방향으로 여러 줄로 나눈다. justify-content - 요소들 사이와 주 공간을 나누는 속성 - space-between : 요소들 간 간격을 균일하게 만든다. - space-around : 요소들의 둘레 간..