[CSS] 이미지를 정사각형 크기로 배치시키기
1. 이미지 컨테이너(div)를 생성하여 정사각형으로 만들어줌 2. 이미지를 컨테이너 내부에 위치시키기 /* html */ /* css */ div { position: relative; width: 100%; /* 가로 100% */ padding-bottom: 100%; /* 패딩으로 세로 100% 만들기 */ background-color: var(--white); /* 기본 배경색 */ } img { position: absolute; max-width: 100%; /* 최대 너비 */ max-height: 100%; /* 최대 길이 */ top: 50%; /* div 기준 세로 중간에 위치 */ left: 50%; /* div 기준 가로 중간에 위치 */ transform: translateY(..
Position static 기본값 요소를 일반적인 문서 흐름에 따라 배치 relative 요소를 일반적인 문서 흐름에 따라 배치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶다면 z-index: auto; 설정) absolute 요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간을 배정하지 않음 가장 가까운 위치 지정 조상 요소에 상대적으로 배치 (위치 지정 조상 요소는 position: static;이 아닌 요소, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준) 최종 위치는 top, right, bottom, left 값이 지정 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶..
CDD를 지원하는 도구인 Component Explorer(컴포넌트 탐색기) StoryBook 컴포넌트 탐색기의 UI 개발 도구 중 하나 컴포넌트들을 따로 볼 수 있게 구성하여 한 번에 하나의 컴포넌트에서 작업할 수 있음 특징 1. 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 시각화함 - 다양한 테스트 상태를 확인할 수 있음 - 버그를 사전에 방지 - 테스트 및 개발 속도 향상 - 의존성을 걱정하지 않고 빌드할 수 있음 2. 독립적인 개발 환경에서 실행됨 - 다양한 상황에 구애받지 않고 UI 컴포넌트를 개발할 수 있음 회사 내부에서 UI 라이브러리로 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용 주요 기능 - UI 컴포넌트를 카탈로그화 - 컴포넌트 변화를 stor..