CSS TIL 03

2021년 6월 21일에 작성된 문서 3번 입니다.
CSS 배운 내용을 정리했습니다.
(하나에 다 쓰기엔 내용이 길어져 문서 3개로 나누었습니다.)

CSS BOX MODEL

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 됩니다.

• 박스는 항상 직사각형
  • 너비(width), 높이(height) 가짐.
  • CSS로 속성과 값을 이용해 그 크기를 설정

박스가 차지하는 영역을 시각적으로 확인하기 위해 배경색을 꼭 넣으세요!

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

• 박스 종류 : 줄바꿈 되는 박스 & 줄바꿈 없이 옆으로 붙는 박스
  • 줄바꿈 되는 박스: block 박스
  • 줄바꿈 없이 크기지정을 할 수 없는 박스: inline 박스
  • 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스

Block Box element

Inline Box element

• Block 요소: <div>, <p>

• Inline 요소: <span>

  • inline 박스 :
    CSS의 width, height 등 박스의 크기를 설정하는 속성이 적용 안 됨.
    
    

Inline-Block Box element

다른 요소 옆에 붙으면서, 자체적으로 고유의 크기 가짐.

즉,

박스의 구성요소

border (테두리)

심미적인 용도 + 개발 과정에서도 매우 의미있게 사용

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다.

p {
  border: 1px solid red; 
  /*테두리 실선 확인.*/
  /*p태그에 1px 빨간색 실선 추가*/
}

• border 속성에 적용된 값:
  • 테두리 두께(border-width)
  • 테두리 스타일(border-style)
  • 테두리 색상(border-color)
  • 괄호 안에 것들이 border 속성에 추가할 수 있는 세부 속성

• 테두리를 점선으로 만들 경우
  • border-style의 값 중 하나를 바꾸자.
• 둥근 모서리로 만들 수도 있습니다.
  • border 속성만으로 둥근 모서리 만들 수 없다.
• 박스 바깥에 그림자 넣기
  • 그림자를 명확하게 보기 위해서는 background속성이 불투명해야함.

margin (바깥 여백)

p {
  margin: 10px 20px 30px 40px;
  /*p태그 상하좌우에 여백을 추가*/
}

• 각각의 값 : top, right, bottom, left (시계 방향)
• margin: 주황색으로 표현
• 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용

p { /*이 경우는 방향을 특정한 속성*/
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  /*위치를 특정해 여백을 추가*/
}

• 이 규칙은 padding에도 동일하게 적용됨.

• 바깥 여백에 음수값을 지정 가능.

  • 다른 엘리먼트와의 간격이 줄어듦.
  • 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게도 가능.

p {
  margin-top: -2rem;
  /*p태그 margin-top 속성에 음수 값을 지정*/
}

padding (안쪽 여백)

• border 기준으로 박스 내부의 여백 지정
• 값 순서 따른 방향은 margin과 동일 (시계 방향)
• padding은 초록색으로 표현

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 속성을 추가*/
}

박스를 벗어나는 컨텐츠 처리

• 박스 크기 < 콘텐츠 크기
  • 콘텐츠가 박스 밖으로 빠져나옴
  • 콘텐츠가 박스 밖으로 나가는 경우 :
    • 박스 크기에 맞게 콘텐츠를 더 이상 안 표시.
    • 박스 안에 스크롤을 추가

p {
  height: 40px;
  overflow: auto;
  /*p태그에 overflow 속성을 지정.*/ 
  /*박스보다 큰 콘텐츠에 스크롤을 표시*/
}

• overflow 속성 auto : 콘텐츠가 넘치는 경우 스크롤 생성.
• 콘텐츠의 내용을 보여주고 싶지 않을 경우, overflow 속성에 hidden 값을 사용.
• overflow 속성: x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤 할 수 있게 가능.
• overflow-x 속성과 overflow-y 속성을 이용 시, 두 방향을 모두 지정 가능.

박스 크기 측정 기준

박스 크기를 측정하는 기준은 매우 중요

아래의 예시를 보자.

<!--html 예시-->
<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div> 

/*CSS 예시*/
#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;
}

• #container너비: 324px (300px이 아님)
  • 브라우저는 다음과 같은 계산을 실행

	300px (콘텐츠 영역)
	+ 10px (padding-left)
	+ 10px (padding-right)
	+ 2px (border-left)
	+ 2px (border-right)

• #inner의 100%: 364px (300px이 아님)
  • 브라우저는 다음과 같은 계산을 실행

        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'를 추가*/
}

• 모든 요소에 box-sizing: border-box 적용
  • 모든 박스에서 여백과 테두리를 포함한 크기로 계산
  • box-sizing: HTML 문서 전체에 적용
  • box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중

앞으로 레이아웃과 관련된 이야기를 할 때에는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두가지를 항상 염두해주세요.

• content-box: 는 박스 크기 측정 기본값

• 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장

Written with StackEdit.