[220404_TIL] input 의 width, height 를 부모요소에 맞추기, span 태그 자동 줄바꿈 못하게 하기

5671 단어 CSSTILCSS

오늘 간단한 수정 사항 중 다음과 같은 요구 사항이 있었다

  • 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

[파이썬 개념] 문자열로 입력받아서 그래프로 만들기 - list(map(int, input()))
ArrayList 훑어보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage