[CSS] Display

우리가 HTML 문서에 <div> 박스 3개를 연달아 코딩하고 결과를 확인해 보면, 신기하게도 세 박스가 나란히 옆으로 붙지 않고 층층이 위아래로 쌓여 있는 모습을 보게 됩니다. 반대로 <a> 태그나 <span> 태그를 여러 개 쓰면, 이번에는 위아래로 쌓이지 않고 글씨처럼 좌우로 길게 나열됩니다. 대체 브라우저 안에서는 무슨 보이지 않는 룰(Rule)이 존재하길래 어떤 녀석은 줄 바꿈을 일으키고 어떤 녀석은 가로로 붙어 버리는 걸까요? 이 모든 마법 같은 배치를 결정짓는 절대적인 단 하나의 CSS 속성, 그것이 바로 'Display' 속성입니다. display 속성을 완벽하게 장악하지 못하면, 버튼에 패딩(Padding)을 주었는데 위아래로 겹쳐버린다거나, 폭(Width)을 지정했는데 아무런 반응이 없는 등 수많은 기괴한 버그들을 해결하지 못한 채 구글링만 반복하게 됩니다.

이번 06단계 포스팅에서는 웹 브라우저가 화면에 요소를 배치하는 'Normal Flow(일반 흐름)'의 양대 산맥인 Block과 Inline의 DNA 구조적 차이, 그리고 둘의 장점만 악마처럼 섞어놓은 Inline-block 하이브리드, 마지막으로 화면에서 요소를 완벽하게 증발시키는 display: none의 이면까지 다뤄보겠습니다.

1. 공간 독재자: Block 레벨 요소의 횡포

우리가 흔히 쓰는 <div>, <p>, <h1> 태그들은 날 때부터 display: block이라는 유전자를 가지고 태어납니다. Block 요소의 가장 큰 특징은 극단적인 '가로 공간 독식(Monopoly)'입니다. Block 요소는 자신의 내용물(텍스트)이 한 글자뿐이라도, 자신이 속한 부모 컨테이너의 가로 넓이(Width) 100%를 무조건 강제로 밀고 나가서 차지해 버립니다.

그 결과, 그 옆에는 다른 어떤 요소도 존재할 수 없게 되어 자연스럽게 '강제 줄 바꿈(Line Break)'이 발생합니다. 이것이 바로 우리가 <div>를 여러 개 쓰면 세로로 층층이 쌓이는 벽돌집 레이아웃이 만들어지는 이유입니다. 공간을 확실하게 차지하는 특성 덕분에, width, height, margin, padding 속성 4가지가 동서남북 사방으로 완벽하게 제어된다는 압도적인 장점을 가집니다. 페이지의 뼈대나 큰 구역을 나눌 때는 무조건 Block 요소를 사용해야 합니다.

2. 유연한 물줄기: Inline 레벨 요소의 한계

반면 <span>, <a>, <strong> 태그들은 display: inline 유전자를 가지고 있습니다. Inline은 문자 그대로 '문장 안의 한 줄'처럼 행동합니다. 자신이 품고 있는 알맹이(텍스트 내용물)의 크기만큼만 최소한의 공간을 차지하며, 공간이 허락하는 한 옆에 있는 다른 Inline 요소들과 사이좋게 좌우로 찰싹 달라붙습니다. 만약 브라우저 끝에 도달하면 자연스럽게 다음 줄로 흐르듯(Flow) 줄 바꿈이 일어납니다.

🚨 주니어 개발자를 울리는 Inline의 치명적 함정

Inline 요소는 태생적으로 문서의 '글씨(Text)'를 꾸미기 위해 만들어진 녀석입니다. 박스 레이아웃을 잡기 위한 용도가 아닙니다. 그래서 Inline 요소에는 width와 height를 아무리 숫자로 때려 넣어도 브라우저가 철저하게 무시해 버립니다. 더 환장할 노릇은 margin과 padding입니다. 좌우 여백은 정상적으로 옆 요소를 밀어내며 작동하지만, 위아래(Top, Bottom) 여백은 시각적으로 색칠만 될 뿐, 위아래에 있는 다른 줄의 요소들을 물리적으로 밀어내지 못하고 글씨 위에 겹쳐버리는(Overlap) 끔찍한 사태를 유발합니다. <a> 태그로 링크 버튼을 만들었는데 윗단락 글씨를 파먹고 올라간다면, 100% Inline의 특성을 간과한 것입니다.

돌연변이의 탄생 Inline-block - 본질은 글씨용

<a>

<a> 태그지만, 강제로 display: inline-block을 주입하여 좌우로 나란히 배치되는 Inline의 성질을 유지하면서도 width, height, margin-top이 주변 요소를 완벽히 밀어내는 Block의 물리적 성질까지 획득한 하이브리드 버튼의 모습

3. 두 세계의 융합: 하이브리드 Inline-block

"Block처럼 가로세로 크기와 마진을 내 마음대로 픽셀 단위로 통제하고 싶어! 그런데 Inline처럼 옆으로 나란히 배치됐으면 좋겠어!" 이 인간의 끝없는 욕심을 채워주기 위해 탄생한 변종 돌연변이가 바로 display: inline-block입니다.

실무에서 가장 많이 쓰이는 곳은 바로 네비게이션 메뉴(GNB)의 버튼들이나 페이지네이션(1, 2, 3...) 번호 버튼입니다. 기본적으로 <a> 태그나 <li>를 사용하여 가로로 나란히(Inline) 배치한 뒤, inline-block 속성을 덮어씌워 padding: 10px 20px; 같은 쿠션을 빵빵하게 주어 클릭하기 편한 통통한 버튼으로 변신시키는 것이 프론트엔드 퍼블리싱의 가장 기초적이고 완벽한 패턴입니다.

4. 화면에서 삭제하기: display: none vs visibility: hidden

모달 팝업창이나 드롭다운 메뉴를 만들 때, 우리는 평소에는 화면에 박스를 숨겨두었다가 클릭 시 나타나게 해야 합니다. 이때 사용되는 두 속성은 결과는 같아 보이지만 구조적으로는 천지차이입니다.

• display: none: 요소를 브라우저의 화면 렌더링 트리(Render Tree)에서 흔적도 없이 완전히 뜯어내어 삭제해 버립니다. 당연히 요소가 차지하던 공간(박스 크기)도 소멸되어 주변 요소들이 그 자리를 메꾸기 위해 땡겨져 옵니다. 시각 장애인을 위한 스크린 리더기도 이 요소를 읽지 못하고 완전히 무시합니다.
• visibility: hidden: 요소를 투명 인간으로 만듭니다. 눈에는 보이지 않지만, 브라우저는 그 요소가 차지하던 가로세로 부피(공간)를 그대로 유지하여 화면에 빈 구멍(여백)을 남겨둡니다. 스크린 리더기도 투명 인간이 된 요소의 텍스트 내용을 정상적으로 읽어냅니다. 접근성을 유지해야 하거나 공간 레이아웃이 무너지는 것을 막아야 할 때 전략적으로 사용합니다.

정리하며

이번 06단계 포스팅에서는 화면에 요소를 배치하는 가장 기초적인 룰, Block과 Inline의 차이점을 파헤쳐 보았습니다. 내가 쓴 코드가 почему 옆으로 안 붙는지, 왜 높이 값이 안 먹히는지 며칠 밤낮을 새워 고민하던 주니어 시절의 의문이 이 display 속성 하나로 명쾌하게 해소되었을 것입니다. 그런데 지금까지 우리가 배운 이 'Normal Flow(일반 흐름)'는 위에서 아래로 순서대로 차곡차곡 쌓이는 중력의 법칙을 철저히 따릅니다. 만약 쇼핑몰의 우측 하단에 '최상단으로 가기(Top)' 버튼을 스크롤과 무관하게 허공에 계속 둥둥 띄워놓고 싶다면 어떻게 해야 할까요? 브라우저의 중력(Normal Flow)을 거스르고 요소를 3차원 공간으로 뜯어내는 강력한 마법, 다음 07단계 포스팅에서는 프론트엔드 공간 지배술의 핵심인 "CSS Positioning: relative, absolute, fixed, sticky의 완벽한 해부"에 대해 상세히 자세히 알아보겠습니다.