CSS Box Model

CSS의 박스 모델이란 무엇인지 알아보자.

CSS Box Model?

CSS의 Box Model은 웹 페이지 레이아웃의 근간을 이루는 중요한 개념이라고 할 수 있다.
모든 HTML 요소는 하나의 '상자'와 같이 취급되고, 이런 수많은 상자들이 모여 웹 페이지가 된다.

여기서 말하는 상자는 그저 하나의 네모가 아니며, 여러가지 값으로 구성된다.

요소 (element)

가장 안쪽에 자리하는 콘텐츠 영역으로, 텍스트나 사진 등을 말한다.

패딩 (padding)

요소를 감싸는 주변 영역으로, 내부 여백이라고 할 수 있다.

테두리 (border)

패딩을 감싸는 테두리를 말한다.

마진 (margin)

테두리 밖의 영역으로, 외부 여백이라고 할 수 있다.

Box Model 스타일 속성

위의 박스 모델 값을 설정하기 위한 스타일 속성을 알아보자.

width

요소의 너비를 설정한다.
기본적으로는 요소(element)의 너비를 말하지만, box-sizing 속성을 사용하여 너비 기준을 바꿀 수 있다.

auto

기본값으로, 브자우저가 계산을 하여 지정한다.
일반적으로 부모 요소의 크기를 가득 채운다.

p {
  width: auto;
}

min-content

콘텐츠가 넘치지 않는 선에서 요소가 가질 수 있는 최소 너비이다.
줄바꿈이 가능한 지점을 기준으로 가장 압축된 너비를 찾으며,가장 긴 단어의 너비에 맞춰진다.

p {
  width: min-content;
}

max-content

콘텐츠가 차지할 수 있는 가장 넓은 너비이다.
줄바꿈 없이 한 줄에 모든 콘텐츠를 배치했을 때의 너비와 같다.
만약 줄바꿈 없이 내용이 무지하게 길다면 부모의 너비보다 넘칠 수 있다. (overflow)

p {
  width: max-content;
}

fit-content

min-content와 max-content를 함께 활용하는 값이다.
최대 max-content, 최소 min-content까지의 너비를 가진다.
유동적인 너비를 가질 수 있다.

p {
  width: fit-content;
}

min ( max-content, max ( min-content, 길이값 ) )

height

요소의 높이를 설정한다.
기본값은 auto로, 콘텐츠의 요소의 높이만큼 설정된다.

p {
  width: 100px;
  height: auto;
  backgroung-color: red;
}

padding

요소 주변의 여백으로, 테두리 안쪽의 여백을 설정한다.

padding의 4가지 값

패딩은 top, right, bottom, left 네가지의 속성값이 있다.
각각의 속성은 요소를 기준으로 상하좌우의 여백을 담당한다.

p {
	padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

padding 단축속성

padding이라는 속성을 이용하여 위의 4가지 값을 한번에 지정할 수 있다.
이때 작성하는 값의 개수에 따라 적용되는 모습이 다르게 나타난다.
이때 적용되는 순서는 위에서 시계방향이다.

네 면이 동일하게
값을 하나만 작성하는 경우 상하좌우 네 면이 동일한 값으로 적용된다.

p {
	padding: 10px; /* top, right, bottom, left 모두 10px */
}

상하, 좌우
값을 두개만 작성하는 경우 첫 값은 상하, 두번째 값은 좌우여백으로 적용된다.

p {
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
}

상, 우좌, 하
값을 세개만 작성하는 경우 첫 값은 상, 두번째 값은 좌우, 세번째 값은 하 여백으로 적용된다.

p {
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
}

상, 우, 하, 좌
값을 네개 작성하는 경우 첫 값은 상, 두번째 값은 좌, 세번째 값은 하, 네번째 값은 우 여백으로 적용된다.

p {
	padding: 10px 20px 30px 40px;
}

border

요소의 테두리를 설정한다.
테두리는 요소가 차지하는 전체 너비, 높이의 일부로 인식되며 box-sizing 속성을 사용하여 테두리를 포함하도록 설정할 수 있습니다.

border의 속성

테두리는 두께(width), 스타일(style), 색상(color) 등 속성의 단축속성이다.
또한 각 속성 역시 단축 속성으로 사용된다.

boeder-width

테두리의 두께를 나타내는 속성으로 상하좌우의 값을 지정할 수 있다.
단축 속성으로 사용이 가능하며, 아래와 같이 각 값을 따로 지정할 수도 있다.

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

p {
  border-top-width: 1px;
  border-right-width: 3px;
  border-bottom-width: 5px;
  border-left-width: 7px;
  
  border-style: solid;
  border-color: black;
}

boeder-style

테두리의 형식을 나타내는 속성으로 상하좌우의 값을 지정할 수 있다.
단축 속성으로 사용이 가능하며, 아래와 같이 각 값을 따로 지정할 수도 있다.

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

p {
  border-width: 3px;
  
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
  
  border-color: #3498db;
}

mdn 테두리 스타일

boeder-color

테두리의 색상을 나타내는 속성으로 상하좌우의 값을 지정할 수 있다.
단축 속성으로 사용이 가능하며, 아래와 같이 각 값을 따로 지정할 수도 있다.

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

p {
  border-width: 5px;
  border-style: solid;
  
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

border-image

border-image 속성을 사용하여 테두리로 이미지를 넣을 수 있다.
mdn 테두리 이미지

border 단축속성

border는 top, fight, bottim, left 각 값을 이용하여 단축속성을 사용할 수 있으며,
border 속성을 이용해서 한번에 적용할 수도 있다.

/* 상하좌우 각각 스타일 적용 */
p {
  border-top: 2px dashed red;
  border-right: 4px dotted green;
  border-bottom: 6px double blue;
  border-left: 8px groove yellow;
}

/* 상하좌우 동일 스타일 한번에 적용 */
div {
  border: 3px solid #e74c3c;
}

margin

요소 주변의 여백으로, 테두리 바깥쪽의 여백을 설정한다.

margin의 4가지 값

마진역시 패딩과 같이 top, right, bottom, left 네가지의 속성값이 있다.
각각의 속성은 요소를 기준으로 상하좌우의 여백을 담당한다.

p {
	margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

네 면이 동일하게
값을 하나만 작성하는 경우 상하좌우 네 면이 동일한 값으로 적용된다.

p {
	margin: 10px; /* top, right, bottom, left 모두 10px */
}

상하, 좌우
값을 두개만 작성하는 경우 첫 값은 상하, 두번째 값은 좌우여백으로 적용된다.

p {
	margin: 10px 20px; /* top, bottom :10px,  left, right:20px */
}

상, 우좌, 하
값을 세개만 작성하는 경우 첫 값은 상, 두번째 값은 좌우, 세번째 값은 하 여백으로 적용된다.

p {
	margin: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
}

상, 우, 하, 좌
값을 네개 작성하는 경우 첫 값은 상, 두번째 값은 좌, 세번째 값은 하, 네번째 값은 우 여백으로 적용된다.

p {
	margin: 10px 20px 30px 40px;
}

box-sizing

요소의 총 너비와 높이를 계산하는 방식을 지정한다.

content-box

기본값으로, width 값을 지정하는 경우 요소의 너비로 지정된다.

p {
	width: 200px;
	padding: 20px;
	border: 1px solid black;
	margin: 10px;
}

위와 같은 경우, width 값은 요소의 너비값이 되기 때문에 전체 너비는 요소(200px) + 패딩(좌우 40px) + 테두리(좌우 2px) + 마진(좌우 20px) 해서 총 262px이 나오게 된다.

border-box

width 값을 지정하는 경우 요소 + 패딩 + 테두리까지 합의 너비로 지정된다.

p {
	width: 200px;
	padding: 20px;
	border: 1px solid black;
	margin: 10px;
    box-sizing: border-box;
}

width 값은 요소의 너비값이 되기 때문에 전체 너비는 요소 + 패딩 + 테두리까지가 200px이고 마진(좌우 20px) 해서 총 220px이 나오게 된다.

box-sizing 값은 상속이 되지 않으므로 *을 사용하여 모든 요소에 적용하는 것을 권장한다.

* {
  box-sizing: border-box;
}

overflow

요소(element)의 내용이 많아서 넘쳐흐르는 경우 어떻게 처리할지 지정한다.

visible

기본값으로, 내용이 넘치더라도 그대로 보여준다.

p {
	width: 50px;
    height: 50px;
	overflow: visible;
}

hidden

넘치는 내용을 잘라내어 보이지 않게 숨긴다.

p {
	width: 50px;
    height: 50px;
	overflow: hidden;
}

scroll

항상 스크롤바를 표시하여 넘치는 내용을 스크롤할 수 있도록 한다.

p {
	width: 50px;
    height: 50px;
	overflow: scroll;
}

auto

내용이 넘칠 경우에만 스크롤바를 표시한다.

p {
	width: 50px;
    height: 50px;
	overflow: auto;
}

한글 콘텐츠가 많은 사이트는 word-break: keep-all과 overflow-wrap: break-word를 함께 사용하여 단어 의미를 유지하면서 레이아웃이 깨지지 않도록 할 수 있다.

p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

overflow-x와 overflow-y

가로(x)와 세로(y)의 넘침을 따로 제어할 수 있다.

p {
	width: 100px;
    height: 100px;
	overflow-x: scroll;
	overflow-y: hidden;
}
 
div {
	width: 100px;
    height: 100px;
	overflow-x: hidden;
	overflow-y: scroll;
}

border-radius

테두리의 모서리를 둥글게 만들 수 있는 속성으로, 단축속성이다.

border-top-left-radius

p {
	width: 100px;
    height: 100px;
    
    border-top-left-radius: 50px;
}

border-top-right-radius

p {
	width: 100px;
    height: 100px;
    
    border-top-right-radius: 50px;
}

border-bottom-right-radius

p {
	width: 100px;
    height: 100px;
    
    border-bottom-right-radius: 50px;
}

border-bottom-left-radius

p {
	width: 100px;
    height: 100px;
    
    border-bottom-left-radius: 50px;
}

border-radius 단축속성

단축으로 사용 시 왼쪽 위(top-left)부터 시계방향으로 값을 적용한다.

p {
	width: 100px;
    height: 100px;
    
    border-radius: 10px; /* 전체 */
    border-radius: 10px 20px; /* top-left/bottom-right: 10px, top-right/bottom-left: 20px */
    border-radius: 10px 20px 30px; /* top-left: 10px, top-right/bottom-left: 20px, bottom-right: 30px */
    border-radius: 10px 200px 30px 40px;
}

px과 % 단위에 따라서 모양이 다르게 보이기도 한다.
또한 슬래시(/)를 사용하여 둥글기를 다양하게 만들 수 있다.
border-radius 만들기

background

배경을 설정하는 단축속성이다.

background-color

배경 색상을 지정한다.

p {
	background-color: red;
}

background-image

배경 이미지를 지정한다.

p {
	background-image: url(./img/icon.png);
}

background-repeat

배경 이미지의 반복 방식을 지정한다.

• repeat: 가로와 세로로 반복 (기본값)

  p {
      background-repeat: repeat;
  }

• no-repeat: 반복하지 않음

  p {
      background-repeat: no-repeat;
  }

• repeat-x: x축(가로)으로만 반복

  p {
      background-repeat: repeat-x;
  }

• repeat-y: y축(세로)으로만 반복

  p {
      background-repeat: repeat-y;
  }

• space: 이미지를 반복하되, 이미지 사이에 균등한 간격을 두고 반복.

  p {
      background-repeat: space;
  }

• round: 이미지를 반복하되, 요소의 크기에 맞게 이미지를 늘리거나 줄여 빈 공간이 생기지 않도록 반복.

  p {
      background-repeat: round;
  }

background-position

배경 이미지의 위치를 지정한다.

• 키워드: left, center, right, top, bottom 조합으로 사용

  p {
      background-position: left bottom; /* 가로 왼쪽, 세로 하단 */
      background-position: right center; /* 가로 오른쪽, 세로 중앙 */
      background-position: center center; /* 가로 중앙, 세로 중앙 */
  }

• 퍼센트: x% y% 형태로 지정 (0% 0%는 왼쪽 상단, 100% 100%는 오른쪽 하단)

  p {
      background-position: 25% 75%;
  }

• 픽셀: x축px y축px 형태로 직접 위치 지정

  p {
      background-position: 50px 30px;
  }

• 혼합: 키워드, 퍼센트, 픽셀을 혼합하여 사용 가능

  p {
      background-position: 50px 75%;
  }

background-size

배경 이미지의 크기를 지정한다.

• contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 최대한 크게. 여백이 발생할 수 있음.

  p {
      background-size: contain;
  }

• cover: 이미지가 찌그러지지 않는 한도 내에서 요소를 완전히 덮도록 설정. 이미지의 일부가 잘릴 수 있음.

  p {
      background-size: cover;
  }

• 별도 크기 지정: background-size: 100%; 또는background-size: 100px 400px;와 같이 직접 크기를 지정할 수 있습니다.

  p {
  	  background-size: 100%;
      background-size: 100px 400px;
  }

background-attachment

배경 이미지의 스크롤 여부를 지정한다.

• scroll: 기본값. 요소와 함께 스크롤.

  p {
  	  background-attachment: scroll;
  }

• fixed: 뷰포트에 고정되어 스크롤되지 않음. 모바일 기기에서는 fixed 배경이 예상대로 작동하지 않을 수 있으므로 반응형 디자인 시 주의.

  p {
  	  background-attachment: fixed;
  }

background-clip

배경이 요소의 어느 영역까지 차지할지 지정한다.

• border-box: 테두리까지 배경이 차지. (기본값)

  p {
  	  background-clip: border-box;
  }

• padding-box: 안쪽 여백까지만 배경이 차지.

  p {
  	  background-clip: padding-box;
  }

• content-box: 콘텐츠 영역만 배경이 차지.

  p {
  	  background-clip: content-box;
  }

background-origin

배경 이미지의 원점(시작점)을 지정한다.

• border-box: 테두리의 왼쪽 위 모서리를 기준.

  p {
  	  background-origin: border-box;
  }

• padding-box: 안쪽 여백의 왼쪽 위 모서리를 기준. (기본값)

  p {
  	  background-origin: padding-box;
  }

• content-box: 콘텐츠 영역의 왼쪽 위 모서리를 기준.

  p {
  	  background-origin: content-box;
  }

background-attachment: fixed;가 설정된 경우, background-origin은 무시되고 background-clip이 적용된다.

그라디언트 배경

CSS를 사용하여 그라디언트 배경을 만들 수 있다.
직접 설정하는 것은 어렵지만 온라인 도구를 이용하여 쉽게 만들 수 있다.

p {
  width: 200px;
  height: 200px;
  color: white;
  
  background: linear-gradient(45deg, #3498db, #2ecc71);
}

그라디언트 배경 만들기

img 태그와 background-img

HTML에 이미지를 넣을 때는 이 이미지를 img 태그로 넣을지 background-img로 넣을지를 고민해야 한다.
일반적인 사람들은 크게 다르지 않아보일 수 있지만 스크린리더로 접근하는 사람들에게는 크게 다르기 때문이다.
이를 위해서 이미지를 넣을 때는 주의할 필요가 있다.

문서 내에서 의미를 가진 이미지의 경우 img 태그를 이용하여 넣고, 그저 장식적인 요소인 경우 background-img를 이용하여 넣는다.

background 단축속성

background 단축속성은 유독 다양한 값을 한번에 작성할 수 있는 속성으로 주의가 필요하다.

background: skyblue url(img/bg.jpg) no-repeat 50% 50% / cover;

일반적으로 color, image, repeat, position, size 순서로 작성을 하게 되며, size의 경우 position 값 이후에 슬래시(/)로 구분 후 작성해야 정상적으로 표현된다.

또한 단축속성 작성 시 개별 속성으로 작성한 스타일을 덮어쓰기 때문에, 개별 속성을 지정할 때는 단축 속성 이후에 작성해야 한다.

div {
  background: skyblue url(img/bg.jpg) no-repeat 50% 50% / cover;
  background-clip: padding-box;
}

box-shadow

요소에 그림자 효과를 추가할 수 있다.
여러 값을 조합하여 다양한 그림자 효과를 만들 수도 있다.

p {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

offset-x offset-y blur-radius spread-radius color 순서로 작성한다.

• offset-x: 그림자의 수평 오프셋. 양수는 오른쪽, 음수는 왼쪽으로 이동.
• offset-y: 그림자의 수직 오프셋. 양수는 아래쪽, 음수는 위쪽으로 이동.
• blur-radius: 그림자의 흐림 정도. 값이 클수록 더 흐릿해짐.
• spread-radius: 그림자의 크기. 양수는 그림자를 확장, 음수는 축소.
• color: 그림자의 색상.

opacity

요소의 불투명도를 설정하는 속성으로, 0(완전 투명)부터 1(완전 불투명) 사이의 값을 사용한다.

p {
  opacity: 0.7;
}

배경만 투명하게 하고싶다면 background-color: rgba()를 사용하는 것이 좋다.