[React.js/Next.js] card 를 반응형으로 디자인하기 (feat. width와 heigth 비율유지)
·
웹개발
width: 30vw; /* 너비는 뷰포트의 30% */ aspect-ratio: 3 / 4; /* 너비 : 높이 = 3 : 4 */를 하면 너비와 높이가 비율에 맞게 줄어들었다가 늘어납니다.
[css] position 속성
·
웹개발
position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..