position
참조: 드림코딩 엘리 유튜브
-
relative : 박스가 원래있던 자리에서 왼쪽에서 이동을 하는 것
-
Absolute : 원래 있는 박스에서 컨테이너에서 움직이는 것
-
Fixed : 상자에서 벗어나서 웹페이지에서 옮겨가는 것
-
Sticky : 원래있던 자리에 고대로 붙어있어서 스크롤을 해도 붙어다님
relative , absolute
relative가 먼저 absolute가 뒤
position 속성은 정말 필요한 부분에서만 사용하기를 권장
box-sizing:border-box를 기본적으로 설정해주는 것이 좋음
inline, inline-block, block
block과 inline
앞서 배운 태그들에는 css 속성이 기본적으로 적용되어 있는 것들이 있습니다. 예를 들어, <div>는 display가 기본적으로 block으로 설정되어 있고, <span>태그에는 display가 inline으로 설정되어 있습니다. 따라서 이를 강제적으로 변형하면 <div>태그를 <span>처럼 사용할 수 있고 반대로 <span>을 <div>처럼 사용할 수 있기도 합니다
태그는 css를 이용해서 용도를 변경할 수 있으므로 태그를 사용할 때 어떤 태그를 사용할지 너무 고민하지 않아도 됩니다.
inline-block
inline-block은 앞서 말한 inline속성과 block속성을 둘 다 가지고 있는 중간 속성
버튼들을 나열한다고 가정했을 때, 한 중에 여러 콘텐츠를 넣을 수 있는 inline 속성에 버튼 사이즈를 지정할 수 있도록하는 block 속성이 둘 다 필요합니다. 이런 경우엔 inline-block으로 지정하면 특정 사이즈를 지정하면서도 block처럼 한줄의 전체너비 공간을 차지하지 않도록 설정할 수 있습니다.
inline-block 속성은 공간을 분할하는 데에도 유용합니다.
하지만 자주 쓸 때 주의해야 할 점은, inline-block 사이에는 의도치 않게 4px 정도의 작은 간격이 생긴다는 점.
이를 방치하기 위해서 부모로 감싸있는 div에 font-size:0px로 지정하면 여백이 없어지게 됩니다. 폰트 사이즈를 조정하기 애매한 상황이라면 flex속성을 통해서 공간 분배를 하는 것을 권장
inline 속성으로 되어 있는 태그들은 width와 height를 지정해도 적용되지 않습니다.
