Flexbox 여러 개의 를 item이라고 부르고 이 전체를 감싸는 를 container라고 부르자. Flexbox는 여러 개의 item을 감싸는 container의 속성 값이다. 자식 item을 배분과 정렬을 정할 수 있다. // 기존 CSS display: flex; // tailwind class flex flex는 해당 container를 flexbox로 만들겠다는 뜻이다. 일단 이전 글에서 사용했던 display: block 속성의 div를 10개로 늘린 후 분홍색 border로 감싸는 div를 하나 작성해보자. 1 2 3 4 5 6 7 8 9 10 위 코드의 첫째줄에 flex라는 클래스 딱 한 단어만 넣어보자. ... 그러면 이렇게 inline-block element처럼 바뀐다. flex-d..

Display 속성 display 속성에는 inline, inline-block, block 세 가지가 있다. 1. inline width와 height 값을 주어도 무시하다. 즉, 오로지 박스 안의 content 크기에 따라 박스 크기가 정해진다. y축 margin값을 넣어줘도 다 무시한다. x축 margin 값은 적용된다. 1 2 3 4 5 m-2 ( margin: 0.5rem (8px) ) h-10 ( height: 2.5rem (40px) ) border는 그냥 보기 위해 넣었다. 2. inline-block 위의 inline처럼 하나의 가로줄에 여러 개를 나열할 수 있고, width와 height 값을 적용할 수 있다. 여전히 y축 margin은 무시, x축 margin만 적용된다. 위의 코드에..

rem과 default font size 대부분 브라우저는 default font size가 16px이다. (Chrome, Safari, FireFox 등) 테스트 해보려면 globals.css에 @layer base { html { @apply text-[16px]; } } 를 바꿔보면 글자 크기가 바뀌지 않는 것을 확인할 수 있다. 그러나 일부 모바일 태블릿 브라우저나 e-book reader에서만 ppi 때문에 다르게 가져간다. 이 때문에 CSS 할 때 모든 사이즈는 px로 하드코딩하는 대신에 rem을 사용하는 것이 (심지어 어떤 때는 border 굵기까지도) best practice가 되었다. rem이란 default font size에 비례하는 숫자이다. 모든 것을 px이 아닌 rem으로 바꾸는..