Block 과 Inline 그리고 Box model

Taeha Kim·2020년 7월 21일

HTML5와 CSS3

목록 보기

4/10

1. Block element와 Inline element

1.1 Block element

아래의 태그들은 전부 대표적인 Block element(이하 요소)입니다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>
Block 요소는 각 태그를 사용하여 요소를 만들었을때, 한줄전체를 차지합니다.
즉 너비가 100%라서 요소 왼쪽이나 오른쪽에 다른 요소를 삽입할 수 없습니다.

1.2 Inline element

반면 <span>, <a>, <img> 태그는 Inline 요소들이고
Block 요소와 다르게 요소 좌우에 다른 요소가 올수 있습니다.

그림으로 보는게 가장 이해가 잘됩니다.

1.3 Block 요소 <-> Inline 요소

Block 요소인<p> 태그도 CSS를 사용하여 Inline 스타일로 바꾸면 <span>태그 처럼 똑같은 디자인이 됩니다.
Inline 성질을 갖도록 하는 CSS 속성은 display속성에 inline-block;를 속성값으로 주는것과 float 속성을 사용하는 방법이 있습니다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

반대로 Inline 요소도 CSS 사용하여 display속성에 속성값으로block;을 주면
Block 스타일로 바꿀 수 있습니다.

.block-span {
  display: block;
}

참고로 display속성애 속성값으로 none;을 주면 해당 요소는 화면에서 보이지 않게 됩니다.

2. 박스 모델(box model)

웹문서에서 블록 레벨요소들은 밑에 있는 그림 처럼 박스 형태로 이루어져 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .example {
         border: 5px solid black;
         margin: 50px;
         padding: 50px;
         width: 273px;
         height:90 px;
         text-align: center;
        }
    </style>
  </head>
  <body>
    <p class="example">안녕하세요</p>
  </body>
</html>

이렇게 해서 웹브라우저로 확인하면 다음과 같습니다.

위 boder 속성을 이용하면 요소(여기선<p class="example">안녕하세요</p>)에 테두리가 만들어 집니다. 이 테두리(border)를 기준으로 바깥쪽 흰색배경 여백을 margin, 테투리 안쪽 여백을 padding, 그리고 "안녕하세요"라고 쓰여진 부분이 요소라고 합니다.

조금 자세하게 보겠습니다.

위의 그림에서

노란색은 border 영역. border의 두께는 5px이며,
주황색은 margin 영역. 위, 오른쪽, 아래, 왼쪽에 모두 50px의 여백이 있습니다.
초록색은 padding 영역. 위, 오른쪽, 아래, 왼쪽에 모두 50px의 여백이 존재합니다.
파란색 콘텐츠 요소의 가로는 273px, 세로는 90px 입니다.

기본적으로 width와 height는 콘텐츠 요소의 가로 너비(273px) 세로 높이(90px)를 나타냅니다.
따라서 박스 전체의 너비는 다음과 같이 계산 합니다.
width + left padding + right padding + left border + right border + left margin + right margin

전체 너비 483px  = 50px+5px+50px+273px+50px+5px+50px

마찬 가지로 박스 전체 높이는 다음과 같이 계산 합니다.
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

전체 높이 300px  = 50px+5px+50px+90px+50px+5px+50px

2.1 margin과 padding

margin과 padding은 위,오른쪽,아래,왼쪽 순서로 여백을 조절할 수 있다.
이때 4방향의 값을 각각 따로 줘서 4개값으로 지정할 수도 있고, 3개의 값으로 지정할 수도 있고
2개 그리고 위에서 봤듯이 1개의 값으로 값을 지정해 줄 수 있다.

1) 4개의 값으로 지정해 줄때

margin: 10px 20px 30px 40px; <- 위 오른쪽 아래 왼쪽 순서이다.
   
아래와 같은 의미이다.
           
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

2) 3개의 값으로 지정해 줄때

margin: 10px 20px 30px; <- 위 좌우 아래 순서이다.

아래와 같은 의미이다.
    
margin-top: 10px;
margin-right: 20px; margin-left: 20px;
margin-bottom: 30px

3) 2개의 값으로 지정해 줄때

margin: 10px 20px; <- 상하 좌우 순서이다.

아래와 같은 의미이다.
    
margin-top: 10px; margin-bottom: 10px;
margin-right: 20px; margin-left: 20px;

4) 1개의 값으로 지정해 줄때

margin: 10px; <- 상하좌우값 단일 지정.

아래와 같은 의미이다.

margin-top: 10px; margin-right: 10px; margin-bottom: 10px; 
margin-left: 10px;

2.2 margin: auto;

Block요소에 width를 설정하면 좌우로 쭉 늘어나지 않는데, 이때 margin: auto;를 주면 요소를 좌우 중앙에 배치할 수 있습니다.

3. border

border속성을 사용하면 컨텐츠 요소에 테두리를 그릴 수 있습니다.
여기서는 테두리의 두께와 선모양 그리고 선의 색상을 지정하는 법을 알아봅니다.

p {
  border: 두께 선스타일 선색상값;
}

위와 같이 border속성에 속성값으로 두께 선스타일 선색상값을 지정합니다.
border속성에 속성값의 순서는 상관없지만 위의 순서를 맞춰주는 것을 권장합니다.

선스타일의 종류는 아래와 같이 많지만 주로 solid를 사용합니다

dotted
dashed
solid
double
groove
ridge
inset
outset

선색상을 지정하는 방식은 rgb방식, hex방식 또는 색상 이름을 그대로 사용할수 있습니다.
예를 들면 아래와 같은 방식 모두 같은 선 색상을 뜻합니다.

p {
  border: 5px solid rgb(255,0,0);
}

p {
  border: 5px solid #FF0000;
}

p {
  border: 5px solid red;
}

border의 테두리 선은 위 오른쪽 아래 왼쪽 순서대로 각각 지정할 수 있습니다.

3.1 box-sizing

<div> 첫번째 박스, 가로 300px</div>에 클래스로

.first {
  width: 300px;
  }

<div> 두번째 박스, 가로 300px</div>에 클래스로

.second {
  width: 300px;  
  margin-bottom: 20px;  
  padding: 50px;
  border-width: 10px;

같이 적용되었다고 하면 두개의 박스는 같은 width: 300px값을 가지고 있어도 너비는 같지 않습니
다.
왜냐하면
box-sizing 속성은 기본값으로 content-box를 적용하기 때문입니다.
따라서 요소의 너비와 높이는 콘텐츠 요소 영역을 대상으로 합니다.

다시말해
첫번째 박스는 너비가 300px이지만,
두 번째 박스는 양쪽으로 테두리 10px가 더해지고, padding이 50px 씩 더해져서 너비가 420px(10+10+50+50+300 = 420)가 되었기 때문입니다.

모든 설정값을 기억하고 계산 후, 코딩을 하면 괜찮겠지만 너무 불편합니다.

따라서 box-sizing 속성의 기본값을 border-box로 바꿔서
콘텐츠 요소 영역, padding, border가 포함된 영역을 width 와 height 속성 대상으로 지정하고 시각적으로 보이는대로 width 값을 주고, 그 후에 border 안 쪽으로 padding 값을 줘서 계산하기 편하게 합니다.