본문 바로가기
IT/CSS

CSS: Box Model -1

by 무녈 2021. 5. 4.

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

THE BOX MODEL

The Box Model

상자 모델(Box model)은 웹 페이지의 공간을 차지하는 요소의 일부를 정의하는 속성 집합으로 구성된다.

모델에는 content 영역의 크기(너비와 높이(width, height))와 요소의 padding, border, margin이 포함됩니다. 속성은 다음과 같습니다.

  • 너비 및 높이(width, height): 내용 영역의 너비 및 높이
  • 패딩(padding): 내용 영역과 테두리 사이의 공간
  • 테두리(border): 내용 영역과 패딩을 둘러싼 테두리의 두께 및 스타일
  • 여백(margin): 요소의 테두리 및 바깥쪽 가장자리 사이의 공간의 양

Box Moder/ 출처: https://content.codecademy.com/courses/freelance-1/unit-4/diagram-boxmodel.svg

 

Question: Box Model 속성의 기본값은 무엇인가?

각 브라우저에 따라 이러한 값은 달라지므로 CSS 파일에서 해당 값을 0으로 "재설정"하는 것이 일반적으로 권장된다. 

다음은 일반 태그 및 가장 일반적인 기본값 목록이다.

body  - margin: 8px;

h1 - margin-top: 0.67em;
     margin-bottom: 0.67em;

h2 - margin-top: 0.83em;
     margin-bottom: 0.83em;

h3 - margin-top: 1em;
     margin-bottom: 1em;

h4 - margin-top: 1.33em;
     margin-bottom: 1.33em;

h5 - margin-top: 1.67em;
     margin-bottom: 1.67em;

h6 - margin-top: 2.33em;
     margin-bottom: 2.33em;

p - margin-top: 1em;
    margin-bottom: 1em;

ol - margin-top: 1em;
     margin-bottom: 1em;
     padding-left: 40px;

ul - margin-top: 1em;
     margin-bottom: 1em;
     padding-left: 40px;

(출처: https://discuss.codecademy.com/t/default-values-for-box-model-properties/364932

Height and Width

요소의 내용에는 높이(height)와 너비(width)라는 두 가지 치수가 있다.

기본적으로 HTML box의 차원은 box의 raw content를 보관하도록 설정된다.

 

CSS height 와 width property을 사용하여 기본 치수를 수정한다.

p {
  height: 80px;
  width: 240px;
}

예시에서 문단 요소의 높이와 너비는 각각 80픽셀과 240픽셀로 설정된다. (px는 픽셀을 나타낸다.)

 

픽셀을 사용하면 요소의 상자 크기(너비와 높이)를 정확하게 설정할 수 있다.

요소의 너비와 높이를 픽셀 단위로 설정하면 모든 장치에서 크기가 동일하다.

콘텐츠 영역의 높이와 너비를 픽셀 외에 백분율로 설정할 수 있다.

 

Borders

Border(테두리)란 그림을 둘러싼 틀처럼 요소를 둘러싼 선을 의미

테두리는 특정 widht, style 및 color으로 설정할 수 있다.

  • width: border의 두께. border 두께는 픽셀 단위로 설정하거나 thin, medium ,thick 키워드 중 하나를 사용하여 설정
  • style: boder의 design. 웹 브라우저는 10가지 스타일 중 하나를 렌더링할 수 있다. (스타일 예시: none, dotted, solid)
  • color: border의 색상. 웹 브라우저는 140개의 내장된 색상 키워드를 포함하여 몇 가지 다른 형식을 사용하여 색상을 렌더링할 수 있다.
p {
  border: 3px solid coral;
}

예시에서 borer의 width는 3픽셀, style은 solid이고, color은 coral이며, 세 가지 속성 모두 한 줄의 코드로 설정된다.

 

default border는 medium none color이며, 여기서 color은 요소의 현재 색이다.

CSS 파일에 width, style 또는 color가 설정되지 않은 경우 웹 브라우저는 해당 속성에 대한 기본값을 할당한다.

p.content-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}

예시에서 boder style은  solid, color은 coral로 설정되며, widht가 설정되지 않았으므로 기본값 medium이 된다.

 

(참고: 요소의 일부만 border를 setting하는 경우: https://discuss.codecademy.com/t/setting-a-border-for-one-or-two-sides-of-the-element/365302)

Border Radius

CSS 덕분에 border가 정사각형일 필요가 없으며, 요소의 boder box 모서리를 border-radius property으로 수정할 수 있다.

div.container {
  border: 3px solid blue;
  border-radius: 5px;
}

예제의 코드는 테두리의 네 모서리를 모두 반경 5픽셀(반경이 5픽셀인 원과 동일한 곡률)로 설정한다.

먼저 너비와 높이가 동일한 요소를 생성한 다음 반경을 box 너비의 절반인 50%로 설정하여 완벽한 원 테두리를 만들 수 있다.

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid blue;
  border-radius: 50%;
}

위의 예제의 코드는 완벽한 원인 <div> 를 만든다.

Padding

Padding(패딩): box의 content과 box의 border 사이의 공간으로, 그림과 그림을 둘러싼 프레임 사이의 공간과 같다.

CSS에서 padding property을 사용하여 이 공간을 수정한다.

padding은 픽셀 또는 퍼센트로 설정된다.

p.content-header {
  border: 3px solid coral;
  padding: 10px;
}

이 예제의 코드는 문단의 내용(텍스트)과 테두리 사이에 10픽셀의 공간을 모두 배치한다.

 

padding property은 종종 배경색을 확장하고 내용을 덜 비좁게 보이도록 만드는 데 사용된다.

 

box content의 각 면에 있는 padding의 양을 보다 구체적으로 지정하려면 다음 4가지 속성을 사용한다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

각 속성은 box 내용 중 한 쪽에만 있는 패딩에 영향을 미치므로 사용자 정의의 유연성이 향상된다.

p.content-header {
  border: 3px solid fuschia;
  padding-bottom: 10px;
}

위의 예에서 문단 내용의 맨 아래 부분만 10픽셀의 패딩을 가진다.

Padding Shorthand

padding property의 또 다른 구현을 통해 single declaration에서 내용의 각 측면에 패딩이 있어야 하는 양을 정확하게 지정할 수 있다.

여러 property를 value로 사용하는 declaration을 shorthand property이라고 한다.

 

padding shorthand을 사용하면 모든 padding property을 한 줄의 값으로 지정할 수 있다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

다음과 같은 여러 가지 방법으로 속성을 지정할 수 있다.

4 Values

p.content-header {
  padding: 6px 11px 4px 9px;
}

위의 예에서 4개의 값 6px 11px 4px 9px는 시계 방향으로 회전하는 각 변의 패딩의 양에 해당

순서대로 콘텐츠의 padding-top value (6px), padding-right value (11px), padding-bottom (4px), padding-left value (9px)를 지정한다.

3 values

p.content-header {
  padding: 5px 10px 20px;
}

내용의 왼쪽과 오른쪽이 같을 수 있는 경우 padding shorthand property를 사용하여 3개의 값을 지정한다.

첫 번째 값은 padding-top value (5px), 두 번째 값은 padding-left 및 padding-right value (10px), 세 번째 값은 padding-bottom  value (20px)을 설정한다.

2 Values

p.content-header {
  padding: 5px 10px;
}

마지막으로, 위쪽과 아래쪽이 같을 수 있고 왼쪽과 오른쪽이 같을 수 있는 경우 2 개의 값을 지정한다.

첫 번째 값은 padding-top 및 padding-bottom (5px)을 설정하고 두 번째 값은 padding-left 및 padding-right value (10px)을 설정한다.

Margin

여백(margin)은 box 바로 외부에 있는 공간을 의미

margin property는 외부 공간의 크기를 지정하는 데 사용된다.

p {
  border: 1px solid aquamarine;
  margin: 20px;
}

예제의 코드는 단락 상자 외부에 모두 20픽셀의 공간을 배치한다.

즉, 페이지의 다른 HTML 요소는 문단 경계에서 20픽셀 이내에 들어갈 수 없다.

 

box의 각 측면에 있는 여백의 양을 세부적으로 조절하기 위해 4개의 속성을 사용할 수 있다.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

각 property는 box의 한 쪽에만 있는 여백에 영향을 미치므로 사용자 정의의 유연성이 향상된다.

p {
  border: 3px solid DarkSlateGrey;
  margin-right: 15px;
}

위의 예에서 단락 box의 오른쪽만 15픽셀의 여백을 가진다. 요소의 특정 측면에 사용되는 여백 값을 보는 것이 일반적이다.

Margin Shorthand

margin 또한 padding shorthand property와 같이  shorthand property으로도 쓸 수 있다.

 

padding shorthand와 마찬가지로 margin shorthand를 사용하여 모든 margin shorthand를 단일 행의 value로 지정한다.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin property 지정 방법

4 Values

p {
  margin: 6px 10px 5px 12px;
}

위의 예에서 4개의 value 6px 10px 5px 12px는 시계 방향으로 회전하는 각 모서리의 margin의 양에 해당

순서대로 콘텐츠의 margin-top value (6px), margin-right value (10px), margin-bottom value (5px) 및 margin-left value (12px)을 지정한다.

3 Values

p {
  margin: 5px 12px 4px;
}

내용의 왼쪽과 오른쪽이 같을 수 있는 경우, margin shorthand property을 사용하여 3개의 값을 지정

첫 번째 값은 margin-top value (6px), 두 번째 값은 margin-left 및 margin-right value (12px), 세 번째 값은 margin-bottom value (4px)을 지정한다.

2 Values

p {
  margin: 20px 10px;
}

마지막으로, 위쪽과 아래쪽이 같을 수 있고 왼쪽과 오른쪽이 같을 수 있는 경우 두 개의 값을 지정

첫 번째 값은 margin-top 및 margin-bottom value (vertical margin) (20px)을 설정하고, 두 번째 값은 margin-left 및 margin-right value (horizontal margin) (10px)을 설지정한다.

Auto

margin property를 사용하여 몇 가지 systax 요구 사항을 따르면, 콘텐츠를 중앙에 배치할 수 있다.

예시:

div.headline {
  width: 400px;
  margin: 0 auto;
}

예제에서 margin: 0 auto;은 containing element에서 div의 중심을 맞춘다.

0은 상단 및 하단 여백을 0픽셀로 설정한다.

auto value는 요소가 containing element 내에 중앙에 올 때까지 왼쪽 및 오른쪽 여백을 조정하도록 브라우저에 지시한다.

 

요소의 중심을 맞추려면 해당 요소의 너비(width)를 설정해야 한다.

그렇지 않으면, div의 너비는 예를 들어 <body>와 같은 포함 요소의 전체 너비로 자동 설정된다.

display 및/또는 browser 창 크기로 인해 페이지 너비가 변경될 수 있으므로 페이지 전체 너비를 차지하는 요소를 가운데에 배치할 수 없다.

 

위의 예에서 div의 너비는 400픽셀로 설정되며, 이는 대부분의 화면 너비보다 작다.

이렇게 하면 400픽셀보다 큰 포함 요소 내에서 div가 중앙에 배치된다.

Margin Collapse

padding은 요소의 border 내부에 추가된 공간이고, margin은 요소의 boder 외부에 추가된 공간이다.

다른 차이점은 vertical margin, collapse이라고도 하는 top 및 bottom margin은 축소가 일어나지만, top 및 bottom padding은 축소되지 않는다는 것이다.

 

padding과 같이 horizontal margin(left과 right)이 항상 표시되고 함께 추가된다.

예를 들어 id가 #div-one 및 #div-two인 두 개의 div가 서로 옆에 있으면 인접한 여백의 합만큼 멀리 떨어진다.

#img-one {
  margin-right: 20px;
}
 
#img-two {
  margin-left: 20px;
}

예제에서 #img-oen과 #img-two 경계 사이의 공간은 40픽셀이다.

#img-one (20px)의 오른쪽 여백과 #img-two(20px)의 왼쪽 여백이 추가되어 총 40픽셀의 여백을 만든다.

 

horizontal margin과 달리 vertical margin은 추가되지 않는다.

대신, 두 개의 vertical margin 중 큰 것이 인접 요소 사이의 거리를 설정한다.

#img-one {
  margin-bottom: 30px;
}
 
#img-two {
  margin-top: 20px;
}

예제에서 #img-one과 #img-two 요소 사이의 vertical margin은 30픽셀이다.

margin의 합계가 50픽셀이지만 collapse로 인해 간격은 margin이 더 큰 #img-one 하단 여백에만 의존하게 된다.

 

쉽게 말하자면, vertical margin의 collapse는 키가 큰 사람을 밀려고 하는 키가 작은 사람이라고 생각하면 도움이 될 수 있다.

키가 큰 사람은 팔이 길고 키가 작은 사람을 쉽게 밀 수 있는 반면, 팔이 짧은 사람은 팔이 긴 사람에게 닿지 않는다는 것이다.

Vertical Mergins Collaspe / 출처: https://content.codecademy.com/courses/updated_images/diagram-verticalmargins_Updated_1-01.svg

Minimum and Maximum Height and Width

화면 크기가 다른 디스플레이를 통해 웹 페이지를 볼 수 있기 때문에 웹 페이지의 콘텐츠는 이러한 크기 변화 문제가 발생한다.

이 문제를 방지하기 위해 CSS는 요소의 box 크기가를 제한할 수 있는 두 가지 property을 제공한다.

  • min-width: 요소의 box의 최소 너비를 보장
  • max-width: 요소의 box의 최대 너비를 보장
p {
  min-width: 300px;
  max-width: 600px;
}

예시에서 모든 paragraph의 너비는 300픽셀 이하로 축소되지 않으며 너비는 600픽셀을 초과하지 않는다.

 

브라우저 창이 좁아지거나 확장되면 텍스트와 마찬가지로 내용을 읽기가 어려워질 수 있다.

이 두 가지 property는 요소의 최소 너비과 최대 너비을 제한하여 내용을 읽을 수 있도록 한다.

 

요소의 최소 및 최대 높이를 제한할 수도 있다.

  • min-height: 요소 box의 최소 높이를 보장
  • max-height: 요소 box의 최대 높이를 보장
p {
  min-height: 150px;
  max-height: 300px;
}

예시에서 모든 paragraph의 높이는 150픽셀 이하로 줄어들지 않고 높이는 300픽셀을 초과하지 않는다.

max-height property를 너무 낮게 설정하면 요소 box의 내용이 box 밖으로 흘러나와 읽을 수 없는 내용이 발생할 수 있다.

다음 챕터에서 해결하자.

Overflow

box model의 모든 구성 요소는 요소의 크기로 구성된다.

예를 들어 dimension의 이미지는 너비가 364픽셀이고 높이는 244픽셀이다.

  • 300 pixels wide
  • 200 pixels tall
  • 10 pixels padding on the left and right
  • 10 pxels padding on the top and bottm
  • 2 pixels border on the left and right
  • 2 pixels border on th top and bottom
  • 20 pixels margin on the left and right
  • 10 pixels margin on the top and bottom

총 dimenstion(364px by 244px)는 모든 Vertiacal dimenstion을 함께 추가하고 모든 horizontal dimestion을 함께 추가하여 계산한다.

이러한 구성 요소로 인해 parent's containing area보다 큰 요소가 발생할 수 있다.

parent's containing area보다 큰 요소를 모두 보기위해, 

overflow property는 box 외부에 overflow되는 내용의 발생을 제어한다.

가장 일반적으로 사용되는 값은 다음과 같다.

  • hidden: overflow되는 모든 내용이 보이지 않게 숨겨진다.
  • scroll: 스크롤 막대가 요소의 상자에 추가되어 스크롤을 통해 나머지 내용을 볼 수 있다.
  • visible: overflow 콘텐츠가 포함된 요소 외부에 표시되며, 기본값이다.
p {
  overflow: scroll; 
}

예시에서 paragraph 내용 중 하나라도 overflow되는 경우(사용자가 브라우저 창의 크기를 조정할 수 있음) 사용자가 나머지 내용을 볼 수 있도록 스크롤 막대가 나타난다.

 

overflow  property은 상위 요소에 설정되어 하위 요소를 렌더링하는 방법을 웹 브라우저에 지시한다.

예를 들어 div의 overflow property이 scroll로 설정된 경우 이 div의 모든 하위는 스크롤 막대와 함께 overflow 콘텐츠를 표시한다.

 

horizontal 및 vertical value를 구분하는 overflow-x 및 overflow-y와 같은 추가적인 property를 포함하여 overflow에 대한 자세한 내용을 보려면 MDN Document로 이동!

Resseting Defaults

모든 주요 웹 브라우저에는 external stylesheet이 없을 때 사용하는 default styleheet가 존재한다.

이러한 default stylesheet를 user agent stylesheets라고 한다.

(이 경우 User agent라는 용어는 브라우저의 기술 용어이다.)

 

User agent stylehseet에는 padding 및 margin에 대한 기본값을 설정하는 기본 CSS 규칙이 있는 경우가 많다.

이것은 브라우저가 HTML 요소를 표시하는 방법에 영향을 미치며, 이것은 개발자가 웹 페이지를 설계하거나 스타일링하는 것을 어렵게 할 수 있다.

 

많은 개발자가 이러한 기본값을 재설정하여 새 슬레이트로 작업할 수 있도록 한다.

* {
  margin: 0;
  padding: 0;
}

예제의 코드는 모든 HTML 요소의 기본 여백과 패딩 값을 재설정한다.

이것은external stylehseet의 첫 번째 CSS 규칙이다. 두 property 모두 0으로 설정된다.

이러한 property를 0으로 설정하면 측정 unit이 필요하지 않는다.

Visibility

visibility property를 사용하여 요소를 보기에서 숨길 수 있다.

 

visibility property는 다음 값 중 하나로 설정할 수 있습니다.

  • hidden: 요소를 숨긴다.
  • visible: 요소를 표시한다.
  • collapse: 요소를 접는다.
<ul>
  <li>Explore</li>
  <li>Connect</li>
  <li class="future">Donate</li>
</ul>
.future {
  visibility: hidden;
}

예에서 future의 class가 있는 목록 항목은 브라우저에서 보이지 않게 숨겨진다.

 

그러나 사용자는 브라우저에서 소스 코드를 보고 목록 항목의 내용(예: Donate)을 계속 볼 수 있다.

또한 웹 페이지는 요소의 내용만 숨기는데, 그러면 요소가 표시되도록 하는 빈 공간이 계속 남아 있게 된다.

 

Note: display: none 과 visibility: hidden의 차이점은 무엇인가?

display: none 을 포함한 요소는 웹 페이지에서 완전히 제거되지만,visibility: hidden을 포함한 요소는 웹 페이지에 표시되지 않지만 할당된 공간은 표시된다.

 

 

참고

 

Improved Styling with CSS: Learn CSS: The Box Model Cheatsheet | Codecademy

In this course, you will learn how to use the Box Model to position HTML elements on your web page.

www.codecademy.com

 

overflow - CSS: Cascading Style Sheets | MDN

overflow overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; overflow: inherit; overflow: initial; overflow: unset; The overflow property is specified as one or two keywords chosen from the list

developer.mozilla.org

 

 

 

 

 

 

반응형

'IT > CSS' 카테고리의 다른 글

CSS: Display and Positioning  (0) 2021.05.07
CSS: Box Model -2  (0) 2021.05.04
CSS: Typography  (0) 2021.05.03
CSS: Colors  (0) 2021.05.03
CSS: Selectors and Visual Rules  (0) 2021.05.02

관련글

댓글

티스토리툴바