CSS로 div 사용자 크기 조정 가능하게 만들기

이 문서는 브라우저 너비 및 뷰포트 미디어 쿼리와 관련이 없습니다.

이 기사에서는 resize css 속성에 대해 설명합니다.

이것은 사용자가 실제로 텍스트 영역 상자 이외의 크기를 조정해야 할 때가 있기 때문에 최근에야 발견한 속성 중 하나입니다.

데모how the HTML <wbr> tag works 기사에서 resize 속성을 사용하여 단어가 끊어지는 경우를 표시했습니다.

이 하루가 필요할 수 있으므로 CSS resize 속성이 작동하는 방식과 옵션에 대한 예를 살펴보겠습니다.

최종 결과는 다음 GIF와 같습니다.

CSS 크기 조정 속성

옵션을 추가하려면 다음 구문을 사용할 수 있습니다.

div {
    resize: {value}
}

여기서 값은 다음 중 하나일 수 있습니다.

none : 기본값, 사용자가 요소의 크기를 조정할 수 없음

both : 가로 및 세로 크기 조정

horizontal : 가로로만 크기 조정

vertical : 세로로만 크기 조정

initial : 초기값으로 재설정

inherit : 상위 요소에서 값 상속

이를 효과적으로 만들기 위해 몇 가지 예를 만들어 보겠습니다.

알아야 할 정말 중요한 점은 기본적으로 크기 조정 코드가 아무 작업도 수행하지 않는다는 것입니다.

기본값overflow이 표시되어 크기 조정이 비활성화되기 때문입니다.

다음 오버플로 값을 사용할 수 있습니다: scroll , auto , hidden .

먼저 시작할 기본 상자를 정의해 보겠습니다.

div {
  width: 100px;
  height: 100px;
  overflow: auto;
}

이제 양방향으로 크기를 조정할 수 있는 분홍색 상자를 만들어 보겠습니다.

div.both {
  resize: both;
  background: #ef476f;
}

아마도 우리는 수평 크기 조정만 원할 것입니까? 노란색 상자를 확인하십시오.

div.horizontal {
  resize: horizontal;
  background: #ffd166;
}

수직으로도 녹색 상자를 확인하십시오.

div.vertical {
  resize: vertical;
  background: #06d6a0;
}

다음 Codepen에서 이러한 상자가 작동하는 것을 볼 수 있습니다.

CSS 크기 조정 속성 제거

크기 조정 속성을 제거하려는 경우가 한 가지 있는데, 이것은 텍스트 영역입니다.

그들은 기본 크기 조정 속성과 함께 제공되며 다음 코드를 사용하여 이 속성을 해제할 수 있습니다.

textarea {
  resize: none;
}

다음 Codepen에서 시도해 볼 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나