display: inline-block, block

input이 full 옵션에 맞춰 부모 크기로 늘어났다가 원래 크기로 줄어드는 코드를 작성해야 했다. 그 과정에서 이해가 되지 않는 css display 개념이 있어서 정리해보았다.

 

이해가 안되는 코드

display가 왜 꼭 inline-block 이어야 동작하는지, full 옵션을 주었을 때는 왜 block으로 바뀌어야 하는지 모르겠었다.

        <div className={cx('input-container', full && 'full')}>
            <div className={cx('input-wrapper')}>
                <input
                    placeholder={placeholder}
                    className={cx(
                        'input',
                        `bg-color-${backgroundColor}`,
                        `${variant == 'outline' ? `outline-color-${outlineColor}` : null}`,
                        `${variant == 'outline' ? `outline` : null}`,
                    )}
                    onChange={onChange}
                    value={value}
                    {...restProps}
                />
                {value && clearable && (
                    <button className={cx('clearable-btn')} onClick={clearInput}>
                        <span className={`material-symbols-outlined ${cx('material-symbols-outlined')}`}>close</span>
                    </button>
                )}
            </div>
        </div>

.input-container {
    display: inline-block;
    width: auto;

    &.full {
        display: block;
        width: 100%;
    }
}

.input-wrapper {
    position: relative;
    width: 100%;
}

 

 

inline, block, inline-block의 차이

1. inline

• width, height 속성 적용 불가 (크기 조절 불가)
• 새로운 줄로 바뀌지 않음
• ex) <span>, <a> 등

2. block

• width, height 속성 적용 가능 (크기 조절 가능)
• 기본적으로 부모 요소의 전체 너비를 차지
• 새로운 줄로 바뀜
• <div>, <p>, <h1> ~ <h6> 등

3. inline-block

• inline처럼 한줄에 배치되지만 block처럼 width, height 조정 가능
• <button>, <input>, <select> 등

 

왜 inline, block이 아닌 inline-block을 사용해야 할까?

.input-container {
    display: inline-block;
    width: auto;

    &.full {
        display: block;
        width: 100%;
    }
}

 

위의 코드에서 inline-block 대신에 inline을 사용하면 화면이 원하는대로 그려지지 않는다. 먼저, 그 이유는 inline은 width, height 설정이 불가능하기 때문이다. 그래서 width: auto를 사용하여 내부 길이에 따라 width가 바뀌어야 하는데 그게 적용이 안된다.

그렇다면, block은 왜 안될까? block은 기본적으로 부모 요소의 전체 너비를 차지한다. 그래서 내부 컨텐츠 크기에 맞게 자동 조절되지 않는다. 그래서 inline-block을 사용하여 내부 컨텐츠 크기에 맞춰서 width를 조정해주어야 하는 것이다.

full 옵션에서도 block을 사용해야 하는 이유는 이미 위에서 답을 찾았다. block이 되어야 부모 요소 크기를 따라가기 때문이다.

 

*아래는 width: auto와 100%의 차이이다. 이 내용을 이해하는데 이해가 필요했다.