[클라우딩 어플리케이션 엔지니어링 TIL] 14. CSS 기초(박스 모델)

1.학습 주제

• 박스 모델이란
• 콘텐츠, 여백, 테두리
• 여백 상쇄
• 박스 크기 계산 방식
• 그 외(초과, 투명도)

2.주요 메모 사항 소개

박스 모델이란

구글 메인 페이지의 박스모델

• 인터넷의 모든 요소는 박스 형태이다. 이를 표현하는 것이 박스 모델
• margin(외부 여백)-border(테두리)-padding(내부여백)-content(콘텐츠)로 이루어져 있음

콘텐츠, 여백, 테두리

• 콘텐츠
  • html에서 적은 것들이 들어가는 위치, 내용이 들어가는 위치

속성	설명	작성 예시
width(height)	콘텐츠의 너비(높이)를 정한다. 블록 레벨에만 적용가능하다.	width(height):100px;
max-width(height) min-width(height)	콘텐츠의 최대/최소 너비(높이)를 정한다.  콘텐츠의 크기가 상대적일 때 사용된다. 블록 레벨에만 적용가능하다.	max-width(height):100px; width(height):100%;

• 여백
  • 내부여백(padding)과 외부여백(margin)으로 나뉜다.
  • 사이에 테두리(border)영역이 존재한다.
  • background 속성이 padding에는 적용되고 margin에는 적용되지 않는다.

속성	설명	작성 예시
padding(margin)	블록 레벨은 4방향/ 인라인은 좌/우만 적용 가능 적는 갯수에 따라 적용되는 방향이 다르다. margin의 경우 음수 적용이 가능하다.	padding: 1px; (상하좌우 1px) padding: 1px 2px;(상하 1px 좌우 2px) padding: 1px 2px 3px;(상 1px 좌우 2px 하 3px) padding: 1px 2px 3px 4px;(상 1px 좌 2px 하 3px 우 4px)
padding(margin)-top	top, right,left, bottom을 붙여서 한 방향을 정하는 것도 가능하다.	margin-right:3px(우 3px)

• 테두리
  • 내부여백(padding)과 외부여백(margin)의 사이에 존재하는 테두리
  • border 뒤에 -top, -right 등과 같은 위치를 붙여서 일부만 적용시킬 수 있다.

속성	설명	작성예시
border	테두리를 그린다. 두께, 모양, 색깔을 전부 정한다.	border:1px solid blue;(1px 실선 파란색 테두리)
border-color	테두리의 색깔을 정한다.	border-color:red;
border-style	테두리의 모양을 정한다.	border-style:dotted;(점선)
border-width	테두리의 두께를 정한다.	border-width: 3px;
border-bottom-width	왼쪽과 같이 위치를 붙여서 적을 수 있다.	border-bottom-width:3px;

여백상쇄

• 바깥 여백(margin)끼리 만나면 겹치는 현상

예시) 다음과 같은 요소가 있다 가정하고 이 요소를 위 아래로 합칠 시 크기는 높이는 어떻게 되겠는가?

예시 그림

대부분의 사람은 다 더한 값인 283.2px이 나올 것이라고 생각한다. 하지만 이는 틀렸다. margin이 겹쳐지기 때문에 다음과 같은 그림이 된다.

결과 그림

실제값은 263.2px이 나오게 된다.

• 위 예시와 같이 기존의 예상과 다른 크기의 요소가 만들어질 가능성이 있다.
• 위 예시를 제외하고는 부모와 자식 사이에 border, padding, content가 없을 경우 margin끼리 여백 상쇄가 일어날 수 있다.

박스크기 계산 방식

속성	설명
box-sizing:content-box;	기본값 박스 크기를 계산할 때 padding,width/height,border-width가 모두 더해진다.
box-sizing:border-box;	박스 크기를 계산할 때 padding,border-width가 width/height 값 안에  합해진다.

<div style="padding: 20px;margin:20px;border:20px solid black;height:100px;width:100px">
        콘텐츠
</div>

 

content-box

• 박스의 너비 = 20*2(border)+20*2(padding)+100(width)=220px.

border-box

• 박스의 너비 = 100px(width)이다. padding과 border를 width 안에 넣어 content의 크기를 조절하는 방식. width(height)만으로 조절이 되서 요소의 크기를 계산하기 편하다는 장점.

그외(초과, 투명도)

• 초과(overflow)
  • 위 border-box처럼 콘텐츠가 콘텐츠 박스를 벗어날 때 적용되는 방식
  • overflow-x, overflow-y로 x축 y축 각각 지정 가능

속성	설명
overflow:visible;	기본값 그대로 노출
overflow:hidden;	넘어가는 내용은 숨김
overflow:scroll	넘어가는 내용은 스크롤발르 통해 볼 수 있음.
overflow:auto	브라우저가 자동으로 결정하여 스크롤바 노출

• 투명도(opacity)
  • 박스의 투명도를 조절
  • 기본값은 1이며 0에 가까울 수록 투명
  • 투명도가 적용되면 자식 요소도 함께 투명해진다.
  • opacity 값은 상속되지 않는다.

3. 공부하며 느낀 점

스스로 느끼기에 CSS에서 가장 중요하다고 생각하는 박스모델에 대해 배웠다. 나는 박스 모델에 대해서 다른 곳에서 배웠지만 데브코스의 박스모델의 강의가 조금 더 여러번 강조하면서 가르쳐도 괜찮지 않았을까 생각한다.

4.출처