[CSS] Chapter 08. CSS 레이아웃

부모태그의 css는 자식도 영향을 받는다 - inherit

html

닫기 줄바꿈

<div stype="color: red; font-size: 12px;">
​​<p> Loerm </p>  // 빨간색 글씨로 나온다.
​​<button>버튼</button>  // 태그마다 상속이 안되는 경우도 있어서, 버튼 태그는 직접 설정해야한다.
</div>

css

닫기 줄바꿈

.parent {
​​width: 200px;
​​height: 200px;
​​border: 1px solid red;
}

.child {
​​width: 70%;
​​height: 70%;
​​background-color: blue;
}

// 두 class가 div 태그라고 가정했을 때, child 태그는 parent 태그의 크기 70%에 해당하는 크기를 가진다.

 

px, em, rem

일반적으로 16px = 1em = 1rem이다

css

닫기 줄바꿈

.px {
​​font-size: 16px;
}

.em {
​​font-size: 1em;
}

.rem {
​​font-size: 1rem;
}

• em
  • em은 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산한다.
  • 부모태그를 50px로 설정하면 em도 50px, 2em이면 100px이 된다.

html

닫기 줄바꿈

<div class="container" style="font-size: 50px;">
​​<p class="em">EM</p>
</div>

• rem
  • 1rem은 html의 font-size며, html의 font-size는 일반적으로 16px로 설정되어 있다. 
  • 2rem은 32px이 되는 셈이다.

 

그러면 어떤 단위를 사용해야 하느냐?

• 물론 div 태그의 width, height를 부여 할 때는 px 단위로 사용하겠지만, font-size 같은 경우 철학적으로 본다면 rem이 맞다. 왜냐하면 chrome 브라우저 기준으로 설정에 들어가면 글꼴 크기를 세팅할 수 있다. (아주 작게 - 작게 - 중간 - 크게 - 아주 크게)
• 근데 글꼴 크기를 변경하면 px, em이 적용된 태그는 반영되지 않고, rem만 반영이 된다. 위에서 말했듯 rem은 html의 font-size이기 때문이다. 사용자에게 글꼴 크기를 변경할 권리를 지켜주기 위해서 font-size는 rem으로 사용하는게 원론적으로 맞다.
• 그러나 보통 웹 디자인을 곁들이면서 개발을 할 때마다 font-size에 따라서 div 크기에게 부여되야 하는 width, hegiht  값이 변경되야 한다거나 rem은 배율에 따라서 바뀌기 때문에 지켜지기가 쉽지않다. 그래서 일반적으로 px을 많이 사용하겠지만, 이런 원론적인 사항이 있다고만 참고해서 알고있자.