CSS Tutorial (3) Box Model / CSS 시작하기 (3) 박스 모델

 

 

 

 

 

챕터 2의 중반부터는 박스모델 관련 내용이 주를 이룬다.

중요한 부분이라고도 말씀하시고 자료를 다시 자주 찾게 될 것 같아 따로 박스모델 부분만 모아 작성해본다.

 

강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.

https://class101.net/ko

CLASS101+ | 세상의 모든 클래스를 하나의 구독으로

 

 

 

 

 

 

챕터2. 텍스트와 박스 모델 - 텍스트, 여백 그리고 배경까지

 

 

 

 

 

3강. 박스모델 1편, 박스모델 소개

 

(1) 박스모델 (Box-Model)

 브라우저가 렌더링 할 때 모든 요소들은 기본적으로 사각형 형태의 영역을 차지한다.

이 영역을 '박스'라고 표현하며, CSS에서 박스의 크기와 위치 속성 (색, 배경, 테두리 모양 등)을 결정해줄 수 있다.

 

하나의 박스는 다음과 같은 네 가지의 영역으로 구분된다.

1. 콘텐츠 영역

2. 안쪽 여백

3. 경계선 (테두리)

4. 바깥쪽 여백

 

 

 

 

콘텐츠 영역에는 이미지 텍스트등 내용물이 들어간다. 박스의 중심부에 위치한다.

그리고 이 콘텐츠는 언제나 테두리로 감싸져있다.

지난 시간에 배운 border 속성을 통해 테두리의 색상, 두께, 스타일 등을 정의할 수 있다. 

 

또한 사용자가 원할 경우, 이 테두리의 안쪽에 여백을 추가하여 

콘텐츠와 테두리 사이의 공간을 마련해줄 수 있다. 

이러한 공간을 '안쪽 여백'이라 부른다.

 

 또한 테두리의 바깥쪽에도 여백을 추가함으로써 원하는 만큼 다른 요소와 거리를 둘 수 있다.

이를 '바깥쪽 여백'이라 한다.

 

박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다.

- 콘텐츠 영역 : width, height

- 안쪽 여백 : padding

- 바깥쪽 여백 : margin

- 테두리 : border-width

 

 

 

 

(2) 실습

 

 

블록레벨요소인 div와 인라인요소인 span을 사용해 구성해보았다.

 

 

 

 

 

 

div 태그의 경우 추가한 바깥, 안쪽 여백과 테두리까지 뚜렷이 잘 보인다.

재미있는 점은 콘텐츠 영역을 작게 줄였음에도 불구하고 블록레벨답게 전체 너비를 모두 차지하고 있다.

보기에는 테두리만큼의 영역만큼만 차지하는 것처럼 보여도 블록으로 영역을 차지한다는 점을 잊으면 안된다.

 

 

 

 

 

인라인 요소와 블록레벨요소의 가장 큰 차이점은 속성중, 'width, height"를 사용할 수 없다는 것이다.

즉, 콘텐츠 영역을 재정의할 수 없다. (그 외 padding, margin, border는 모두 사용이 가능하다.)

어떤 콘텐츠가 들어가든 거기에 딱 맞는 공간만큼의 콘텐츠 영역이 배정된다는 것이다.

만약 위의 이미지처럼 width, height 속성을 사용하고 싶으면 어떻게 해야할까?

방법은 display 속성에서 속성값을 inline-block으로 설정해주는 것이다.

해당 속성을 추가하면 인라인요소의 특징을 그대로 가져가면서도 (너비를 몽땅 차지하지 않는다거나..)

콘텐츠 영역을 재정의할 수 있다.

 

 

 

 

| 정리 |

* 브라우저는 요소를 렌더링할 때 박스 모델에 따라 사각형으로 표현한다.

* 하나의 박스는 네 개의 영역으로 구성된다.

* 콘텐츠 영역, 안쪽 여백, 경계선, 바깥쪽 여백.

* 각 영역의 크기를 정의하는 속성이 존재한다.

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

4강. 박스모델 2편, margin padding 다루기

(상하좌우 여백 다르게 지정하기!)

 

(1) padding과 margin

요소의 테두리를 기준으로 안쪽에 형성되는 여백을 padding, 

바깥쪽에 형성되는 여백을 "margin"이라고 한다.

 

여백 각 면, 위 아래 양 옆에 개별적으로 두께를 정의할 수 있다.

다음 두 가지 방법을 통해 가능하다.

- 하위 속성 정의하기

- 여러 값을 한번에 정의하기

 

 

 

 

(2) 하위 속성 정의하기

사면은 각각의 하위 속성을 가진다.

상단 여백: padding-top / margin-top

하단 여백: padding-bottom / margin-bottom

좌측 여백: padding-left / margin-left

우측 여백: padding-right / margin-right

 

 

 

개별적으로 잘 적용된 모습을 볼 수 있다.

(주황색 - margin 영역 / 오른쪽은 블록레벨이 차지하는 공간 포함해서 뜨는 것 같다.)

(노란색 - padding 영역)

 

* 또한 CSS에서는 나중에 쓴 것이 적용되기 때문에 맨 앞에 쓴 margin, padding값은 

각 면의 여백이 새롭게 정의되면서 자연스레 적용되지 않는다.

 

* 단위를 안쓰면 적용되지 않는다. 깜빡하지 말기!

 

 

 

 

(3) 여러 값을 한번에 정의하기

padding과 margin은 네 면의 여백에 대한 단축속성이다.

 

*예시코드

span{

        display: inline-block;

        width: 100px; height: 100px;

        margin: 10px 20px 30px 40px;

}

=> margin: 상단여백 오른쪽여백 하단여백 좌측여백 순이다. (시계방향)

 

 

 

<div> 태그에 적용해보았다.

 

 

 

 

 

값을 두개만 적어주는 경우도 있다.

값이 두개이면 첫번째 값은 상하 여백으로, 두번째은 좌우 여백 값으로 쓴다.

값이 세개인 경우도 있다 그런경우 첫번째 값은 상단, 두번째 값은 우측 좌측, 세번째 값은 하단 여백이 된다.

 

 

 

 

| 정리 |

* 여백은 상하좌우 네 면에 존재하는 영역이다.

* 상하좌우 개별 속성을 사용하면 여백의 두께를 개별 정의할 수 있다.

* padding과 margin 속성에 여러 면의 여백을 함께 정의할 수 있다.

* 어떤 방법을 사용할지는 사용자(개발자) 마음이다.

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

5강. 박스모델 3편, box-sizing

 

(1) 박스모델 사이즈 계산

실질적으로 요소의 크기라고 볼 수 있는 부분은 

콘텐츠 영역, 안쪽 여백, 경계선(테두리) 박스 영역이다.

특히 테두리는 요소의 영역을 구분해준다.

 

바깥쪽 여백은 실질적인 요소의 영역에 포함된다기 보다는,

요소와 요소 사이의 거리를 띄워주는 역할을 한다.

 

 

 

 

div 150x130 이라고 표기된다.

이는 다음을 계산한 값이다.

width (100px) + border (5px) *2 (양쪽) + padding (20px) * 2 (양쪽) = 150

height (100px) + border (5px) *2 (양쪽) + padding (10px) *2 (양쪽) = 130 

 

즉, margin의 영역은 요소의 박스 크기에 포함되지 않는다는 것을 알 수 있다.

우리가 박스 크기를 알아야 하는 이유가 뭘까?

예를 들어, 이 요소는 사이즈를 200으로 해주고 싶다! 라고 생각하면 border와 padding 값까지 신경써서 계산한 뒤,

width height 값을 정해야한다는 의미이다.

 

 

 

 

(2) box-sizing

padding이나 border의 값때문에 요소의 크기가 덩달아 커지는 것은 불편할 수 있다.

이것에 대한 대응책으로, CSS에서는 box-sizing이라는 속성이 존재한다.

 

box-sizing 속성의 다음 속성값을 이용하면,

요소의 width와 height를 계산하는 방법을 달리 지정할 수 있다.

 

1. content-box: 디폴트로 설정된 계산 방식이다. 우리가 width와 height라는 속성을 입력하면,

이는 콘텐츠의 영역만을 의미한다. (아무것도 안적으면 이 방식으로 계산된다.)

 

2. border-box: width와 height를 지정하면 그것은 콘텐츠의 영역만을 이야기하는 것이 아닌,

border와 padding값까지 포함하여 지정된 것이다.

(중간에 padding값이나 border값을 바꾼다고해서 요소가 갑자기 커져서 다시 width height 값을 

조정해주어야 하는 번거로움을 덜어준다.)

 

 

 

아까와 같은 코드에서 box-sizing: boder-box; 라는 코드만 추가해주었다.

그러자 박스의 크기가 100x100으로 바뀐 것을 볼 수 있다.

대신 콘텐츠 영역도 padding값과 border 값을 뺀 만큼 줄어든 것을 확인할 수 있다.

 

 

content-box와 border-box는 그 목적에 따라 쓰임을 달리하면 된다.

content-box : 콘텐츠 영역의 공간을 width height를 바꿔도 절대적으로 유지하고 싶다면 선택

border-box : 전체적인 사이즈를 절대적으로 유지하고 싶다면 선택

 

 

 

 

| 정리 |

* 박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정된다.

* box-sizing 속성은 너비와 높이가 포함할 영역을 변경함으로써 너비와 높이의

계산 방법을 결정할 수 있다.

* box-sizing의 기본값은 content-box이다.

* box-sizing을 border-box로 지정하면 테두리 영역까지 너비와 높이에 포함된다.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

6강. 박스모델 4편, background

 

(1) 배경(background)과 하위 속성

배경(background)은 콘텐츠의 배경을 정의한다.

단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

물론 아래의 하위 속성을 모두 작성해줄 필요는 없다.

자신이 필요한 하위 속성만을 골라서 사용해주면 된다.

 

 

- 하위 속성 목록 (이 외에도 많지만 대표적인 속성들만 추린 것)

background-color : 배경 색을 정의한다.

background-image : 배경 이미지를 정의한다.

background-position : 배경 이미지의 초기 위치를 정의한다.

background-size : 배경 이미지의 크기를 정의한다.

background-repeat : 배경 이미지의 반복 방법을 정의한다.

 

 

 

 

(2) background-color

 

 

15번째 줄을 통해 배경 색상을 바꿔보았다.

 

 

 

 

 

(2) background-image

 

background-image는 url이라는 함수 안에 파일 주소를 적어 배경 이미지를 추가할 수 있다. 

(html 파일과 같은 폴더에 넣어두었다.)

그런데 배경이 계속해서 반복되고 있다.

콘텐츠 박스의 크기보다 이미지의 크기가 작을때 CSS에서는 기본적으로 빈 공간을 이미지를 반복해 채우도록 설정 되어있다.

 

background-repeat 속성을 통해 이 부분을 수정해줄 수 있다.

 

 

 

 

 

(3) background-repeat

 

 

background-repeat: no-repeat 이라는 코드로 속성을 바꿔주자 더이상 배경이 반복되지 않는 것을 볼 수 있다.

참고로 속성값은 background-repeat: repeat이 기본이여서 아까처럼 반복된 화면이 디폴트로 보인 것이다.

 

 

 

 

 

 

(4) background-position

 

 

background-position의 속성값은 다양한 위치의 조합으로 바꿀 수 있다.

ex) background-position: center bottom / left top / right bottom ...

여기서는 center하나를 입력해 가운데에 이미지가 나타나도록 했다.

 

 

 

 

 

(4) background-size

배경 이미지의 사이즈를 정해줄 수 있는 속성값은 꽤 다양하다.

직접 수치를 입력해도 되고 키워드를 입력해도 된다.

수치 입력 방식, 대표적인 키워드 입력 방식을 차례차례 실습해본다.

 

 

 

background-size: 500px 500px;

콘텐츠 요소 사이즈에 딱맞게 이미지 크기를 직접 조정해주었다.

작성 순서는 너비 다음 높이이다. 

 

 

 

 

 

 

 

 

 

background-size: cover;

cover 속성은 배경 이미지의 비율을 유지하는 선에서 확대하여 꽉 채워주는 방식이다.

 

 

 

 

 

 

 

 

 

background-size: contain;

비율을 유지하고, 이미지 변경 없이 영역에 채워주는 방식이다.

 

 

 

 

 

 

 

 

 

 

 

 

background: url.. no-repeat; 

background라는 속성 안에 쓰고 싶은 요소를 속성명없이 써줘도 적용된다.

그런데 position이랑 size는 요상하게 바로 background 안에 cneter contain이라고 써도 적용이 안되었다..

 

 

 

 

 

 

| 정리 |

* background는 콘텐츠의 배경을 정의한다.

* 단축 속성으로써, 다양한 하위 속성을 포함한다.

* 하위 속성을 한번에 정의할 경우, 정의할 속성과 정의를 생략할 속성을 다양하게 

선택할 수 있어 여러 경우의 수가 존재한다.

* 학습 팁! 정의 시 여러 경우의 수가 존재하는 속상을 학습할 때는 외우려고 하기 보다는

경험을 통해 체득하는 방향으로 공부하자.

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

여기까지가 박스모델 강의 내용. 끝!

 

 

우주 이미지 출처 (Source) : FelixMittermeiner, 픽사베이 라이선스에 따라 무료로 사용가능, 출처 안 밝혀도 됨,

https://pixabay.com/ko/photos/%ed%95%98-%ec%88%98-%eb%b3%84-%eb%b0%a4%ed%95%98%eb%8a%98-2695569/

 

 

이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를

기반으로 작성되었음을 알립니다.