CSS 박스 모델을 이용해서 레이아웃을 구성해보자

안녕하세요. 진득코딩입니다.

이번 시간에는 CSS 박스 모델에 대해 알아보고 이를 이용해 레이아웃을 구성하는 방법에 대해 살펴보도록 하겠습니다.

 

CSS 박스 모델

 

• CSS 박스 모델은 웹 문서의 내용을 박스 형태로 정의하는 방법입니다.
  
  
• 이 박스 모델이 모여 웹 문서를 이룹니다.
  
  
• 박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있습니다.
  
  

블록 레벨 요소

 

• 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다.
  
  
• 블록 레벨(block-level) 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킵니다.
  
  
• 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다.
  
  
• 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
  
  
• 대표적인 태그로 <h1>, <div>, <p> 등이 있습니다.
  
  

인라인 레벨 요소

 

• 인라인 레벨(inline-level) 요소는 한 줄을 차지하지 않습니다.
  
  
• 컨텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.
  
  
• 따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있습니다.
  
  
• 대표적인 태그로 <span>, <img>, <strong> 등이 있습니다.
  
  

박스 모델의 기본 구성

 

• 웹 문서의 블록 레벨 요소는 모두 박스 형태입니다.
  
  
• 스타일 시트에서는 박스 형태인 요소를 박스 모델(box model) 요소라고 합니다.
  
  
• 웹 문서 안에서 여러 요소를 원하는 위치에 배치하려면 CSS 박스 모델을 잘 알고 있어야 합니다.
  
  
• 박스 모델은 컨텐츠 영역, 박스와 컨텐츠 영역 사이의 여백인 패딩(padding), 박스의 테드리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다.
  
  
• 이때 마진이나 패딩은 웹 문서에서 다른 컨텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념입니다.

박스 모델의 기본 요소

 

width, height 속성

 

• width, height 속성은 컨텐츠 영역의 크기를 지정하는 속성입니다.
  
  
• 너비는 width, 높이는 height 속성을 사용합니다.
  
  
• width, height 속성에서 사용할 수 있는 값은 아래 표와 같습니다.
  
  

종류	설명
<크기>	너비나 높이의 값을 px나 em 단위로 지정합니다.
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정합니다.
auto	박스 모델의 너빗값과 높잇값이 컨텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다.

 

box-sizing 속성

 

• box-sizing 속성은 박스 모델의 크기를 계산할 때 사용하는 속성입니다.
  
  
• width 속성과 height 속성은 박스 모델에서 컨텐츠 주변의 여백이나 테두리를 뺀 컨텐츠 영역의 크기를 가리킵니다.
  
  
• 그래서 웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 컨텐츠 영역 외에도 컨텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 합니다.
  
  
• box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에서 선택할 수 있습니다.
  
  

종류	설명
border-box	테두리까지 포함해서 너빗값을 지정합니다.
content-box	컨텐츠 영역만 너빗값을 지정합니다. 기본값입니다.

 

• 웹 문서 레이아웃을 만들 때는 CSS에서 박스 모델을 사용하는데, 요소의 크기를 쉽게 계산하려면 box-sizing 속성을 border-box로 지정해 놓는 것이 좋습니다.
  
  
• 물론 컨텐츠 너비를 정확하게 계산해야 한다면 content-box로 지정하거나 아예 box-sizing 속성을 사용하지 않으면 됩니다.
  
  

box-shadow 속성

 

• box-shadow 속성을 사용하면 박스 모델에 그림자 효과를 줄 수 있습니다.
  
  
• box-shadow에서 그림자 위치나 색상, 흐림 정도 등을 지정하려면 다음과 같은 형태로 사용합니다.
  
  

 box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

 

• box-shadow의 속성값에서 수평 거리와 수직 거리는 반드시 지정해야 합니다.
  
  
• box-shadow의 속성값은 다음 표와 같습니다.
  
  

종류	설명
<수평 거리>	그림자가 가로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만듭니다. 필수 속성입니다.
<수직 거리>	그림자가 세로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만듭니다. 필수 속성입니다.
<흐림 정도>	이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시합니다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없습니다.
<번짐 정도>	양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시됩니다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보입니다. 기본값은 0입니다.
<색상>	한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있습니다. 기본값은 현재 검은색입니다.
inset	이 키워드를 함께 표시하면 안쪽 그림자로 그립니다.

 

테두리 스타일 지정하기

 

• 박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 합니다.
  
  
• 테두리 스타일은 점선인지 실선인지뿐만 아니라 테두리 두께와 색상을 지정할 수 있습니다.
  
  
• 또한 네 방향 모두 같은 테두리를 사용할 수도 있고 각각 다르게 사용할 수도 있습니다.
  
  

박스 모델의 방향 살펴보기

 

• 박스 모델은 상하좌우 4개의 방향이 있어서 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나, 모두 다르게 지정할 수도 있습니다.
  
  
• 박스 모델의 방향으로 맨 윗부분은 top, 아랫부분은 bottom, 그리고 왼쪽은 left라고 합니다.
  
  

박스 모델의 4개 방향

 

border-style 속성

 

• border-style 속성을 사용하여 테두리 스타일을 저장할 수 있습니다.
  
  
• border-style 속성의 기본값은 none이므로 속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다.
  
  
• 따라서 테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야 합니다.
  
  
• border-style 속성에서 사용할 수 있는 속성값은 다음 표와 같습니다.
  
  

종류	설명
none	테두리가 없습니다. 기본값입니다.
hidden	테두리를 감춥니다. 표에서 border-collapse : collapse일 경우 다른 테두리도 표시되지 않습니다.
solid	테두리를 실선으로 표시합니다.
dotted	테두리를 점선으로 표시합니다.
dashed	테두리를 짧은 직선으로 표시합니다.
double	테두리를 이중선으로 표시합니다.
groove	테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인 듯 입체 느낌이 납니다.
inset	표에서 border-collapse : seperate일 경우 전체 박스 테두리가 창에 박혀있는 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시됩니다.
outset	표에서 border-collapse : seperate일 경우 전체 박스 테두리가 창에 튀어나온 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시됩니다.
ridge	테두리를 창에서 튀어나온 것처럼 표시합니다.

 

• 만일 테두리 스타일을 4개 방향 모두 다르게 지정하고 싶다면 border-top-style, border-right-style, border-bottom-style, border-left-style처럼 border와 style 사이에 상하좌우 방향을 넣고 하이픈(-)으로 연결합니다.
  
  

border-width 속성

 

• border-width 속성을 이용하여 테두리 두께를 지정할 수 있습니다.
  
  
• 테두리 두께를 지정할 때는 크기를 직접 입력할 수도 있고 thin이나 medium, thick 같은 예약어 중에서 선택할 수도 있습니다.
  
  

 border-width: <크기> ¦ thin ¦ medium ¦ thick

 

• 만일 테두리 두께를 4개 방향 모두 다르게 지정하고 싶다면 border-top-width, border-right-width,...처럼 border와 width 사이에 상하좌우 방향을 넣고 하이픈(-)으로 연결합니다.
  
  

 1. 첫 번째 박스 스타일에는 border-width 속성값이 1개입니다. 이 경우에는 4개 방향 테두리 모두 같은 값이 적용됩니다.

 #box1 { border-width: 2px; }

 

 2. 두 번째 박스 스타일처럼 속성값이 2개라면 첫 번째 값인 thick이 위아래 (top, bottom), 테두리의 값이 되고, 두 번째 값 thin은 좌우 (left, right) 테두리의 값이 적용됩니다.

 #box2 { border-width: thick thin; }

 

 3. 세 번째 박스 스타일은 속성값이 3개입니다. 순서대로 top -> right -> bottom 속성값인데 마지막 left 속성값이 빠져 있습니다. 이때 left 속성값은 마주 보는 right 속성값과 똑같이 적용됩니다.

 #box3 { border-width: thick thin thin; }

 

 4. 네 번째 박스 스타일은 border-width 속성값 4개를 각각 다르게 지정했습니다. top -> right -> bottom -> left 순으로 적용합니다.

 #box4 { border-width: 10px 5px 5px 10px; }

 

border-color 속성

 

• border-color 속성은 박스 모델에서 테두리 색상을 지정할 수 있습니다.
  
  
• 4개의 방향의 테두리 색상을 한꺼번에 지정할 수도 있고, border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있습니다.
  
  

border 속성

 

• border 속성을 이용하여 테두리 스타일을 묶어 지정할 수 있습니다.
  
  
• 4개 방향의 테두리 스타일을 다르게 지정하고 싶다면 border-top이나 border-right처럼 속성 이름에 방향을 함께 써서 따로 지정할 수도 있고, 4개 방향의 테두리 스타일이 같다면 간단히 border 속성만 사용하면 됩니다.
  
  

border-radius 속성

 

• border-radius 속성을 사용하면 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리합니다.
  
  
• 이때 원의 반지름(radius)을 이용하면 둥근 정도를 나타낼 수 있습니다.
  
  

 border-radius: <크기> ¦ <백분율>

 

종류	설명
<크기>	반지름 크기를 px, em의 단위와 함께 수치로 표시합니다.
<백분율>	현재 요소의 크기를 기준으로 비율(%)로 지정합니다.

 

• border-radius 속성을 사용하여 이미지를 원 형태로 만들 수 있습니다.
  
  
• 이미지 요소의 너비와 높이를 똑같이 만든 후 border-radius의 반지름값을 너비나 높이의 50%로 지정하면 원이 됩니다.
  
  

꼭짓점마다 따로 둥글게 처리하기

 

• 박스 모델에서 꼭짓점 4개를 모두 다르게 지정하고 싶다면 border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용합니다.

꼭짓점을 타원으로 만들기

 

• border-radius 속성을 사용해서 타원 형태로 만들 수도 있습니다.
  
  
• 반지름 대신 타원의 가로 반지름 값과 세로 반지름 값을 넣어주는데, 이때 가로 반지름과 세로 반지름 사이에 슬래시(/)를 넣어서 구분합니다.
  
  

 border-radius: <가로 반지름> / <세로 반지름>;

 

• 그리고 특정한 꼭짓점만 타원 형태로 만들겠다면 슬래시 없이 가로 반지름과 세로 반지름을 지정합니다.
  
  

 border-위치--radius: <가로 반지름> <세로 반지름>;

 

margin 속성

 

• margin은 요소 주변의 여백을 의미합니다.
  
  
• 마진을 이용하여 요소와 요소 사이의 간격을 조절할 수 있습니다.
  
  
• 박스 모델의 4개 방향에 한번에 똑같이 지정할 수도 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있습니다.
  
  

 margin: <크기> ¦ <백분율> ¦ auto

 

• 다음 표는 margin 속성에서 사용할 수 있는 속성값을 나타냅니다.
  
  

종류	설명	예시
<크기>	너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정합니다.	margin: 50px;
<백분율>	박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정합니다.	margin: 0.1%;
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.

 

• margin 속성에서도 속성값을 하나만 지정하거나 2개, 3개 또는 4개를 지정할 수 있습니다.
  
  
• 값이 1개라면 마진값을 4개 방향 모두 똑같이 지정하지만, 값이 여러 개라면 top -> right -> bottom -> left순 (시계 방향)으로 적용됩니다.
  
  

margin 속성을 사용하여 웹 문서를 가운데 정렬하기

 

• margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 너빗값이 정해져 있어야 합니다.
  
  
• 그리고 margin-left와 margin-right의 속성값을 auto로 지정합니다.
  
  
• CSS는 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산합니다.
  
  

마진 중첩 이해하기

 

• 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)란 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 현상을 말합니다.
  
  
• 마진 중첩은 아래 마진과 위 마진이 서로 만날 때 큰 마진값으로 합쳐지는 것이고, 오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않습니다.
  
  

padding 속성

 

• 패딩(padding)이란 컨텐츠 영역과 테두리 사이의 여백을 말합니다.
  
  
• 테두리 안쪽의 여백이라고 생각하면 편하게 이해할 수 있습니다.
  
  
• 패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같습니다.
  
  
• padding 속성은 4개 방향의 마진을 한꺼번에 지정할 수도 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있습니다.
  
  

display 속성

 

• display 속성은 배치 방법을 결정하는 속성입니다.
  
  
• display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있습니다.
  
  
• 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있습니다.
  
  
• 문서 레이아웃을 만들 때 자주 사용하는 속성은 아래 표와 같습니다.
  
  

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만듭니다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만듭니다.
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있습니다.
none	해당 요소를 화면에 표시하지 않습니다.

 

 

float 속성

 

• float 속성은 왼쪽이나 오른쪽으로 배치하는 속성입니다.
  
  
• float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있습니다.
  
  
• float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다.
  
  
• 여기서 '떠 있다'는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 말합니다.
  
  
• float 속성에서 사용할 수 있는 값에는 왼쪽(left), 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다.

종류	설명
left	해당 요소를 문서의 왼쪽에 배치합니다.
right	해당 요소를 문서의 오른쪽에 배치합니다.
none	좌우 어느 쪽에도 배치하지 않습니다. 기본값입니다.

 

clear 속성

 

• clear 속성은 float 속성을 해제하는 속성입니다.
  
  
• float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달됩니다.
  
  
• 따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 clear 속성입니다.
  
  

종류	설명
left	float: left를 해제합니다.
right	float: right를 해제합니다.
both	float: left와 float: right를 해제합니다.

 

• float: left를 이용해 왼쪽으로 배치했다면 clear: left로 종료하고, float: right를 사용했다면 clear: right를 사용해 해제합니다.
  
  
• left인지 right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear: both라고 지정합니다.
  
  

display: inline-block VS float: left 속성

 

• diplay: inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float: left로 배치하면 가로로 배치될 때 요소에 기본 마진과 패딩이 없습니다.
  
  
• 그래서 필요하다면 요소마다 마진 패딩을 지정해야 합니다.
  
  
• 또한 float: left를 사용하면 clear 속성으로 플로팅을 해제해야 합니다.
  
  

웹 요소의 위치 지정하기

 

• position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있습니다.
  
  

left, right, top, bottom 속성

 

• left, right, top, bottom 속성은 웹 요소의 위치를 정하는 속성입니다.
• 웹 문서에서 요소를 원하는 곳에 갖다놓으려면 위치를 지정할 수 있어야 하는데 이때 사용하는 속성이 left, right, top, bottom입니다.
  
  
• 즉, position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 됩니다.
  
  

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정합니다.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정합니다.
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정합니다.
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정합니다.

 

position 속성

 

• position 속성을 사용하여 배치 방법을 지정할 수 있습니다.
  
  
• position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요합니다.
  
  
• 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있습니다.
  
  

종류	설명
static	문서의 흐름에 맞춰 배치합니다. 기본값입니다.
relation	위칫값을 지정할 수 있다는 점을 제외하면 static과 같습니다.
absolute	relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치합니다.
fixed	브라우저 창을 기준으로 위치를 지정해 배치합니다.

 

• position 속성 중에서 absolute 값을 사용할 때는 주의해야 합니다.
  
  
• position: absolute라고 한 후 위칫값을 지정하면 요소 중에서 position: relative를 사용한 요소를 기준으로 위치를 결정합니다.
  
  
• 만약 부모 요소 중에 없으면 상위 요소를 찾아보고, 그래도 없다면 더 위의 요소를 찾아봅니다.
  
  
• 따라서 어떤 요소에 position: absolute를 사용하려면 부모 요소에는 position: relative라고 지정해야 원하는 대로 배치할 수 있습니다.

---

 

 이번 시간에는 margin과  padding과 여러 요소들을 사용하여 CSS 박스 모델을 다루는 방법에 대해 알아보았습니다.

 이렇게 CSS 박스 모델을 잘 다루어야 원하는 위치에 원하는 요소를 위치시킬 수 있습니다.

 또한 반응형 웹 페이지를 만들 때도 자유롭게 요소들의 위치를 지정할 수 있습니다.

 이번 시간에 알아본 내용들을 잘 숙지하여 자유롭게 웹페이지를 꾸밀 수 있길 바랍니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 노력하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊