상황
아래 두 이미지를 보자. 수정 버튼을 누르면, 가운데 구역에 input 박스가 생성되면서 내용을 수정할 수 있는 기능이다.
아쉬운 것은 가운데 구역의 높이가 확연한 차이가 생긴다는 것이다. 어떻게 하면 큰 차이가 없이 input 박스로 전환할 수 있을까 고민했다.
해결 후 또 다른 문제
min-height 를 사용했다. 해당 기능을 사용하여, input 박스가 작아도 박스의 높이가 줄어들지 않도록 유지했다.
그랬더니 한 가지 문제가 또 발생했다. 바로 input 박스에 텍스트가 가운데 높이에 생성되고 줄바꿈 없이 한 줄에 글씨가 모두 써져서 박스를 넘어가는 것이다.
해결
구글링을 해보니, textarea 라는 html 태그가 있었다.
input 태그 대신 textarea 태그를 이용해서 다음과 같이 해결했다!!
사담
이미지를 보다보면 'border-radius 가 박스마다 들어갔네?' 라고 생각할 수 있다.
그렇게 한 이유는 개인적으로 더 부드러워 보였기 때문도 있지만, 최근 어플리케이션의 UI 변화를 확인해보면 border-radius 를 적용한 것 같은 UI 가 많다고 생각이 들어서 border-radius 를 사용했다.
다음은 내가 자주 사용하는 앱에서 확인했던 border-radius 가 들어간 UI 이다.
jaekim