1102 TIL position / inline, inline-block, block

kimhr08·2021년 11월 2일
1

Wecode

목록 보기
2/6

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를 지정해도 적용되지 않습니다.

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글