화면 배치는 "줄을 어떻게 쓰는가"에서 시작한다
CSS를 처음 수정할 때 자주 만나는 문제가 있습니다.
버튼이 왜 옆으로 붙지 않을까?
링크는 왜 한 줄에 나란히 놓일까?
이미지는 왜 글자처럼 옆에 붙을까?
가운데 정렬을 했는데 왜 카드 전체는 가운데로 오지 않을까?
이 문제들은 대부분 display와 관련이 있습니다.
display는 요소가 화면에서 어떤 방식으로 자리를 차지할지 정하는 속성입니다. 일상적인 비유로 말하면, 웹페이지 안의 요소에게 "너는 혼자 한 줄을 쓸래, 아니면 다른 요소와 한 줄을 나눠 쓸래?"라고 알려 주는 규칙입니다.
이번 장에서는 복잡한 배치 기술로 들어가기 전에, 요소가 왜 아래로 내려가거나 옆으로 붙는지부터 이해합니다. 이 감각이 생기면 메뉴, 버튼, 카드, 본문 영역을 수정할 때 훨씬 덜 헤매게 됩니다.
AI 생성 이미지
block: 한 줄을 통째로 쓰는 요소
block은 화면의 한 줄을 통째로 차지하는 방식입니다. 종이에 제목을 쓰면 그 제목 아래에 다음 문장이 내려가는 것처럼, block 요소는 자기 뒤의 요소를 다음 줄로 밀어냅니다.
대표적인 block 요소는 다음과 같습니다.
h1,h2,h3같은 제목p문단div영역 상자section구역header,footer같은 큰 구조
예를 들어 이런 HTML이 있다고 해 보겠습니다.
<h2>이번 주 추천 상품</h2>
<p>가볍게 입기 좋은 여름 셔츠를 소개합니다.</p>따로 CSS를 많이 넣지 않아도 제목과 문단은 보통 위아래로 배치됩니다. 둘 다 기본적으로 block 성격을 가지기 때문입니다.
block 요소의 중요한 특징은 두 가지입니다.
첫째, 기본적으로 가능한 가로 공간을 넓게 차지합니다. 부모 영역이 800px이면 block 요소도 대체로 그 폭을 기준으로 놓입니다.
둘째, 다음 요소가 같은 줄에 쉽게 올라오지 않습니다. 그래서 제목, 문단, 카드, 배너처럼 하나의 덩어리로 보여야 하는 요소에 잘 어울립니다.
.notice {
display: block;
background-color: #fef3c7;
padding: 16px;
}위 코드는 .notice를 한 줄짜리 안내 박스처럼 보이게 만듭니다. 안내 문구가 화면에서 독립된 영역으로 보이길 원할 때 적합합니다.
inline: 내용만큼만 자리를 쓰는 요소
inline은 내용이 차지하는 만큼만 자리를 쓰는 방식입니다. 긴 줄 안에 단어 하나를 형광펜으로 표시하는 장면을 떠올리면 됩니다. 표시된 단어는 줄 전체를 차지하지 않고, 자기 글자만큼만 공간을 씁니다.
대표적인 inline 요소는 다음과 같습니다.
a링크span짧은 강조 구간strong굵은 강조em기울임 강조
예를 들어 문장 안에 링크가 들어가면 링크만 따로 다음 줄로 내려가지 않습니다.
<p>자세한 내용은 <a href="#">이벤트 페이지</a>에서 확인하세요.</p>여기서 a는 문장 흐름 안에 자연스럽게 들어갑니다. 그래서 링크는 글자처럼 옆에 붙습니다.
inline 요소는 메뉴 링크를 만들 때도 자주 보입니다.
<a href="#">회사 소개</a>
<a href="#">서비스</a>
<a href="#">문의하기</a>이 링크들은 기본적으로 한 줄에 나란히 보일 수 있습니다. 각 링크가 자기 글자만큼만 자리를 차지하기 때문입니다.
다만 inline 요소에는 주의할 점이 있습니다. width나 height처럼 상자 크기를 직접 정하는 속성이 기대한 대로 적용되지 않을 수 있습니다. 글자 흐름 안에 있는 요소라서, 박스처럼 다루기에는 한계가 있습니다.
버튼처럼 보이는 링크를 만들 때 이 한계를 자주 만납니다.
.cta-link {
background-color: #2563eb;
color: white;
padding: 12px 20px;
border-radius: 999px;
}이렇게 해도 어느 정도 버튼처럼 보이지만, 위아래 간격이나 크기 조절이 어색할 수 있습니다. 이때 필요한 것이 inline-block입니다.
inline-block: 옆으로 서지만 박스처럼 다루기
inline-block은 inline과 block의 중간 성격입니다.
inline처럼 다른 요소와 한 줄에 나란히 설 수 있습니다.
block처럼
width,height,padding,margin을 비교적 안정적으로 다룰 수 있습니다.
비유하면, 글자처럼 줄 안에 놓이지만 작은 상자처럼 크기를 조절할 수 있는 요소입니다.
링크를 버튼처럼 꾸밀 때 자주 사용합니다.
.cta-button {
display: inline-block;
background-color: #2563eb;
color: white;
padding: 12px 20px;
border-radius: 999px;
text-decoration: none;
}여기서 핵심은 display: inline-block;입니다. 링크는 기본적으로 inline 요소지만, 이 값을 주면 버튼처럼 안정적인 안쪽 여백과 모양을 가질 수 있습니다.
이제 버튼 두 개를 나란히 둘 수도 있습니다.
<a class="cta-button" href="#">무료 상담</a>
<a class="cta-button" href="#">자료 보기</a>두 링크는 한 줄에 나란히 놓이면서도, 각각 둥근 버튼 상자처럼 보입니다.
display를 바꾸면 배치가 달라진다
같은 HTML이라도 display 값에 따라 화면은 다르게 보입니다. 메뉴 예시로 비교해 보겠습니다.
<nav class="menu">
<a href="#">홈</a>
<a href="#">상품</a>
<a href="#">리뷰</a>
<a href="#">문의</a>
</nav>먼저 링크를 block으로 만들면 어떻게 될까요?
.menu a {
display: block;
padding: 10px 0;
}각 링크가 한 줄을 차지합니다. 모바일 메뉴처럼 위에서 아래로 쌓이는 형태에 어울립니다.
반대로 inline-block을 사용하면 링크가 가로로 나란히 배치됩니다.
.menu a {
display: inline-block;
padding: 10px 14px;
text-decoration: none;
}이제 메뉴 항목은 한 줄에 옆으로 놓입니다. 각 항목은 글자처럼 나란히 서지만, padding 덕분에 클릭하기 좋은 영역을 가집니다.
이미지도 비슷하게 생각할 수 있습니다. 이미지는 기본적으로 글자 줄 안에 들어가는 성격이 있어 다른 요소와 옆으로 붙어 보일 때가 있습니다. 이미지를 혼자 한 줄에 놓고 싶다면 block으로 바꿀 수 있습니다.
.profile-image {
display: block;
width: 160px;
border-radius: 50%;
}이렇게 하면 이미지를 독립된 상자처럼 다루기 쉬워집니다.
text-align은 글자와 인라인 요소를 정렬한다
가운데 정렬을 할 때 가장 많이 떠올리는 속성은 text-align입니다.
.hero {
text-align: center;
}text-align: center;는 부모 요소 안의 글자와 inline 성격의 요소를 가운데로 정렬합니다. 여기서 부모 요소란 안쪽 요소를 감싸고 있는 바깥 상자입니다. 예를 들어 .hero 안에 제목, 설명, 버튼 링크가 들어 있다면 .hero가 부모입니다.
<section class="hero">
<h2>우리 브랜드를 소개합니다</h2>
<p>작지만 오래 쓰는 제품을 만듭니다.</p>
<a class="cta-button" href="#">자세히 보기</a>
</section>.hero {
text-align: center;
}
.cta-button {
display: inline-block;
padding: 12px 20px;
background-color: #111827;
color: white;
border-radius: 999px;
text-decoration: none;
}이 경우 제목과 문단의 글자는 가운데로 옵니다. 버튼도 inline-block이므로 글자처럼 가운데 정렬의 영향을 받습니다.
하지만 text-align에는 한계가 있습니다. block 요소 자체의 상자를 가운데로 옮기는 속성은 아닙니다.
예를 들어 카드 전체를 가운데로 보내고 싶다고 해 보겠습니다.
.card {
width: 320px;
text-align: center;
}이 코드는 카드 안의 글자를 가운데 정렬할 수는 있지만, 카드 상자 자체를 화면 가운데로 보내지는 않습니다. 카드 자체를 가운데로 보내려면 보통 margin을 사용합니다.
.card {
width: 320px;
margin: 0 auto;
}margin: 0 auto;는 위아래 바깥 여백은 0, 좌우 바깥 여백은 자동으로 나누라는 뜻입니다. 폭이 정해진 block 요소를 가운데에 놓을 때 자주 사용합니다.
width와 max-width로 본문 폭을 정돈하기
본문 영역이 너무 넓으면 읽기 어렵습니다. 모니터가 넓을수록 문장이 길게 늘어나고, 독자는 다음 줄을 찾기 힘들어집니다.
이럴 때 width와 max-width를 함께 이해하면 좋습니다.
width는 요소의 폭을 정하는 속성입니다.
.article {
width: 720px;
}이렇게 하면 .article의 폭은 720px이 됩니다. 하지만 작은 화면에서는 문제가 생길 수 있습니다. 휴대폰 화면이 390px인데 본문 폭이 720px이면 가로 스크롤이 생길 수 있습니다.
그래서 본문 영역에는 max-width를 자주 사용합니다.
.article {
max-width: 720px;
margin: 0 auto;
padding: 0 20px;
}이 코드는 이렇게 동작합니다.
화면이 넓을 때: 본문 폭은 최대 720px까지만 넓어집니다.
화면이 좁을 때: 부모 영역 안에서 자연스럽게 줄어듭니다.
margin: 0 auto;: 본문 상자를 가운데에 놓습니다.padding: 0 20px;: 작은 화면에서 글자가 화면 가장자리에 붙지 않게 합니다.
블로그 글, 회사 소개 페이지, 이용약관, 공지사항 본문처럼 글을 읽어야 하는 화면에는 이런 패턴이 잘 어울립니다.
가운데 정렬이 안 될 때 확인할 것
가운데 정렬이 안 되면 CSS가 틀렸다고 느끼기 쉽습니다. 하지만 대부분은 "무엇을 가운데로 보내려는지"가 정리되지 않아서 생기는 문제입니다.
아래 순서대로 확인해 보세요.
1. 글자를 가운데로 보내고 싶은가?
글자, 링크, inline-block 버튼을 가운데 정렬하고 싶다면 부모에 text-align: center;를 줍니다.
.hero {
text-align: center;
}2. 상자 자체를 가운데로 보내고 싶은가?
카드, 본문 영역, 배너 상자처럼 block 요소 자체를 가운데로 보내고 싶다면 폭이 필요합니다.
.card {
width: 320px;
margin: 0 auto;
}폭이 정해지지 않은 block 요소는 이미 부모의 가로 공간을 넓게 차지하고 있을 수 있습니다. 이 경우 가운데로 옮겨도 눈에 띄는 변화가 없습니다.
3. 선택한 요소가 inline인가 block인가?
a, span 같은 inline 요소는 width가 기대한 대로 적용되지 않을 수 있습니다. 버튼처럼 만들려면 display: inline-block;을 확인합니다.
.button-link {
display: inline-block;
}4. 부모 요소에 정렬을 줬는가?
text-align은 보통 정렬하고 싶은 요소 자신이 아니라, 그 요소를 감싸는 부모에 적용합니다.
.button-area {
text-align: center;
}<div class="button-area">
<a class="button-link" href="#">신청하기</a>
</div>5. 다른 CSS가 덮어쓰고 있지 않은가?
웹빌더나 템플릿에서는 이미 다른 CSS가 적용되어 있을 수 있습니다. 검사 도구에서 실제로 어떤 display, width, margin, text-align 값이 적용 중인지 확인하면 원인을 찾기 쉽습니다.
작은 실습: 회사 소개 영역 정돈하기
완성 목표는 다음과 같습니다.
회사 소개 문단은 너무 넓게 퍼지지 않는다.
전체 영역은 화면 가운데에 놓인다.
버튼은 글자 아래에서 가운데에 보인다.
버튼은 링크지만 버튼처럼 보인다.
먼저 HTML입니다.
<section class="about">
<h2>오래 쓰는 생활용품을 만듭니다</h2>
<p>
우리는 유행보다 기본에 집중합니다. 매일 손이 가는 제품을
단정한 디자인과 튼튼한 소재로 만듭니다.
</p>
<a class="about-button" href="#">브랜드 이야기 보기</a>
</section>필요한 CSS를 나누어 보겠습니다.
.about {
max-width: 680px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}.about은 전체 소개 영역입니다. max-width로 문단이 너무 길어지지 않게 하고, margin: 0 auto;로 영역을 가운데에 둡니다. text-align: center;는 안쪽 글자와 버튼을 가운데 정렬합니다.
.about h2 {
margin-bottom: 12px;
}
.about p {
line-height: 1.7;
margin-bottom: 24px;
}제목과 문단 사이, 문단과 버튼 사이에 간격을 줍니다. 배치의 기본은 위치만이 아니라 요소 사이의 거리까지 포함합니다.
.about-button {
display: inline-block;
padding: 12px 20px;
background-color: #2563eb;
color: white;
border-radius: 999px;
text-decoration: none;
}링크를 inline-block으로 바꾸면 버튼처럼 꾸미기 좋습니다. 동시에 부모의 text-align: center; 영향을 받아 가운데에 놓입니다.
수정 전후 비교
수정 전에는 이런 문제가 생기기 쉽습니다.
.about {
width: 900px;
}
.about-button {
background-color: #2563eb;
color: white;
}본문 폭이 너무 넓어질 수 있습니다.
작은 화면에서는 가로로 넘칠 수 있습니다.
버튼의 클릭 영역이 좁습니다.
링크 밑줄이 남아 버튼처럼 보이지 않을 수 있습니다.
가운데 정렬 기준이 없어 화면이 어수선해 보입니다.
수정 후에는 이렇게 정리됩니다.
.about {
max-width: 680px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
.about-button {
display: inline-block;
padding: 12px 20px;
background-color: #2563eb;
color: white;
border-radius: 999px;
text-decoration: none;
}본문이 적당한 폭 안에 머뭅니다.
영역 전체가 화면 가운데에 놓입니다.
버튼이 글자 아래에서 자연스럽게 가운데에 보입니다.
링크가 버튼처럼 안정적인 크기를 가집니다.
이번 장의 핵심은 하나입니다. 요소가 아래로 내려가거나 옆으로 붙는 이유는 대체로 display에서 시작됩니다. block, inline, inline-block의 차이를 알면 메뉴, 버튼, 이미지, 본문 영역의 기본 배치를 훨씬 차분하게 수정할 수 있습니다.
다음 장에서는 이 감각을 바탕으로 Flexbox를 배웁니다. Flexbox를 사용하면 배너의 문구는 왼쪽, 버튼은 오른쪽에 두거나 여러 요소를 세로·가로 가운데에 맞추는 일을 더 안정적으로 처리할 수 있습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.