CSS3 지원 브라우저 중 일부는 textarea같은 엘리먼트를 웹 사용자가 사이즈를 임의로 조절할 수 있게끔 할 수 있습니다.
Safari, Chrome, Firefox에서는 임의 사이즈 조절에 관한 속성을 지원합니다. 해당 브라우저에서는 정식으로 지원하는 것이기 때문에 브라우저에 관한 특성을 입력할 필요가 없으며 textarea같은 엘리먼트에서 임의 사이즈 조절에 관한 속성을 입력하지 않아도 자동으로 사이즈를 조절할 수 있게끔 설정되므로 이를 원하지 않을 경우 해당 속성을 사용하여 조절해야 합니다.
resize 속성은 이미지처럼 textarea같은 엘리먼트의 사이즈를 임의로 조절할 수 있게 설정해줍니다. 그러나 아까도 말했듯이 resize 속성을 사용하지 않더라도 textarea같은 엘리먼트는 브라우저 자체에서 자동으로 사이즈를 조절할 수 있게끔 설정되므로 resize 속성은 주로 사이즈를 한 쪽 방향으로만 임의로 조절할 수 있게 하거나 기능을 비활성화할 때 사용됩니다.
resize 속성에서 값의 종류는 4가지가 있는데 기본값이고 모든 방향으로 조절할수 있는 both 값과 수평 방향만 조절할 수 있는 horizontal 값, 수직 방향만 조절할 수 있는 vertical 값, resize 속성을 비활성화시키는 none 값이 있습니다. 주로 resize 속성에서vertical 값과 none 값이 많이 쓰입니다.
예를 들어 textarea같은 엘리먼트의 스타일에서 resize 속성의 값을 vertical로 하였을 때 웹 사용자는 이 엘리먼트의 사이즈를 수직 방향으로만 임의로 조절할 수 있게 됩니다.
Safari, Chrome, Firefox에서는 임의 사이즈 조절에 관한 속성을 지원합니다. 해당 브라우저에서는 정식으로 지원하는 것이기 때문에 브라우저에 관한 특성을 입력할 필요가 없으며 textarea같은 엘리먼트에서 임의 사이즈 조절에 관한 속성을 입력하지 않아도 자동으로 사이즈를 조절할 수 있게끔 설정되므로 이를 원하지 않을 경우 해당 속성을 사용하여 조절해야 합니다.
resize 속성은 이미지처럼 textarea같은 엘리먼트의 사이즈를 임의로 조절할 수 있게 설정해줍니다. 그러나 아까도 말했듯이 resize 속성을 사용하지 않더라도 textarea같은 엘리먼트는 브라우저 자체에서 자동으로 사이즈를 조절할 수 있게끔 설정되므로 resize 속성은 주로 사이즈를 한 쪽 방향으로만 임의로 조절할 수 있게 하거나 기능을 비활성화할 때 사용됩니다.
resize 속성에서 값의 종류는 4가지가 있는데 기본값이고 모든 방향으로 조절할수 있는 both 값과 수평 방향만 조절할 수 있는 horizontal 값, 수직 방향만 조절할 수 있는 vertical 값, resize 속성을 비활성화시키는 none 값이 있습니다. 주로 resize 속성에서vertical 값과 none 값이 많이 쓰입니다.
.example-textarea {
border: 1px solid #CCC;
background: #FFF;
resize: vertical;
}background: #FFF;
resize: vertical;
예를 들어 textarea같은 엘리먼트의 스타일에서 resize 속성의 값을 vertical로 하였을 때 웹 사용자는 이 엘리먼트의 사이즈를 수직 방향으로만 임의로 조절할 수 있게 됩니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
