포트폴리오 템플릿 프로젝트를 진행하던 중, 사용자가 입력한 정보를 실제로 만들어질 화면과 같은 크기로 보여줘야 하는 상황이 발생하였습니다.
Input을 통해 사용자가 정보를 템플릿에 정보를 입력하게 되는데, Input은 고정된 width값을 가지기에 동일하게 보여주지 못하는 에러가 발생하여 이 문제를 해결하기 위해 adjust기능을 가진 Input을 만들어 보았습니다.
첫번째 방법
첫번째로 시도한 방법은 css의 ch단위를 이용한 방법입니다. ch는 숫자 0의 넓이값을 기준으로 계산되는 단위입니다.
이 단위를 활용해, Input에 입력된 문자의 길이를 저장하여 저장된 길이만큼 Input에 width를 할당하는 방법입니다.
이 방법으로 글자수에 따른 상대적 넓이를 지정할 수 있습니다만, 결과적으로 이 방법은 동작은 하나 정상적으로 동작하지 않았습니다.
그 이유는 0의 넓이를 기준으로 하고 있는 만큼, 다른 문자와 0의 넓이가 다르기에 오차가 발생하였고, 특히 한글은 그 오차가 더 크게 발생하였습니다.
두번째 방법
두번째 방법은, 또 하나의 요소를 만든 후, 그 요소의 넓이를 측정해 Input에 똑같은 넓이를 할당하는 방법 입니다.
이 방법을 사용하면 요소의 넓이를 일정하게 컨트롤할 수 있게 됩니다.
Input과 같은 길이를 가지는 요소를 생성해 해당 요소의 visibility를 hidden으로, height를 0으로 설정해 요소가 안보이게 설정해주었습니다.
그러나, 요소는 실제로 존제하기에 aria-hidden을 통해 스크린 리더에 인식되지 않도록 설정해주었습니다.
