Codesigner

[CSS3] CSS Box Model - Introduction (2) & Review 본문

CSS

[CSS3] CSS Box Model - Introduction (2) & Review

eunsukimme 2019. 4. 25. 15:04

지금까지 박스 모델의 컴포넌트: 콘텐츠, 테두리, 패딩에 대해서 알아보았다. 이번 포스팅에서는 네 번째 컴포넌트이자 마지막 컴포넌트인 마진(margin)에 대해서 알아보자

 

 

 

Margin I

 

마진은 박스의 외부의 공간을 말한다. margin 속성으로 이 공간의 크기를 조절할 수 있다

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

위 코드는 모든 p 요소의 박스 외부에 20px만큼의 공간을 설정한다. 이는 다른 HTML 요소들이 각 p 요소들과 적어도 20px 만큼 떨어져야 한다는 것을 의미한다. 만약 한 방향에 대해서만 외부 공간을 설정해주고 싶다면, 다음과 같은 속성을 사용할 수 있다

 

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

각 속성들은 명시된 방향만의 외부 공간을 설정한다

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

위 코드는 박스 오른쪽의 외부 공간을 15px로 설정한다

 

 

 

Margin II

 

만약 네 방향의 외부 공간을 각각 달리 설정해주고 싶다면 다음과 같이 각 방향의 마진을 부여할 수 있다

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

위 코드는 위쪽에서부터 시계방향으로 위쪽 6px, 오른쪽 10px, 아래쪽 5px, 왼쪽 12px 만큼의 마진을 설정해주고 있다. 이러한 방법을 사용하기 위해선 반드시 네 방향의 마진 값이 주어져야 한다. 또한 패딩에서 보였던 것과 마찬가지로 위쪽과 아래쪽, 왼쪽과 오른쪽 즉 상반된 방향에 같은 마진을 주고 싶다면 다음과 같은 shortcut도 사용할 수 있다

p {
  margin: 6px 12px;
}

위 코드는 위쪽과 아래쪽에 6px, 오른쪽과 왼쪽에 12px 만큼의 마진을 설정한다

 

 

 

Auto

 

margin 속성은 또한 콘텐츠를 중앙에 오게 설정할 수 있다. 그러나 반드시 몇 가지 문법적인 규칙을 지켜야 한다. 다음 코드를 보자

div {
  margin: 0 auto;
}

위의 코드는 모든 div 요소들을 그들이 담겨진담긴 컨테이너 내에서 중앙에 배치되게 만든다. 첫 번째로 주어진 값 0은 위쪽과 아래쪽의 마진이다. 두 번째로 주어진 auto값은 해당 요소의 왼쪽과 오른쪽의 마진을 해당 요소가 담긴 컨테이너 내에서 중앙에 올 때까지 브라우저가 조정한다는 것이다. 위 코드에서 모든 div들이 가운데로 조정되어야 할 것 같지만, 실제론 그렇게 되지 않는다. 왜 그럴까?

 

요소를 가운데에 위치시키기 위해선 width 속성이 반드시 명시되어야만 한다. 그렇지 않으면, width 속성의 값은 자동적으로 이를 담고있는 상위 요소의 전체 width로 설정된다(i.e. <body>). 즉 페이지의 전체 width를 취하는 요소를 가운데에 배치시키는 것은 불가능하다

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

 위 코드는 div.headline 의 width를 400px로 설정한다. 400px은 대부분의 스크린의 넓이보다 작은 수치이기 때문에, div.headline은 이를 담고 있는(width 가 400px 보다는 큰) 요소 안에서 중앙에 위치할 수 있다

 

 

 

Margin Collapse

 

패딩은 요소의 테두리 안에서 생성되는 공간이라고 배웠다. 반면에 마진은 요소 테두리 바깥에서 생성되는 공간이다. 한 가지 또 다른 차이는 위쪽과 아래쪽, 즉 수직적(vertical) 마진은 겹쳐진다(collapse)는 것이다. 물론 패딩은 겹쳐지지 않는다

 

왼쪽과 오른쪽 마진, 즉 수평적(horizontal) 마진은 패딩과 마찬가지로 더해지게 된다. 이해를 돕기 위해 예를 들어 #div-one, #div-two라는 id의 서로 다른 두 div 가 서로의 양 옆에 위치하고 있다면, 각 div의 마진의 합만큼 서로가 떨어져서 위치하게 된다

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

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

위 코드에서 #img-one 과 #img-two 사이의 수평적 간격은 40px이 된다. 이러한 수평적 마진과는 달리, 수직적 마진은 더해지지 않는다. 대신 두 수직적 마진 중 더 큰 값이 두 요소 사이의 간격을 결정하게 된다

#div-one {
  margin-bottom: 30px;
}

#div-two {
  margin-top: 20px;
}

위 코드에서 #div-one과 #div-two 사이의 수직적 간격은 30px이 된다. 수직적 마진은 겹쳐지기 때문에 더 큰 값(30px)이 수직적 마진을 결정한다

 

이러한 개념을 보다 쉽게 이해하는 방법은 키가 큰 사람과 키가 작은 사람을 생각해보는 것이다. 키가 큰 사람이 키가 작은 사람을 밀어내면, 키가 작은 사람은 키가 큰 사람을 밀어내려고 해도 키가 큰 사람보다 팔이 짧아서 팔이 닿지 않는다. 수평적 마진이 작동하는 원리는 이와 유사하다. 아래 그림은 이러한 수직적, 수평적 마진의 작동방식을 설명한다

<그림 1> Vertical Magin Collapse(출처: codecademy.com)

 

 

 

Minimum and Maximum Height and Width

 

웹 페이지는 여러 사이즈의 디바이스에서 보이기 때문에, 웹 페이지 내의 콘텐츠는 이러한 사이즈의 변화로 고통받기 쉽다. 이러한 문제를 해결하기 위해 CSS에서는 요소 박스가 얼마나 좁고 넓게 보일 수 있는지 조절하는 두 가지 속성을 제공한다

 

  1. min-width - 요소의 최소 가로 길이를 설정한다
  2. max-width - 요소의 최대 가로 길이를 설정한다
p {
  min-width: 300px;
  max-width: 600px;
}

위 코드는 모든 p 요소들의 가로 길이를 300px 밑으로 줄어들지도, 600px 위로 늘어나지도 않게 한다. 텍스트와 같은 콘텐츠는 브라우저 윈도우가 좁아지거나 넓어져서 읽기 어려워지는 경우가 발생한다. 위 두 속성은 콘텐츠 가로길이를 제한함으로써 이러한 문제를 미연에 방지할 수 있다

 

또한 height의 최소, 최대 길이를 설정할 수 있다

 

  1. min-height - 요소의 최소 세로 길이를 설정한다
  2. max-height - 요소의 최대 세로 길이를 설정한다
p {
  min-height: 150px;
  max-height: 300px;
}

위 코드는 모든 p 요소의 세로 길이를 150px 밑으로 줄어들지도, 300px 위로 늘어나지도 않게 한다. 만약 max-height가 너무 낮게 설정되면 어떻게 될까? 콘텐츠가 박스 밖으로 흘러넘쳐서 읽을 수 없게 된다. 다음 섹션에서 이를 어떻게 해결할 수 있는지 알아보도록 하자

 

 

 

Overflow

 

다음과 같은 속성의 이미지가 존재한다고 생각해보자

 

  • 300 px wide
  • 200 px tall
  • 10 px 수평 패딩
  • 10 px 수직 패딩
  • 2 px 테두리
  • 20 px 수평 마진
  • 10 px 수직 마진

총 364px의 가로와 244px 의 세로 길이를 갖는 이미지이다. 때로는 이 컴포넌트가 부모 요소보다 더 큰 영역을 차지하게 될 때도 존재할 것이다. 부모 요소보다 더 큰 영역을 차지하는 요소의 모든 부분을 어떻게 보여줄 수 있을까?

 

overflow 속성은 이렇게 콘텐츠가 오버플로우 되었을 때 콘텐츠를 어떻게 보여줄지를 설정한다. overflow 속성은 다음과 같은 키워드를 값으로 가질 수 있다: 

 

  • hidden - 오버플로우 된 콘텐츠는 보이지 않는다
  • scroll - 해당 요소에 스크롤 바가 생성된다. 오버플로우 된 콘텐츠는 스크롤하여 확인할 수 있다
  • visible - 오버플로우된 콘텐츠가 컨테이너 요소 바깥으로 빠져나온다. 디폴트 값이다
p {
  overflow: scroll; 
}

위 코드는 p 요소들이 오버플로우 되면 스크롤 바가 생성되어 오버플로우 된 콘텐츠를 스크롤하여 볼 수 있게 한다. overflow 속성은 부모 요소에서 설정된다. overflow 속성이 설정된 요소의 자식 요소를 웹 브라우저에게 어떻게 렌더링 하면 되는지 알려주는 것이다. 예를 들어, 한 div 요소의 overflow 속성이 scroll이라면, 해당 div 요소의 모든 자식 요소들은 오버플로우 될 때 스크롤 바가 생성된다

 

 

 

Resetting Defaults

 

대부분의 메이저 웹 브라우저들은 디폴트 stylesheets를 갖고 있다. 이러한 디폴트 stylesheets는 'user agent stylesheets' 라고 알려져 있다. 이 경우에 "user agent" 라는 단어는 브라우저가 작동하는 기술적인 방식을 의미한다(다른 여러 의미도 존재한다). User agent stylesheets는 종종 디폴트 마진과 패딩을 포함하는 디폴트 CSS 룰을 포함한다. 이는 HTML 요소들이 어떻게 보이는지에 대해 영향을 미치면서 개발자들이 웹 페이지를 디자인하는데 어려움을 겪게 만드는 요인으로 작용한다

 

많은 개발자들이 개발을 깨끗한(?) 상태로 시작하기 위해 이러한 디폴트 값을 선택해서 사용한다

* {
  margin: 0;
  padding: 0;
}

위 코드는 디폴트 마진과 패딩을 설정하고 있다. 이는 보통 첫 번째 CSS 파일에서 정의되는 규칙이다

 

 

 

Visibility

 

요소들이 visibility 속성에 의해서 감추어질 수 있다. visibility 속성은 다음과 같은 키워드를 값으로 가질 수 있다:

 

  • hidden - 요소를 숨긴다
  • visible - 요소를 나타낸다
<ul>
  <li>Explore</li>
  <li>Connect</li>
  <li class="future">Donate</li>
<ul>
.future {
  visibility: hidden;
}

위 예제는 future 클래스를 가진 li 요소를 숨긴다. 하지만 주의해야 할 것은, 사용자는 여전히 브라우저에서 소스코드를 확인함으로써 숨겨진 li 요소의 콘텐츠를 확인할 수 있다(e.g., Donate). 나아가 웹 페이지는 해당 요소의 콘텐츠만을 숨긴다. 이는 해당 요소가 자리해야할 공간은 여전히 존재한다는 것을 의미한다. display: none과 visibility: hidden의 차이는 다음과 같다. display: none은 웹 페이지 상에서 해당 요소를 아예 지워버리는 반면, visibility: hidden은 콘텐츠만 숨길뿐 공간은 여전히 차지한다는 것이다

 

 

 

Review

 

CSS Box Model - Introduction (1) 에서와 함께 이번 포스팅을 통해 CSS의 박스 모델의 네 가지 속성들에 대해서 알아보았다: 세로(height)와 가로(width), 패딩(padding), 테두리(border), 마진(margin). 박스 모델을 이해하는 것은 심화된 HTML 과 CSS를 이해하는 데 있어서 매우 중요하다. 지금까지 배운 것들을 정리해보면 다음과 같다

 

  1. 박스 모델은 HTML 요소들 사이와 주변 공간을 이루기 위해 사용되는 속성들의 집합이다
  2. 콘텐츠 영역의 가로와 세로 길이는 픽셀(px)이나 비율(percentage)로 설정할 수 있다
  3. 테두리는 콘텐츠 영역과 패딩을 감싼다. 색, 스타일, 굵기를 설정할 수 있다
  4. 패딩은 콘텐츠 영역과 테두리 사이의 공간이다. 픽셀(px)이나 비율(percentage)로 설정할 수 있다
  5. 마진(margin)은 요소의 테두리 바깥의 공간이다
  6. 수평적(horizontal) 마진은 더해지고, 즉 인접한 요소 사이의 수평 공간은 각 요소의 오른쪽, 왼쪽 마진을 더한 값과 같다
  7. 수직적(vertical) 마진은 겹쳐지고, 즉 인접한 요소 사이의 수직 공간은 각 요소의 위쪽, 아래쪽 마진 중 더 큰 값으로 결정된다
  8. margin: 0 auto 는 해당 요소를 이를 담고 있는 부모 요소 안에서 중앙에 위치시킨다
  9. overflow 속성은 자식 요소가 오버플로우 될 때 브라우저에서 보이는 양상을 정의한다. display, hide, scroll 키워드를 값으로 가질 수 있다
  10. visibility 속성은 요소의 숨김과 보여짐의 여부를 설정한다

 

 

'CSS' 카테고리의 다른 글

[CSS3] CSS Display and Positioning - Flow of HTML (1)  (0) 2019.04.26
[CSS3] CSS Box Model - Change Box Model  (0) 2019.04.26
[CSS3] CSS Box Model - Introduction (1)  (0) 2019.04.21
[CSS3] CSS Visual Rules - basic  (0) 2019.04.04
[CSS3] CSS Selector - Advanced 및 Review  (0) 2019.04.04
'CSS' Related Articles more
Comments