selector연습 site
FlexBox연습 site
초기설정
body{
margin: 0;
box-sizing: boder-box;
}기본 margin을 0으로 설정하고, 디폴트인 box-sizing의 content-box를 border-box로 설정한 것이다. 이렇게 설정하면 보다 효율적으로 요소들을 배치할 수 있다.
inline/block
- div, h1, h2등의 요소의 디폴트는 block이다. 그러나 inline으로 변경해줄 수 있다. 또한 span같은 inline도 block으로 바꾸어줄 수 있다.
- inline에서 width나 height는 변경할 수 없다. 하지만 padding은 줄 수 있다. 이때 padding에 의해 다른 내용이 밀리지는 않는다.
- inline에서 margin을 주면 컨텐츠에 포함된 영역만 margin이 적용된다.
- 이와 다르게 block은 포함된 모든 요소가 다른 영역에 영향을 끼친다.
- inline-block을 사용하면 inline이면서 block처럼 사용할 수 있다.
단위
- 절대단위 : css에는 다양한 절대 단위를 제공하지만 px만 잘 쓰면 된다.
- 상대단위
width : 50% - 부모요소의 50%
line-height: 200% - 요소 폰트크기의 200%높이의 라인 형성
em : 1em은 부모요소의 1배 2em은 부모요소의 2배(항상 폰트 기준이며 margin, padding등을 줄땐 현재 요소의 폰트 크기를 기준으로 삼는다.) _em의 단점 : 부모-자식이 연속으로 중첩되는 목록에서는 단계별로 계속 배수가 적용된다.(부모의 크기 참조)_
rem : 모든 곳에서 루트 요소(html) 글꼴 크기의 배수를 적용한다. 보통은 rem으로 작업하는 것이 쉽기 때문에 rem위주로 작업하면서 부모 크기에 종속되야하는 경우에 em을 사용하면 된다.
