width 를 min() 으로 설정하기

전체 컨테이너를 설정할때 유용하게 사용할 수 있었습니다.

.container {
  width: min(1200px, 90%);
  margin: 0 auto; /* 수평 중앙 정렬 */
}

 

• 요소의 너비를 화면 크기의 90%와 1200px 중 작은 값으로 설정합니다.
• 예를 들어, 화면 크기가 1000px일 경우 요소의 너비는 900px(90%)이 됩니다. 화면 크기가 1400px일 경우 요소의 너비는 1200px로 고정됩니다.
• margin의 첫 번째 값 0: 상하 방향 여백을 0으로 설정.
• 두 번째 값 auto: 좌우 여백을 동일하게 설정해 요소를 수평 가운데 정렬.

 

body {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  min-height: 100vh; /* 화면 전체 높이 */
  margin: 0;
}

.container {
  width: min(1200px, 90%);
}