[TIL, Html] text area 의 resize 속성

레이아웃 파괴자, 선넘는 resize 속성

textarea 태그를 사용하면 하단에
// 이렇게 표기된 사이즈 조절 아이콘이 표기된다.

해당 속성은

 #ann_title {
    height: 76px;
    resize: none;
  }

resize 속성을 none으로 지정해 없앨 수 있다.

{
resize: none; / 사용자 임의 변경 불가 /
resize: both; / 사용자 변경이 모두 가능 /
resize: horizontal; / 좌우만 가능 /
resize: vertical; / 상하만 가능 /
}

다른 속성은 이렇게 4가지가 있다.

none의 경우 방문자에게 임의 수정을 모두 불가능하도록 변경하지만 vertical의 경우 상하 변경만 가능하도록 부분 허용합니다. 일반적으로 반응형웹 페이지가 많기 때문에 좌우 width값의 변경은 Layout에 영향을 줄 수 있으므로 horizontal이 아닌 vertical이 많이 사용됩니다. 또한 사용자의 시아에서도 입력된 텍스트가 세로로 길어지는 것이 좌우로 길어지는 것보다 인지하기 더 쉽고 편하겠죠.

출처 : https://webisfree.com/2014-01-25/[css]-textarea-%EC%82%AC%EC%9D%B4%EC%A6%88-%ED%81%AC%EA%B8%B0-%EC%88%98%EC%A0%95-%EB%AA%BB%ED%95%98%EA%B2%8C-%EB%B3%80%EA%B2%BD-resize