input 요소를 화면에 맞게 크기를 바꾸는 기술

HTML의 <input> 요소의 글자가 화면 크기에 따라 잘리지 않도록 하기 위해 몇 가지 방법을 적용할 수 있습니다.

화면이 잘리는 현상을 보완하고 싶다는 의견이 있었습니다.

 

---

✅ 1. width: 100% 설정하기

화면 크기에 따라 자동으로 크기가 조절되도록 width: 100%을 적용하면, 부모 요소 크기에 맞게 조절됩니다.

input {
    width: 100%;
    min-width: 100px; /* 최소 너비 설정 */
    box-sizing: border-box; /* padding과 border 포함 */
}

<input type="text" placeholder="텍스트 입력" />

---

✅ 2. overflow: hidden; text-overflow: ellipsis; 사용

너비가 줄어들었을 때 너무 긴 텍스트가 생략(...)되도록 설정할 수도 있습니다.

input {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

---

✅ 3. flexbox를 활용한 자동 크기 조절

부모 요소에 display: flex;를 적용하면 창 크기에 맞춰 input 요소가 자동으로 조절됩니다.

.container {
    display: flex;
    width: 100%;
}

input {
    flex-grow: 1;
    min-width: 100px; /* 최소 너비 설정 */
}

<div class="container">
    <input type="text" placeholder="텍스트 입력" />
</div>

---

✅ 4. vw(뷰포트 너비) 사용

화면 크기에 따라 동적으로 글자 크기를 조정하면 글자가 잘리지 않습니다.

input {
    font-size: 2vw; /* 화면 너비의 2% 크기로 설정 */
    width: 100%;
}

---

✅ 5. 미디어 쿼리를 활용한 반응형 크기 조절

특정 화면 크기 이하에서 글자 크기를 자동으로 줄이는 방법입니다.

input {
    font-size: 16px;
}

@media screen and (max-width: 600px) {
    input {
        font-size: 12px;
    }
}

---

✅ 6. max-width 설정

너무 긴 input이 화면을 벗어나지 않도록 최대 너비를 설정합니다.

input {
    max-width: 90vw; /* 화면 너비의 90%까지만 확장 */
}

---

✅ 7. CSS rem 단위 사용

rem 단위를 사용하면 화면 크기에 따라 폰트 크기를 조절할 수 있습니다.

html {
    font-size: 16px; /* 기본 폰트 크기 */
}

input {
    font-size: 1rem;
}

---

✅ 8. resize 기능 추가 (textarea의 경우)

만약 textarea가 있다면 resize 속성을 사용하여 사용자가 크기를 조절할 수 있도록 설정할 수도 있습니다.

textarea {
    resize: both; /* 수직, 수평 조절 가능 */
    overflow: auto;
}

---

✅ 결론

input 요소의 텍스트가 잘리지 않도록 하기 위해서는 width: 100%, flexbox, min-width, vw/vh/rem 단위 활용, media query 적용 등의 방법을 사용하면 됩니다.

특정 상황에 맞게 조합하여 적용하면 더욱 효과적으로 반응형 디자인을 구현할 수 있습니다. 🚀