Front/etc
-
Input 태그 width 자동 조절Front/etc 2025. 8. 6. 00:20
input태그를 사용하다가 입력한 크기만큼 자동으로 조절이 안돼서직접 함수를 만들어서 처리하고 이것저것 해보았지만 원하는 느낌이 안나오다 찾아보니 간단하게 해결할 수 있었다. field-sizing: content 를 활용하면 input의 width값이 자동으로 조절이 된다.input { field-sizing: content; min-width: 50px; } 이처럼 해당 css만 넣어주면 알아서 input의 width값이 자동으로 적용된다.추가적으로 min-width값으로 placeholder의 크기를 고려해서 설정해준다. field-sizing 속성은 사용자가 직접 데이터를 입력하는 요소에만 적용이 되며, div나 span 같은 이런 요소에는 적용이 되지 않는다.따라서 UI컴..