[CSS in depth] 00. 목차

목차

1. 기초 검토
   • cascade
   • box model
2. 레이아웃 끝장내기
   • floats
   • flexbox
   • grid layout
   • 반응형 등
3. 규모가 있는 CSS
   • modular(OOCSS, BEM 등)
   • 라이브러리
4. 고급 스킬
   • transition, animation 등

---

Box model 속성

default

• 페이지의 element들의 구성을 나타낸다.
• element의 width, height를 지정하면 content size를 지정하는 것이다.
• 여기에 padding, border 을 더할 수 있다.

Box-sizing 속성에 border-box를 사용하는 경우

• 더 예측 가능한 행동을 보여준다. 지정하는 width, height가 content + padding + border 을 모두 포함한다.

<section>
  
<div class="default">
default
</div>

<div class="border-box">
border-box
</div>

<p>
    same width and height(100px)
</p>
<p>
   border-right: 5px
</p>
<p>
    padding-right: 5px
</p>
</section>

body {
  height: 100vh;
  display: flex;
  color: white;
}

div {
  width: 100px;
  height: 100px;
  background: grey;
  border-right: solid 5px black;
  color: white;
  padding-right: 5px;
  margin: 5px;
}

.default {
}

.border-box {
  box-sizing: border-box;
}

p {
  color: black;
}