오늘 간단한 수정 사항 중 다음과 같은 요구 사항이 있었다
- input의 width를 부모요소와 동일하게 하기
- suffix인 span 태그의 자동 줄바꿈을 방지하기
두번째 문제는 첫번째 문제를 수정하고 나니 발생해서 추가로 해결했다.
문제 1
다음과 같은 마크업이 있고, 결과 화면이 아래 이미지와 같다고 하자.
원하는 모습은 input 의 width가 부모인 div 태그의 width와 같게 하고 싶다.
<head>
<style>
body * {
border: 1px solid black;
}
.input-wrap {
display: flex;
justify-content: flex-end;
width: 300px;
}
</style>
</head>
<body>
<div class="input-wrap">
<input class="input" type="text">
<span class="suffix">메소</span>
</div>
</body>
input size
기본적으로 아무 스타일을 적용하지 않은 input 태그의 사이즈는 디스플레이 크기에 따라 다르지만 지정된 폰트 사이즈 기준 10rem 정도 되는 것 같다.(정확하지는 않다)
해결 방법 1. width: 100%;
스타일을 적용하여 width 100%를 지정했다.
input 태그 자체에 프로퍼티로 사용하는 width는 px 기준이라 불가능하다.
일단 원하는대로 input의 가로 길이가 부모 요소인 div 태그에 꽉차게 맞았다.
해결 방법 2. width: inherit;
inherit 은 상속하다 라는 의미를 갖고 있다.
부모의 width 값을 상속받겠다는 뜻이다. 상세한 설명은 mdn 에서 확인이 가능하다. 이 경우 부모요소로부터 해당 속성의 계산값을 받아 사용한다.
상속되는 속성이 있고, 그렇지 않은 속성이 있으니 사용시에 주의해야 한다.
width: inherit; 를 사용해도 width: 100%; 를 사용한 것과 동일한 결과를 얻을 수 있다.
새로운 문제
input의 가로 길이가 길어지면서, 옆에 있던 span이 영향을 받아 줄바꿈이 되어버렸다.
개발자 도구에서도 보면 살짝 튀어나간것을 확인 할 수 있다.
이러한 경우 span 부분이 자동으로 줄바꿈하지 않게 수정해야 한다.
문제 2. 자동 줄바꿈 막기
white-space 를 사용하면 쉽게 줄바꿈을 설정할 수 있다.
white-space: nowrap; 를 사용하면 줄바꿈을 하지 않는다.
원래 span은 inline이라 줄바꿈을 자동으로 하지 않고 지정된 width 보다 크면 튀어 나가는데, 위에서 flex 를 해버려서 block 처럼 다뤄진다.
그래서 줄바꿈 설정을 따로 해야 하는 것!
쨘! 그럼 위 처럼 원하는 모습으로 나온다!
Reference
