반응형 웹 디자인에서 요소의 넓이를 유동적으로 조정

반응형 웹 디자인에서 요소의 넓이를 유동적으로 조정하려면 일반적으로 CSS의 미디어 쿼리(Media Query)를 사용하여 화면 크기에 따라 스타일을 변경하는 방법을 사용합니다. 이를 활용하여 태블릿과 모바일 크기에 맞게 요소의 넓이를 조정할 수 있습니다.

다음은 예시 코드입니다:

/* 기본 스타일 */
.element {
  width: 100%; /* 초기에는 100%로 설정 */
}

/* 태블릿 사이즈 이하일 때 스타일 변경 */
@media (max-width: 768px) {
  .element {
    width: 50%; /* 태블릿 사이즈 이하일 때 넓이 조정 */
  }
}

/* 모바일 사이즈 이하일 때 스타일 변경 */
@media (max-width: 480px) {
  .element {
    width: 100%; /* 모바일 사이즈 이하일 때 넓이 조정 */
  }
}

위의 코드는 `.element`라는 요소의 넓이를 기본적으로 100%로 설정하고, 태블릿 사이즈 이하일 때 50%로 조정하며, 모바일 사이즈 이하일 때는 다시 100%로 조정하는 예시입니다. `max-width`를 조정하여 원하는 화면 크기에 맞게 스타일을 적용할 수 있습니다.