모든 콘텐츠는 영역이 있다.
모든 컨텐츠는 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
박스는 항상 직사각형이고 너비와 높이를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정한다. 다음 예제에 width와 height
속성을 넣어 테스트해보자.
박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣어보자.
<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>[코드] HTML 예시
h1 {
background : gray;
width : 60%;
}
p {
background : rgba(255, 84, 104, 0.3);
width : 80%;
height : 200px;
}
span {
background : yellow;
width : 100px;
height : 100px;
}[코드] CSS 예시
codepen 에서 확인해보자.
질문
- 위 HTML에서 줄바꿈이 적용되는 코드는 무엇일까? 줄바꿈이 적용되지 않은 태그는 무엇일까?
- 위 CSS 코드에서 실제로 작동되지 않는 것이 존재한다. 무엇일까?
줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고 크기지정을 할 수 없는 박스는 inline 박스라고 부른다. 그리고 이 두가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.
위 예제에서 줄바꿈이 되는 태그와 그렇지 않은 태그는 무엇일까?
정답
위 HTML에서 줄바꿈이 되는 태그는 무엇일까? 줄바꿈이 적용되지 않는 태그는 무엇일까?
- 줄바꿈이 되는 태그: <h1> <p>
- 줄바꿈이 되지 않는 태그: <span>
정답을 통해 <h1> <p> 등은 block 박스이며 <span>은 inline 박스임을 알 수 있다. 작성한 태그가 어떤 박스인지 어떻게 확인할 수 있을까? 크롬 브라우저에서 단축키 F12를 입력해 개발자 도구를 열고 개발자도구의 Elements 탭에서 이 내용을 확인할 수 있다. block 요소의 목록은 MDN block 엘리먼트 목록 을 통해, inline 요소의 목록은 inline 엘리먼트 목록 을 통해 확인할 수 있다.
다음은 Block level element 이다.
다음은 inline level element 이다.
각 태그가 어떤요소인지 무작정 외우는 것보다는 개발하면서 자연스럽게 익혀보자.
Block 요소의 대표적인 예는 <div>, <p> 이다. Inline 요소의 대표적인 예는 <span> 이다.
두번째 질문에 대한 정답을 알아보자. 어떤 태그에는 CSS의 width, height 등 박스의 크기를 설정하는 속성이 작동하지 않는 경우가 있다.
정답
위 CSS 선언 중 실제로 작동하지 않는 것이 존재한다. 그게 무엇일까?
<span>
위 예제에서 <span> 태그의 경우에는 width, height 속성이 적용되지 않는다. block 박스와는 다르게
inline 박스는 width, height 속성이 적용되지 않는다. 이번엔 위 CSS에서 span에 대한 속성을 다음과 같이 바꿔보겠다.
span {
background: yellow;
display: inline-block;
width: 100px;
height: 100px;
}[코드] CSS에서 span 태그에 'display: inline-block'을 추가한다.
codepen 에서 확인해보자.
inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서 자체적으로 고유의 크기를 가진다.
이 세가지 박스의 특징을 정리해보겠다.
| block | inline-block | inline | |
| 줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
| 기본적으로 가지는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능여부 | 가능 | 가능 | 불가능 |
[표] block, inline-block, inline의 특징
박스를 구성하는 요소
CSS 박스 모델은 다음 그림만 기억하면 된다.
border(테두리)
테두리는 심미적인 용도 외에도 개발 과정에서도 매우 의미있게 사용된다. 각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다. 다음의 코드를 통해 테두리를 실선으로 확인할 수 있다.
p {
border: 1px solid red;
}[코드] p태그에 1px의 빨간색 실선을 추가한다.
border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다. 괄호 안에 적힌 것들이 바로 border 속성에 추가할 수 있는 세부 속성이다. 이외에도 border-style mdn 과 같이 구글에 검색하면 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있다.
질문
- 테두리를 점선으로 만들고 싶으면 어떻게 해야할까? border-style 의 값 중 하나를 바꿔보자.
- 테두리를 둥근 모서리로 만들 수도 있다. 어떤 속성을 사용하면 될까? 참고로 border 속성만으로는 둥근 모서리를 만들 수 없다.
- 박스 바깥쪽에 그림자를 넣을 수도 있다. 어떤 속성을 사용하면 될까? 참고로 그림자를 명확하게 보기 위해서는 background 속성이불투명해야한다.
margin(바깥 여백)
p {
margin: 10px 20px 30px 40px;
}[코드] p태그의 상하좌우에 여백을 추가한다.
각각의 값은 top, right, bottom, left로 시계방향이다. 크롬 개발자 도구의 Elements 탭에서 위의 코드가 어떻게 적용되는지 확인할 수 있다. margin은 주황색으로 표현된다.
값을 두개만 넣으면 top과 bottom이 10px, left 및 right가 20px 이다.
p {
margin: 10px 20px;
}[코드] p태그의 위아래와 좌우에 각각 여백을 추가한다.
값을 하나만 넣으면 모든 방향의 바깥 여백에 적용된다.
p {
margin: 10px;
}[코드] p 태그의 모든 방향에 여백을 추가한다.
다음과 같이 방향을 특정한 속성도 존재한다.
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}[코드] margin의 위치를 특정해 여백을 추가할 수 있다.
위와 같은 규칙은 padding에도 동일하게 적용된다.
재미있게도 바깥 여백에는 음수값을 지정할 수 있다.
여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다. 극단적으로 사용하면 화면(viewport)에서 아예 사라지게 하거나 다른 엘리먼트와 겹치게 만들 수도 있다.
p {
margin-top: -2rem;
}[코드] p태그의 margin-top 속성에 음수 값을 지정한다.
변경사항을 codepen 에서 확인해보자.
padding (안쪽 여백)
padding은 border를 기준으로 박스 내부의 여백을 지정한다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left 이다.
p {
padding: 10px 20px 30px 40px;
}[코드] p태그의 padding 속성에 여백을 추가한다.
배경색이나 border를 적용하면 안쪽 여백을 더욱 선명하게 확인할 수 있다.
p {
padding: 10px 20px 30px 40px;
border: 1px solid red;
background-color: lightyellow;
}[코드] p태그에 border, background-color 속성을 추가한다.
크롬 개발자 도구의 Elements 탭에서 다음 그림과 같은 모양을 확인할 수 있다. padding은 초록색으로 표현된다.
박스를 벗어나는 컨텐츠 처리
박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정해보자. 컨텐츠가 박스 바깥으로 빠져나가는가? 아니면 박스에 맞게 가려지는가?
p {
height: 400px;
}[코드] p태그의 height 속성에 콘텐츠가 차지하는 높이보다 작은 값을 할당한다.
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다.
그러나 이런 상황을 원하는 사람은 거의 없을 것이다. 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더이상 표시하지 않거나 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만든다.
p {
height: 40px;
overflow: auto;
}[코드] p태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시한다.
codepen 에서 변경사항을 확인해보자.
overflow 속성의 auto 값은 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있다. 이 때에는 overflow 속성에 hidden 값을 사용하자. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있다.
박스 크기 측정 기준
박스 크기를 측정하는 기준은 매우 중요하다. 예제를 보며 함께 살펴보자.
<div id="container">
<div id="inner">
안쪽 box
</div>
</div>[코드] html 예시
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}[코드] CSS 예시
codepen 에서 확인해보자.
어떤 부분이 문제일까? id가 container 인 박스의 width 속성에 300px를 지정했다. 그러나 개발자도구로 확인한 해당 요소의 width 값은 324px 이다. CSS에서 지정한 두 요소에 대해 아래와 같이 확인할 수 있다.
#container 의 너비는 300px이 아니라 324px이다. 브라우저는 다음과 같은 계산을 실행한다.
300px (콘텐츠 영역)
+ 10px (padding-left)
+ 10px (padding-right)
+ 2px (border-left)
+ 2px (border-right)
#inner의 100%는 300px이 아니라 364px이다. 브라우저는 다음과 같은 계산을 실행한다.
300px (300px의 100%)
+ 30px (padding-left)
+ 30px (padding-right)
+ 2px (border-left)
+ 2px (border-right)
처음 레이아웃 디자인을 할 때 가장 많이 하는 실수가 있다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우이다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만든다.
레이아웃 디자인을 조금 더 쉽게하는 방법이 있다. 여백과 테두리 두께를 포함한 박스 계산법이다. * 은 모든 요소를 선택하는 셀렉터이다. 모든 요소를 선택해 box-sizing 속성을 추가하고 border-box라는 값을 추가한다.
* {
box-sizing: border-box;
}[코드] 모든 요소에 'box-sizing: border-box'를 추가한다.
변경사항을 codepen 에서 확인해보자.
이렇게 모든 요소에 box-sizing: border-box 를 적용하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다. 일반적으로 box-sizing 은 HTML 문서 전체에 적용한다. box-sizing 을 일부 요소에만 적용하는 경우 혼란을 가중시킬 수 있다. 앞으로 레이아웃과 관련된 이야기를 할 때에는 border-box 계산법을 기준으로 이야기하자. 박스 크기 측정 기준 두가지를 항상 염두해두자.
content-box 는 박스의 크기를 측정하는 기본값이다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box 를 권장한다.
'My Wiki (CodesStates) > HTML,CSS' 카테고리의 다른 글
| (2-1) HTML/CSS 중급 - 레이아웃 (0) | 2021.08.03 |
|---|---|
| (1-4) HTML/CSS 기초 - CSS 기초 (텍스트 꾸미기) (0) | 2021.07.10 |
| (1-3) HTML/CSS 기초 - CSS 기초 (CSS 따라하기) (0) | 2021.07.10 |
| (1-2) HTML/CSS 기초 - HTML 기초(자주 사용하는 HTML 요소) (0) | 2021.07.10 |
| (1-1) HTML/CSS 기초 - HTML 기초 (기본구조와 문법) (0) | 2021.07.10 |
댓글