웹스터디

박스모델

토픽 웹스터디 > CSS

박스모델이란?

HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고, 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.

박스모델의 속성

  • margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
  • border : 박스의 테두리
  • padding : 테두리와 content간의 간격
  • content : 엘리먼트 안에 포함되는 컨텐츠

예제

example1.html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<div style="border:1px solid blue">
			<div style="width:100px; height:100px;padding:20px; border:2px solid red;margin:20px;">
				생활코딩
			</div>
		</div>
	</body>
</html>

content(컨텐츠)

  • 엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
  • content는 폭(width)과 높이(height)를 지정할 수 있다.

border(보더), 테두리

  • 엘리먼트의 테두리
  • 테두리는 margin과 padding의 경계가 된다.
  • 테두리의 굵기와 색상과 스타일을 지정할 수 있다.

padding(패딩)

  • 테두리와 컨텐츠 간의 여백

margin(마진)

  • 엘리먼트와 엘리먼트 간의 여백
  • 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)

예제

example2.html  (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
			<!-- 각 div의 margin을 20px로 지정 했을 때 div와 div의 간격이 40px가 아니고 20px인 이유는 마진겹침(margin collapsing)현상 때문이다.-->
			<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
			<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
			<div style="margin:20px;border:1px solid red;width:50px;height:50px"></div>
	</body>
</html>

margin, padding 표기법

  • margin:10px - 상우하좌의 margin값이 10px
  • margin:10px 20px - 상하 10px, 좌우 20px,
  • margin:10px 20px 30px - 상 10px, 좌우 20px, 하 30px
  • margin:10px 20px 30px 40px - 상우하좌의 순으로 값이 지정됨

참고

댓글

댓글 본문
  1. egoing
    코드도 부탁해요~
    대화보기
    • 이주현
      안녕하세요 질문드릴게있어서 이렇게 댓글을 남깁니다! 제가 이제 막 CSS를 배우기 시작했는데 이번에 margin적용하는걸 하고있습니다
      그래서 박스2개로 margin적용 예시를 따라했는데 큰 박스안에 작은 박스가 있도록 배치를 했거든요!
      그리고 작은 박스에 margin-top:100px 이런식으로 하면 큰박스안에서 작은박스가 위에서 아래로 100px 이동해야하는데 제가 하면
      자꾸 큰박스도 함께 100px이 이동합니다 적용을 작은박스에 했는데도 불구하고 말이에요 ㅠㅠ 해결이 안되서 이렇게 댓글남깁니다!!
    • yihsang
      감사합니다.
    • Rhys Jung
      정주행중입니다. 오늘은 CSS 완주하려 합니다.^^
    • 이승민
      저기 아래에 있는 댓글을 보고 상단에 다시 위치시키기 위해 댓글 답니다.
      영상에 나온 상좌하우 가 아니라 글대로 상우하좌, 시계방향이라고 하네요.
    • JustStudy
      고맙습니다
    • 빨강머리앤
      열심히 공부하고 있습니다.
      감사합니다...
    • 김시은
      알찬강의 감사합니다.^^
    • 크레용샘
      강의 정말 좋네요.
      감사합니다^^
    • kush
      이고잉님의 강의는 역시 명쾌하네요!
      paddle과 마진은 종종 어도비프로그램이나 디자인 소프트웨어에서도 나오는데, 엄청 헷갈렸던 모든 개념들이
      확실해졌습니다. 너무 감사합니다 :)

      질문 남겨도될까요 (늘그렇듯...ㅎㅎ)
      1. html에서 table의 개념과 css 이번강좌의 박스모델의 개념은, 근본적으로 다른건가요?
      딱히 헷갈리지는 않는데 (아직)
      박스는 한개의 표가 그냥 독립적으로 움직인다 라고 생각하면 되는지 궁금하네요.

      2. div 의 정확한 개념이 궁금하네요.
      약간 만능처럼 쓰이는건지... (모든 강좌에 div가 나와서말이죠)

      3. metric 이라는 저것은 크롬 개발자도구에만 있는건가요?
      굉장히 편해보이는데, 저는 지금 brakets를 쓰고있는데 그런 창이 따로 없네요.


      늘 감사합니다 :)
    • alexmoon
      line break 는 <br /> 말씀하시는거죠?

      찾아보니 word-wrap:break-word; 로 하면 되는군요 ㅎㅎ

      감사합니다.

      열심히 공부하겠습니다.
      대화보기
      • egoing
        html worwrap 혹은 line break로 검색해보세요~
        대화보기
        • alexmoon
          <div style="border:1px solid blue;">
          <div style="width:100px; height:100px;padding:20px; border:2px solid red;ma">
          생활코딩생활코딩생활코딩생활코딩생활코딩생활코딩생활코딩생활코딩생활코딩
          </div>
          </div>

          안녕하세요. body부분에 저렇게 text를 입력하면 border를 뚫고 나가더라구요. 자동으로 border안에만 있도록 할 수 는 없을까요?
        • 유형찬
          감사합니다!
        • ddojai
          동영상에서는 상좌하우 시계반대방향이라는데 아래 글이 맞는거 같네요.

          margin:10px 20px 30px 40px - 상우하좌의 순으로 값이 지정됨
        • leeta
          지금은 크게 몰라도 될부분이죠?

          아직 한단계 한단계 크게 무언가가 만들어 지지는 않지만 세부적으로 배우는게 재밌네요.

          무엇보다도 jsfiddle로 변화를 한번에 볼 수 있어 더 좋은거 같아요 잘보고 있습니다. 감사합니다^^
          대화보기
          • egoing
            특별한 차이는 없습니다만, style을 기술하는 것은 태그에 직접 작성하는 것으로 id, clas를 타켓팅해서 효과를 주는 것은 효과를 재활용 할 수 있다는 장점이 있습니다. 차차로 이해하시게 될 부분입니다. ^^
            대화보기
            • leeta
              궁금한것이 있는데 css들어와서 id나class를 주로 사용하다가 이렇게 <div style="값"> 로 쓰는 특별 한 이유가 있나요? 아니면 설명하면서 수정을 편하게 하게 위해서 html에서 사용 하시는건가요^^?

              궁금해서css에 id 만들고 적용해보니 딱히 특별한 문제는 없네요. 그냥 궁금합니다.
            • 별모모
              [ 박스모델, border 기준 ] 긴장하며 다시 박스모델을 보았습니다. 디자인에 큰 영향을 미지는 부분이지만 마진, 보더, 패딩, 콘텐츠가 섞이면서 혼동이 되는데 "Border"을 중심으로 개념을 잡는 것이 좋겠습니다.

              border을 기준으로 바깥은 Margin, 안쪽은 padding입니다. 나머지 콘텐츠는 따로 값을 입력할 일이 없으니 "border"을 기준으로 알맹이(콘텐츠)를 어떻게 위치시킬 지를 고려하면 정리하기 좋습니다.
            • 용12
              감사합니다 잘봤습니다~!
            • Starmomo
              ^^ 마진과 패딩에 대한 부분이었는데요, 제가 착각했습니다. 다음 토픽에서 가서야 이해가 되었습니다. ^^ 역시, 처음 볼 때와는 소화되는 내용이 다릅니다. 고맙습니다.
              대화보기
              • egoing
                고맙습니다. 2번째 부분은 말씀하시는 것이 맞습니다. 수정했구요. 첫번째 말씀은 어떤 부분에 문제를 지적하신 것인지 찾지 못했습니다.
                대화보기
                • Starmomo
                  처음에는 멍~하니 지나갔는데, 다시 보니 이해가 됩니다. ^^
                  1. 테스트 해보았는데요. 값이 4개인 경우, 상우하좌의 순으로 값이 지정되는군요. ^^margin:10px 20px 30px 40px - 상좌하우의 순으로 값이 지정됨. --> 상우하좌의 순으로 값이 지정됨.
                • egoing
                  예 크롬에서도 파이어버그 라이트를 쓸 수 있구요. 사실 크롬에는 자체적으로 휼룡한 개발자 도구가 있습니다.
                  대화보기
                  • egoing
                    크롬 개발자 도구도 수업으로 만들어야겠어요.
                    대화보기
                    • egoing
                      수정했습니다. ^^
                      대화보기
                      • egoing
                        정정했습니다. 알려주셔서 고맙습니다
                        대화보기
                        • egoing
                          수정했습니다. ^^
                          대화보기
                          • egoing
                            하이커님 파이어버그 링크가 깨졌네요. 복원했습니다. 크롬으로 따라오셔도 물론 됩니다. 크롬에도 파이어버그와 같은 기능이 있구요. 화이팅이요~
                            대화보기
                            • jamesleeplan
                              maring-->margin혹시 오타가 아닌 다른뜻이 있는건아닌지 해서^^ 본의아니게 신고합니다. 일단 오타로 의심이 되긴 하는데.. 암튼 감사히 잘 듣고 있습니다.^^
                            • Starmomo
                              margin:10px 20px 30px 40px - 상좌하우의 순으로 값이 지정됨 > 상우하좌 순으로 값이 지정됨.
                              잘 보고 있습니다. 고맙습니다.
                            • Lpp-b612
                              크롬은 파이어버그 따로 없이 마우스 우클릭 하시면Inspect element를 실행 할 수 있습니다~
                            • Hooneui Park
                              margin:10px 20px 30px 40px - 상좌하우의 순으로 값이 지정됨이부분.. 상우하좌 이순선데 수정이 필요해요~
                            • Guest
                              크롬도 파이어버그 라이트라고 있던데요?
                            • 히치하이커
                              굉장한 뒷북이라 보실지 모르겠지만"파이어 버그 사용법" 페이지로 가면 404 Page Not Found 가 뜨네요.
                              그리고 지금까지 크롬으로 보고 있었는데 파이어버그를 못쓰면 앞으로 수업 따라가기가 어려울까요? 그렇다면 꼭 파이어폭스를 써야하는지, 크롬에서도 비슷한 대체자가 있는지 알려주셨으면 합니다.
                              + 뒤늦게 감탄하며 정주행 하고 있습니다 : )