개발 공부 기록하기

Section 8. CSS 박스 모델(1) 본문

프밍/CSS

Section 8. CSS 박스 모델(1)

태영(泰伶) 2023. 1. 8. 14:12

이번 섹션에 포함된 강의명은 다음과 같다.

(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)

순서 강의명 소요 시간

중요도

(필수crucial/중요important/선택nice to have)
01 박스 모델: 가로와 세로
Box Model: Width & Height		 5' 40" 필수
02 박스 모델: 테두리와 모서리 둥글리기
Box Model: Border & Border-Radius		 12' 08" 필수&선택
03 코딩 연습 12: Box Model Practice
Coding Exercise 12: Box Model Practice		 - -
04 박스 모델: 패딩
Box Model: Padding		 7' 45" 필수
05 박스 모델: 여백
Box Model: Margin		 6' 11" 필수
06 디스플레이 속성
The Display Property		 11' 46" 필수
07 CSS 단위 복습
CSS Units Revisited		 5' 39" 필수
08 CSS 단위: ems
CSS Units: ems		 8' 20" 필수
09 CSS 단위: rems
CSS Units: rems		 7' 43" 필수

 

01. 박스 모델: 가로와 세로

CSS에서 조절할 수 있는 모~~든 것이 이 '박스 모델'이란 것 안에 들어간다고 생각하면 된다!

단, 박스마다 갖는 특성은 모두 다르다^^;

 

개발자 도구(단축키:  Ctrl +  Shift +   I   )를 열어서 각각의 요소에 커서를 대면,

파란색, 주황색, 초록색 등의 박스가 내가 켜 둔 웹 페이지 화면에 나타나게 된다.

이렇게 색상으로 표시된 이 박스들이 모두 다 다른 component라는 의미가 된다.

 

 

실제 우리 눈에 어떤 모양으로 보이든 간에 상관 없이

브라우저는 안의 모든 요소를 '박스 형태'로 구분한다.

 

제일 중앙의 핵심 콘텐츠, 실질적인 정보를 담고 있는 content box,

그 주변에는 padding이 있다.

패딩을 둘러싸는 것이 테두리(border)이고,

이러한 박스 두 개 간의 간격을 margin이라고 부른다.

 

(내가 만든) 예시 1.

<!DOCTYPE html>
   <html>
      <head>
         <meta charset="UTF-8">
         <title>box model</title>
      </head>
      <body>
         <div class="margin">margin
            <div class="border">
               <div class="padding">padding
                  <div class="content">content</div>
               </div>
            </div>
         </div>
      </body>
   </html>

↓

좁아서 표시 못한 보라색 영역이 border다. (CSS 작성했던 것 잃어버림ㅠㅠ)

 

예전에 Do it! 책으로 박스 모델 공부할 때는 표를 활용했는데, 이번엔 살짝 발전...??ㅎㅎ

(쏴리..ㅠ 이 강의에서는 아직 다루지도 않은 속성 나는 Do it!으로 공부했다고 막 갖다 씀...헿)

 

이 각각의 영역들의 가로, 세로 길이를 조절할 수 있는데,

가로는 width 속성을, 세로는 height 속성을 사용한다.

 

 

 

 

 

02. 박스 모델: 테두리와 모서리 둥글리기

요소를 둘러싸고 있는 박스 모델의 테두리에서 지정할 수 있는 스타일은 여러가지가 있다.

테두리 굵기, 색상, 스타일, 모서리 곡률 등등.

테두리의 상하좌우의 스타일을 다르게 설정할 수도 있다. (= 모든 테두리가 균일할 필요는 없다.)

 

border-width

테두리의 굵기를 지정하는 데 쓰는 속성으로, 주로 px(픽셀)단위로 쓴다.

다른 단위도 쓸 수 있지만, 일반적으로 테두리는 얇고 웬만해서는 규격이 바뀌지 않기 때문에 px이 더 유용해서 그렇다.

 

border-color

테두리의 색상을 지정하는 데 쓰는 속성.

 

border-style

테두리의 스타일을 지정하는 데 쓰는 속성.

width, color, style 모두가 작성되어야 테두리가 실제로 나타난다.

 

box-sizing

요소의 크기를 어디까지로 할 것이냐 범위를 지정해주는 속성.

이 속성을 써주지 않으면 콘텐츠 영역까지만을 요소의 전체 크기로 인식한다.

border-box로 쓰면 테두리까지 포함한 만큼을 요소의 전체 크기로 인식한다.

 

border-방향-속성

border-left-width와 같이 방향과 속성을 나란히 hyphen으로 연결한 속성을 사용하면, 어느 한 쪽의 스타일만 다르게 지정할 수 있다.

'방향' 부분에는 top, right, bottom, left를 사용할 수 있다.

 

border

위의 모~든 속성을 한꺼번에 지정할 수도 있다.

/* width | style | color */
border: medium dashed green;

위와 같은 순서로 쓰면 된다^^

 

 

 

div {
border: 4px solid black;
border-left-style: dotted;
}

이렇게 연달아서 쓰게 되면 나머지 테두리는 실선이지만, 왼쪽만 점선의 형태로 바뀐다.

 

 

border-radius

테두리를 각진 형태가 아닌 둥글게 깎을 수도 있다.

사용하는 단위는 px 또는 %인데, 실상 많이 쓰이는 건 %이다.

%는 박스 크기의 상대적인 비율을 조정하는 형태이다.

 

이를 응용해서

border-radius: 50%;

로 쓰면 원형의 테두리가 만들어진다.

 

 

곡률도 모서리마다 설정할 수 있다.

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

이렇게 따로따로 지정하면 된다.

 

 

 

 

 

03. 코딩 연습 12: Box Model Practice

<div class="card">
   <img alt="" src="https://assets.codepen.io/123865/dog.png">
   <h1>I Am Dog</h1>
</div>

위의 코드에

 

class명이 card인 div의 스타일로

너비 210px, 테두리 1px 회색 실선, 테두리 곡률 5px, 글자 가운데 정렬

을 지정하고,

 

이미지는

너비 200px, 테두리는 색상이 rgb(236, 183, 191)인 5px의 실선, 테두리 곡률은 50%로

 

지정하는 것이 미션이었다.

 

CSS 파일을 따로 만들게 되면

.card {
    width: 210px;
    border: 1px solid grey;
    border-radius: 5px;
    text-align: center;
}
img {
    width: 200px;
    border: 5px solid rgb(236, 183, 191);
    border-radius: 50%;
}

↓

 

완성이다^^

 

 

 

 

 

04. 박스 모델: 패딩

콘텐츠 영역과 테두리 사이에 남은 공간을 패딩(padding)이라고 부른다.

내용과 테두리 사이에 공간을 넓혀서 여유를 주고 싶을 때 쓴다고 생각하면 쉬우리라.

(강사님이 예시로 든 건 '깨지기 쉬운 물건이 담긴 택배 박스에 채워진 완충재'였다.)

 

패딩의 크기를 조절함으로써 콘텐츠 영역의 크기를 조절하지 않고도 '박스' 요소의 크기만 조절할 수 있다는 의미이다.

 

padding-top

padding-right

padding-bottom

padding-left

로 각각 지정할 수도 있고,

 

통합해서 작성할 수도 있다.

 

그 때 작성하는 순서는 다음과 같다.

/* 상하좌우 모두 균일하게 적용 */
padding: 10px;

/* 상하, 좌우 다르게 적용 */
/* vertical(상하) | horizontal(좌우) */
padding: 5px 10px;

/* 상, 하, 좌우 다르게 적용 */
/* top(상) | horizontal(좌우) | bottom(하) */
padding: 1px 2px 2px;

/* 상, 하, 좌, 우 모두 다르게 적용 */
/* top(상) | right(우) | bottom(하) | left(좌) */
/* 시계방향을 기본값으로 한다^-^ */
padding: 5px 1px 0 2px;

 

강사님이 예시를 또 하나 들어줬는데

padding은 마치 피부와 근육 사이에 낀 지방층이라고.. (뭔가 슬프잖아..🤣)

 

 

 

 

 

05. 박스 모델: 여백

두 개의 요소 각각을 둘러싸고 있는 테두리 간의 간격을 margin이라고 부른다.

 

margin역시 padding처럼

margin-top

margin-right

margin-bottom

margin-left

을 이용해 네 개 방향을 모두 다르게 조정할 수 있다.

 

통합해서 작성하는 방법 또한 padding과 동일하다.

/* 상하좌우 모두 균일하게 적용 */
margin: 10px;

/* 상하, 좌우 다르게 적용 */
/* vertical(상하) | horizontal(좌우) */
margin: 5px 10px;

/* 상, 하, 좌우 다르게 적용 */
/* top(상) | horizontal(좌우) | bottom(하) */
margin: 1px 2px 2px;

/* 상, 하, 좌, 우 모두 다르게 적용 */
/* top(상) | right(우) | bottom(하) | left(좌) */
/* 시계방향을 기본값으로 한다^-^ */
margin: 5px 1px 0 2px;

 

<h1> tag는 기본적으로 margin값을 어느 정도 가지고 있다.

(마치 <h1>의 글꼴 크기와 굵은 글씨가 default인 것처럼 margin도 default값으로 가지고 있다.)

 

이런 경우에도

/* 아래쪽 여백(margin)만 없애고 싶을 때 */
h1 {
margin-bottom: 0;
}

/* 네 방향 여백(margin) 모두 없애고 싶을 때 */
h1 {
margin: 0;
}

으로 지정하면 기본 margin 값을 지울 수 있다.

 

<h1>처럼 <body>도 기본 여백 값을 가진다.

이 역시 위와 마찬가지로 지우거나 그 크기를 조절할 수 있다.

흔히 웹 페이지를 만들 때 0px로 바꾸고 시작하는데,

이러면 낭비하는 공간 없이 요소를 넣을 수 있게 된다.

(뭐.. 가끔은 여백이 필요할 수도 있지만, 일단 지우고 필요할 때 만드는 게 낫다ㅎㅎ)

 

<h1>Hello!<span>:)</span></h1>

↓

 

여기에 margin 속성을 아래와 같이 추가하면

span {
   margin-left: 30px;
}

↓

느낌표와 웃는 표정 사이에 간격이 벌어졌다!

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 31. 미디어 쿼리(media queries)  (0) 2023.01.16
Section 8. CSS 박스 모델(2)  (0) 2023.01.09
DAY 30. 반응형 웹 디자인(Responsive Web Design)  (1) 2023.01.07
Section 7. CSS 선택자의 세계(3)  (1) 2023.01.04
Section 7. CSS 선택자의 세계(2)  (1) 2023.01.01
'프밍/CSS' Related Articles more
Comments