CSS 1 - Box

💻1. CSS란?

• Cascading Style Sheet
• 웹 페이지의 모든 스타일을 관리
• Selector & Declaration

selector {
  property: value;
}

💻2. Box Model

• HTML의 모든 요소는 Box로 이루어져 있음
• 동일한 형태를 갖추고 있기 때문에 Box model이라 칭함
• Content, Padding, Border, Margin

• Content
  • Content가 들어있는 Box
  • 가로는 width, 세로는 height
• Padding
  • 안쪽 여백, content와 border 사이의 공간을 나타냄
• Border
  • 테두리를 나타냄
  • border: 1px solid #000 순서 상관 x
  • border-radius: 곡률 나타낼 수 있음
  • 원: border-radius: 50%;
  • 개별적으로 border 주거나 radius 조정 가능
    • border-top-left-radius: 30px; 등으로 나타냄
• Margin
  • 바깥 여백, 요소와 요소 사이의 간격을 나타냄

💻3. Shorthand (속기형)

• top right bottom left (시계 방향)
  padding: 10px 20px 30px 10px;
margin: 20px 40px; -> top&bt: 20px, left&right: 40px;

💻4. Box Sizing

• padding의 사이즈는 content 사이즈에 더해지므로 width와 height를 계산해서 작성해야 함🙄
• box-sizing: 박스 사이즈를 잡는 법에 대한 것
  • 기본: box-sizing: content-box 즉, content-box만의 width와 height로 잡음
• box-sizing: border-box로 설정하면
  • content-box와 padding, border까지 모두 포함한 width와 height 값이 됨
• css 작업 시 가장 먼저 아래와 같은 선언을 하는 것이 좋다.

* {
  box-sizing: border-box;
}

💻5. Box

• Display: Box Type을 결정하는 속성
• Box 종류
  • Block
  • Inline
  • Inline Block
  • Flex

✍5-1. Block

• Block -> 길막🤪
  다른 요소가 자신의 공간을 침범하지 못하도록 길막하는 성질을 가지고 있음
• Block의 성질
  1. 따로 width를 선언하지 않은 경우, width=부모의 content-box의 100% 차지
  2. 따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채움
  3. width, height, padding, border, margin 전부 👌👌
  4. 따로 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height
• margin: 0 auto;: top-bt: 0px, left-right: 자동 --> 가운데 정렬

✍5-2. Inline

• Inline -> 흐름🌊
• 문서 작성과 마찬가지임 --> text는 inline의 성질 가지고 있음
• Block vs. Inline
  면(영역) vs. 선(흐름)
• Inline의 성질
  • width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용 불가 🙅‍♀️🙅‍♂️ 흐름을 박살내는 애들임🥵

✍5-3. Inline Block

• Block && Inline
• Inline 영역에서 Block을 잡아줄 수 있는? 둘의 장점을 합친 버전

✍ 짧은 후기

• Box Sizing 개념을 처음 알게 되었다. 이걸 여태 모르고 살았음..
• Block과 Inline은 대충 알고 있었는데 막상 Block이 뭐야? 하고 물으면 대답할 수 없었던 걸 이제는 대답할 수 있을 것 같다. 기초적이고, 개념적인 부분을 확실히 짚고 넘어갈 수 있어서 좋다. 그리고 지루하지 않고 재밌다! CSS는 절거워..^^..