display

CSS/tailwind

[tailwind] Flex direction & display / flex-basis

Display 순수 css body { display: flex; } tailwind - display tailwind에서 display는 class에 display 값만 입력하면 적용이 된다. display: inline flex-basis css 속성 중에서는 flex 아이템의 초기 크기를 설정하는 속성이 flex-basis이다. box-sizing을 따로 지정하지 않을 경우 사용된다. /* 원본 크기 키워드 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 플렉스 아이템 내용 크기에 따라 조절 */ flex-basis: content; tailwind - flex-basis..

CSS

visibility: hidden과 display:none의 차이

html의 요소를 나타나게 하고 사라지게 하는 속성으로는 visibility와 display 두 가지가 있다. 비슷한 역할을 하는 것처럼 보이지만 두 속성에는 다른 차이가 존재한다. 이에 대해 기억하기 위하여 정리한다. visibility: hidden 해당 요소가 보이지 않으며 layout에 영향을 미친다. 다시 말해, 보이지 않지만 width와 height가 설정되어있다면 공간은 그대로 유지된다. display: none 해당 요소가 보이지 않으며 layout에 영향을 주지 않는다. 다시 말해, 보이지 않으면서 동시에 width와 height로 구분된 공간도 사라진다. 간단하게 visibility는 hidden이므로 해당 공간을 숨기는 것이지만, display는 none, 즉 없다는 의미이므로 공간 ..

주디_JUDI
'display' 태그의 글 목록