Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

CSS display와 position: 상자는 어떻게 흐르고 어디에 머물까

css

CSS는 움직이고 반응할 수 있습니다

css

5 CSS display와 position: 상자는 어떻게 흐르고 어디에 머물까

CSS를 배우다 보면 display와 position이 모두 요소의 ‘자리’를 정하는 것처럼 보여 쉽게 섞입니다. 카드 세 개를 가로로 놓고 싶을 때 무엇을 써야 할지, 화면 오른쪽 아래에 도움말 버튼을 붙이고 싶을 때 무엇을 써야 할지, 메뉴를 스크롤해도 위에 남기고 싶을 때 무엇을 써야 할지 망설이게 됩니다. 둘은 비슷해 보이지만 서로 다른 질문에 답합니다. display는 상자가 주변 요소와 함께 어떤 방식으로 흐를지 정하고, position은 상자가 기준점에서 어디에 놓일지 정합니다.

먼저 display는 문서의 기본 흐름을 설계합니다. 문단처럼 한 줄을 넓게 차지할지, 링크처럼 문장 안에 머물지, 여러 카드를 가로로 나란히 놓을지, 격자처럼 칸을 나눌지를 정합니다. 반면 position은 기본 흐름에서 살짝 위치를 옮기거나, 한 영역 위에 배지처럼 겹쳐 놓거나, 화면 구석에 계속 보이는 버튼을 만들 때 씁니다. 둘의 역할을 나누어 생각하면 억지로 absolute를 남발해 페이지를 맞추는 일을 피할 수 있습니다.

이 글은 모든 display와 position 값을 외우게 하려는 글이 아닙니다. ‘요소들이 서로 어떻게 함께 살아갈까’라는 문제와 ‘이 요소는 어느 기준에서 얼마나 옮길까’라는 문제를 구분하는 데 초점을 둡니다. 각각이 잘 쓰이는 장면을 떠올리면 낯선 단어들도 화면의 풍경으로 기억할 수 있습니다.

1.display와 position이 서로 다른 질문에 답하는 이유를 알아봅니다.

2.block·inline·inline-block·flex·grid가 상자의 흐름을 바꾸는 방식을 살펴봅니다.

3.static·relative·absolute·fixed·sticky가 기준점과 스크롤에 따라 어떻게 달라지는지 이해합니다.

4.카드 배치, 알림 배지, 고정 버튼, 목차처럼 실제 화면에서 고르는 방법을 정리합니다.

display는 상자가 다른 상자와 어울리는 방식을 정합니다

웹페이지의 요소들은 기본적으로 문서의 흐름을 따라 놓입니다. 제목 아래에 문단이 오고, 문단 아래에 다음 문단이 이어지는 흐름입니다. display는 한 요소가 이 흐름에서 어떤 성격의 상자가 될지 정합니다. CSS 표준은 display가 요소에서 어떤 상자가 만들어지고, 그 상자가 주변 및 자식 요소와 어떤 방식으로 배치되는지를 제어한다고 설명합니다.

가장 친숙한 대비는 block과 inline입니다. block처럼 흐르는 요소는 보통 앞뒤로 줄을 나누며 한 덩어리의 자리를 차지합니다. 문단과 제목, 큰 구역이 그렇습니다. inline처럼 흐르는 요소는 문장 안에 머물며 필요한 만큼만 자리를 차지합니다. 링크, 강조한 단어, 짧은 span이 그렇습니다. display는 ‘이 상자가 주변과 함께 한 줄을 쓸까, 문장 속에 섞일까’를 먼저 결정합니다.

flex와 grid는 그 요소 안에 든 여러 자식 상자를 어떻게 배치할지 정할 때 특히 유용합니다. 카드 묶음의 부모에 `display: flex`를 주면 카드들을 한 줄 또는 여러 줄의 유연한 흐름으로 정리할 수 있습니다. `display: grid`를 주면 행과 열을 가진 칸으로 나누어 배치할 수 있습니다. 여기서 중요한 점은 flex나 grid를 카드 하나에 거는 것이 아니라, 카드들을 품고 있는 부모 상자에 걸어 자식들의 관계를 정한다는 사실입니다.

display가 먼저 묻는 것

이 요소는 문단처럼 다음 줄을 시작해야 하나요, 문장 안에 남아야 하나요?

이 요소 안의 자식들은 세로로 자연스럽게 흐를까요, 가로로 나란히 설까요?

자식들을 행과 열의 칸으로 나눌 필요가 있나요?

이 요소는 화면에서 아예 자리를 만들지 않아야 하나요?

block과 inline은 글의 기본 리듬을 만듭니다

`display: block`은 큰 메모지를 한 장 펼치는 것과 닮았습니다. 앞에 있던 글과 뒤에 올 글이 자연스럽게 다음 줄로 이어지고, 상자는 가능한 가로 공간을 넓게 사용합니다. p, h1, div, section 같은 태그는 기본적으로 이런 리듬을 갖는 경우가 많습니다. 긴 글이 위에서 아래로 읽히는 것은 block 상자들이 차례로 자리를 양보하기 때문입니다.

`display: inline`은 문장 안에 끼워 넣는 작은 표시와 닮았습니다. 링크나 강조한 단어처럼 글자 사이에 자연스럽게 놓이고, 내용만큼의 너비를 차지합니다. 한 문장 안에서 링크를 만들 때 링크가 홀로 한 줄을 차지하지 않는 이유가 여기에 있습니다. 다만 inline 요소는 너비와 높이, 위아래 여백을 생각할 때 block 요소와 다르게 느껴질 수 있으므로, 작은 상자를 문장 안에 두면서도 크기와 여백을 더 명확히 다루고 싶다면 inline-block을 고려할 수 있습니다.

`display: inline-block`은 문장 안에 머물되, 작은 카드나 버튼처럼 하나의 단단한 상자로 다루고 싶을 때 유용합니다. 예를 들어 여러 개의 작은 태그 모양 버튼을 문장 흐름에 맞춰 나란히 두면서, 각 버튼의 padding과 너비를 조절하고 싶을 수 있습니다. inline은 문장 속 글자에 가까운 흐름이고, inline-block은 문장 속에 놓인 작은 상자에 가깝습니다.

이 세 가지를 고를 때에는 ‘무엇이 더 현대적인가’보다 내용의 흐름을 먼저 봅니다. 긴 문단과 섹션은 block의 읽기 흐름을 따르는 편이 자연스럽고, 단어와 링크는 inline에 어울립니다. 버튼이나 작은 배지처럼 단단한 모양이 필요하면서 한 줄에 나란히 놓이고 싶다면 inline-block이 한 선택이 됩니다.

flex는 자식 상자들이 줄을 맞추게 합니다

가로로 나란한 메뉴, 카드 세 장, 아이콘과 글자가 함께 있는 버튼처럼 여러 요소의 관계를 정리할 때 flex를 자주 만납니다. 부모 상자에 `display: flex`를 주면, 그 바로 안의 자식들은 서로의 크기와 남는 공간을 나누며 한 줄의 동료처럼 배치됩니다. 기본적으로 가로 방향으로 놓이지만, 줄을 세로로 바꾸거나 줄바꿈을 허용하는 등 여러 조절이 가능합니다.

예를 들어 책 세 권을 소개하는 카드 묶음을 생각해 봅니다. 세 카드를 각각 absolute로 좌표에 맞춰 놓으면 화면 폭이 달라질 때 카드가 겹치거나 밖으로 밀려날 수 있습니다. 대신 카드들을 감싼 상자에 flex를 쓰면, 부모는 ‘이 카드들은 한 줄의 동료입니다’라는 관계를 알게 됩니다. 남는 공간을 나누거나, 좁아지면 다음 줄로 넘기는 방식으로 화면 변화에 더 유연하게 대응할 수 있습니다.

flex는 모든 요소를 무조건 가로로 나열하는 마법이 아닙니다. 한 줄에 놓인 자식들 사이의 간격, 정렬, 늘어나는 비율을 다루는 도구입니다. 그러므로 flex를 쓰기 전에 먼저 ‘이 상자 안의 자식들이 서로 어떤 팀인가’를 생각하는 편이 좋습니다. 그 답이 카드 묶음, 메뉴, 버튼 내부처럼 명확하다면 flex는 아주 자연스러운 선택입니다.

grid는 행과 열이 있는 화면을 만듭니다

grid는 상자를 행과 열의 칸으로 나누어 배치하는 방법입니다. 사진 갤러리, 상품 목록, 대시보드처럼 여러 요소가 가로와 세로 방향 모두에서 질서를 가져야 할 때 잘 어울립니다. flex가 한 방향의 흐름을 먼저 정리하는 데 친하다면, grid는 처음부터 ‘몇 개의 열과 몇 개의 행으로 이 공간을 나눌까’를 생각하게 합니다.

예를 들어 화면이 넓을 때는 책 표지 카드 세 장을 한 줄에 보이고, 좁아지면 한 줄에 한 장씩 보이게 하고 싶을 수 있습니다. 카드들의 부모에 grid를 주고 열의 개수를 화면에 맞춰 바꾸면, 카드의 HTML 순서는 그대로 둔 채 화면의 칸만 새로 정리할 수 있습니다. 페이지의 본질은 같은데, 독자에게 보이는 배치가 화면에 맞게 바뀌는 CSS의 장점이 잘 드러나는 장면입니다.

grid 역시 카드 하나를 이리저리 옮기는 도구가 아니라, 카드들이 들어갈 판을 만드는 도구입니다. 각 카드가 어느 칸에 놓일지를 섬세하게 정할 수 있지만, 초심자에게는 먼저 부모가 격자라는 사실을 기억하는 것이 좋습니다. flex와 grid 모두 자식 요소들의 관계를 다루는 display의 방법이며, position처럼 한 상자를 다른 상자 위에 겹쳐 놓는 도구는 아닙니다.

`display: none`은 보이지 않는 것이 아니라 자리를 없앱니다

`display: none`은 요소를 화면에서 숨길 때 자주 보게 되는 값입니다. 하지만 단순히 투명하게 만드는 것과는 다릅니다. 이 값을 준 요소는 화면에 보이지 않을 뿐 아니라, 레이아웃을 위한 상자도 만들지 않습니다. 따라서 그 요소가 차지하던 자리도 함께 사라지고, 뒤의 내용이 앞으로 당겨집니다.

예를 들어 접혀 있는 상세 설명을 `display: none`으로 숨기면, 독자가 그 설명을 열기 전에는 페이지에서 그만큼의 빈자리도 보이지 않습니다. 반대로 요소는 보이지 않지만 원래 자리만 남기고 싶다면 다른 선택을 생각해야 합니다. 이 차이를 모르고 단지 눈에서 없애려 하면 페이지가 예상보다 크게 흔들릴 수 있습니다.

또한 중요한 정보를 무조건 display: none으로 숨기는 일은 조심해야 합니다. 화면뿐 아니라 보조 기술이 내용을 만나는 방식에도 영향을 줄 수 있기 때문입니다. 정말 지금은 보여 줄 필요가 없는 내용인지, 버튼을 누르면 다시 분명하게 열 수 있는지, 숨겨도 독자가 길을 잃지 않는지를 함께 살펴야 합니다.

position은 기본 흐름에서의 위치 관계를 정합니다

display가 상자들이 함께 흐르는 방식을 정했다면, position은 한 상자가 기본 흐름에서 어떤 기준을 가지고 놓일지 정합니다. `top`, `right`, `bottom`, `left` 같은 위치 값은 position과 함께 쓸 때 의미가 생깁니다. 이 값들은 ‘이 상자를 이 기준에서 이만큼 떨어뜨려 주세요’라고 말합니다.

기본값인 `position: static`에서는 요소가 문서의 자연스러운 흐름을 따릅니다. 제목 다음에 문단이 오고, 문단 다음에 카드가 오는 순서를 HTML이 정한 대로 보여 줍니다. 대부분의 페이지 구조는 static 상태와 flex·grid만으로도 충분히 만들 수 있습니다. position은 기본 흐름으로 만들기 어려운 특별한 관계가 있을 때 꺼내는 도구라고 생각하면 좋습니다.

position을 쓴다고 모든 요소가 갑자기 화면의 구석으로 날아가는 것은 아닙니다. relative는 원래 자리를 남겨 둔 채 살짝 움직이고, absolute는 기본 흐름에서 빠져나와 특정 기준 위에 놓이며, fixed는 화면에 고정되고, sticky는 스크롤의 어느 순간부터 붙잡힌 듯 행동합니다. 각 값은 ‘어떤 기준을 따르는가’와 ‘원래 자리를 계속 차지하는가’에서 차이가 납니다.

position을 고를 때 먼저 묻는 두 가지

이 요소는 원래 문서 흐름의 자리를 계속 남겨 두어야 하나요?

이 요소는 부모 영역, 화면 전체, 또는 스크롤 영역 가운데 무엇을 기준으로 삼아야 하나요?

relative는 원래 자리를 남긴 채 기준점이 됩니다

`position: relative`는 요소를 먼저 원래 문서 흐름에 따라 배치한 뒤, 필요하면 top이나 left 같은 값으로 살짝 옮깁니다. 중요한 점은 이 요소가 원래 차지하던 자리가 흐름 안에 남는다는 것입니다. 따라서 relative로 글을 오른쪽으로 조금 옮겨도, 뒤에 오는 요소는 그 글이 원래 있던 자리를 기준으로 배치됩니다. 너무 크게 옮기면 다른 요소와 겹칠 수 있는 이유도 여기에 있습니다.

relative는 실제로 요소를 이동시키는 것보다, 그 안의 absolute 요소를 위한 기준점을 만들 때 자주 씁니다. 카드의 오른쪽 위에 ‘새 글’ 배지를 붙이고 싶다고 생각해 봅니다. 카드에 `position: relative`를 주고, 배지에 `position: absolute; top: …; right: …;`를 주면 배지는 화면 전체가 아니라 그 카드의 오른쪽 위를 기준으로 놓입니다. 카드가 여러 개여도 각 배지는 자기 카드에 붙어 다닐 수 있습니다.

이 장면이 position의 핵심입니다. relative는 ‘나는 기본 흐름에 남아 있으면서, 내 안의 절대 위치 요소가 나를 기준으로 삼아도 좋습니다’라고 말합니다. absolute는 ‘나는 그 기준 안에서 정확한 자리에 놓이겠습니다’라고 답합니다. 둘은 종종 한 쌍으로 쓰이지만, 페이지 전체 배치를 위한 기본 도구라기보다 배지·아이콘·작은 닫기 버튼처럼 겹쳐야 하는 요소에 더 잘 어울립니다.

absolute는 기본 흐름에서 나와 기준 위에 놓입니다

`position: absolute`를 준 요소는 기본 문서 흐름에서 빠져나옵니다. 그래서 그 요소가 원래 있던 자리는 다른 요소들이 비어 있는 것으로 보고 메워 버립니다. absolute 요소는 가까운 조상 가운데 position이 static이 아닌 요소를 기준으로 삼아 top·right·bottom·left 값을 계산합니다. 그런 조상이 없다면 보통 페이지의 시작 영역을 기준으로 삼게 되어, 기대하지 않은 곳으로 이동한 것처럼 보일 수 있습니다.

그래서 카드 안의 배지처럼 부모를 기준으로 놓고 싶은 요소가 있다면, 부모에 relative를 주는 습관이 중요합니다. 예를 들어 상품 카드의 ‘품절’ 표시를 오른쪽 위에 겹치게 할 때, 카드 자체에 relative를 두지 않으면 배지는 카드가 아니라 페이지의 오른쪽 위로 달아날 수 있습니다. CSS가 틀린 것이 아니라, absolute가 참조할 기준점이 없었던 것입니다.

absolute는 겹침이 꼭 필요한 곳에서 강력합니다. 사진 위의 짧은 캡션, 카드 모서리의 배지, 작은 닫기 버튼, 지도 위의 표시가 그렇습니다. 반면 긴 본문과 여러 카드의 전체 배치를 absolute로 맞추면, 화면 크기와 글자 길이가 바뀔 때 요소들이 서로 겹치기 쉽습니다. 기본 배치는 flex와 grid에 맡기고, absolute는 ‘정말 다른 요소 위에 올라가야 하는가’를 물은 뒤 사용하는 편이 좋습니다.

fixed와 sticky는 스크롤과 맺는 관계가 다릅니다

`position: fixed`는 화면, 곧 사용자가 보고 있는 창을 기준으로 요소를 고정합니다. 오른쪽 아래의 채팅 도움말 버튼이나 화면 위에 계속 보이는 작은 알림처럼, 페이지를 아래로 스크롤해도 같은 자리에 남아야 하는 요소에 어울립니다. fixed 요소도 기본 흐름에서 빠지므로, 본문이 그 자리를 비워 주지는 않습니다. 화면 위에 겹칠 수 있다는 점을 항상 생각해야 합니다.

`position: sticky`는 처음에는 일반적인 흐름 안에 있다가, 스크롤을 하다가 정한 경계에 닿으면 붙잡힌 듯 행동합니다. 예를 들어 긴 글의 소제목이나 목차에 `position: sticky; top: 0;`을 주면, 그것이 화면의 맨 위에 닿을 때부터 스크롤 영역의 위쪽에 머물 수 있습니다. fixed처럼 처음부터 화면에 붙는 것이 아니라, 원래 있던 자리와 스크롤의 흐름을 일정 부분 존중한다는 차이가 있습니다.

sticky가 기대처럼 움직이지 않을 때는 ‘어느 스크롤 영역 안에 있는가’를 먼저 살펴보면 좋습니다. sticky는 가장 가까운 스크롤되는 상자의 경계를 기준으로 행동합니다. 또한 top처럼 어느 지점에 붙을지 알려 주는 값이 있어야 독자가 그 변화를 볼 수 있습니다. 화면 전체를 따라다녀야 하면 fixed, 긴 내용 안에서 필요한 순간에 길잡이가 되어야 하면 sticky를 떠올리면 됩니다.

position 값을 장면으로 기억하기

`static`: 기본 흐름을 그대로 따릅니다. 대부분의 요소가 여기서 시작합니다.

`relative`: 원래 자리를 남기며 조금 옮길 수 있고, absolute 자식의 기준점이 됩니다.

`absolute`: 기본 흐름에서 나와 가까운 위치 기준 위에 겹쳐 놓입니다.

`fixed`: 화면 창을 기준으로 고정되어 스크롤해도 같은 자리에 남습니다.

`sticky`: 원래 흐름에 있다가 스크롤의 특정 지점에서 해당 스크롤 영역에 붙습니다.

display와 position을 함께 쓰되, 서로 대신하게 하지 않습니다

카드 세 장을 가로로 정렬하는 일은 display의 문제입니다. 카드 묶음의 부모에 flex나 grid를 사용해 관계를 정하는 편이 좋습니다. 카드 오른쪽 위에 작은 ‘추천’ 배지를 얹는 일은 position의 문제입니다. 카드에 relative를 두고 배지에 absolute를 사용하면 됩니다. 화면의 오른쪽 아래에 언제나 남아 있는 문의 버튼은 fixed, 긴 글을 읽는 동안 위쪽에 붙어 있는 목차는 sticky가 자연스럽습니다.

이렇게 문제를 나누면 CSS가 훨씬 덜 복잡해집니다. 여러 요소의 기본 배치에는 display를 먼저 생각하고, 한 요소가 다른 요소나 화면 위에서 특별한 위치를 가져야 할 때 position을 생각합니다. position으로 정상적인 문서 흐름을 모두 고치려 하면, 화면이 작아지거나 글자가 길어질 때 쉽게 무너집니다. 반대로 모든 겹침을 flex나 grid로 해결하려 하면 의미 없는 상자가 늘어날 수 있습니다.

좋은 레이아웃은 한 화면을 픽셀 단위로 억지로 고정하는 일이 아닙니다. HTML의 읽는 순서를 지키고, 화면이 달라져도 상자들이 서로 자리를 양보하며, 정말 필요한 요소만 정확한 위치에 놓는 일입니다. display와 position의 역할을 나누어 이해하는 것은, 웹페이지가 변화 속에서도 읽기 좋은 질서를 지키게 하는 중요한 첫걸음입니다.

이 글의 핵심

display는 상자가 주변 및 자식 상자와 함께 어떤 방식으로 흐를지 정합니다.

block·inline은 글의 기본 리듬을, flex·grid는 여러 자식 요소의 관계를 정리합니다.

position은 기본 흐름에서의 기준과 위치 관계를 정하며, 전체 배치보다 겹침·고정·붙잡힘 같은 특별한 장면에 적합합니다.

relative와 absolute는 카드와 배지처럼 부모 위에 자식을 정확히 놓을 때 자주 함께 씁니다.

여러 요소의 기본 배치는 display를 먼저, 특별한 위치 관계는 position을 나중에 생각하면 좋습니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호