화면 너비에 따라 반응형 디자인을 위해 useMediaQuery과 @media가 자주 사용되는데, 각각 사용 환경과 방식이 다르다.  @media@media는 주로 css 파일이나 태그 내부에서 사용하는 반응형 스타일링 방법으로 css 파일에 직접 작성해 특정 화면 크기에 따라 스타일을 적용할 수 있다.html이나 js 파일을 수정하지 않고도 반응형 디자인을 적용할 수 있다는 것이 장점이다.box { width: 100%; background-color: blue;}/* 화면 너비가 768px 이하일 때 스타일 변경 */@media (max-width: 768px) { .box { background-color: red; }} @media 설정으로 .box의 배경색은 기본적으로 파란색이지만..

tailwind에는 너비를 조절하는 클래스 중 w-screen과 w-full이 있는데, 둘 다 너비를 조절하는 클래스지만 미묘한 차이가 있다. w-screen(width: 100vw)w-screen은 브라우저 화면 전체 너비, 즉 눈앞에 당장 보이는 화면의 너비를 100vw(viewport width)로 설정한다.vw(viewport width)란?현재 브라우저 화면의 너비를 기준으로 한 상대적인 크기1vw = 현재 브라우저 화면 너비의 1%예를 들어, 화면 너비가 1200px이면100vw = 1200px50vw = 600px10vw = 120px  w-full(width: 100%)w-full은 부모 요소의 너비에 꽉 채우는 방식으로, 즉 해당 요소가 포함된 부모 컨테이너가 특정한 너비를 가지고 있을 ..

프론트엔드 개발을 하다 보면, 마우스를 hover 하거나 click 했을 때 해당 element의 크기 또는 text의 위치가 의도한 바와 다르게 아주 조금씩 어긋나는 경우를 한 번쯤 경험해 봤을 것이다. 이런 경우, 혹시 내가 설정한 css 속성에 border가 있는지 한 번 확인해 보길 바란다.   웹페이지에서 F12를 눌러 개발자모드에서 styles 탭의 가장 아래쪽에서 해당 element의 속성을 보자.   아래 그림에서 볼 수 있듯이 element의 전체 크기에는 margin, border, padding이 모두 포함된다.  즉, border는 element의 전체 크기에 영향을 준다. 그러나 outline은 포함되지 않아 element의 전체 크기에 영향을 주지 않음을 알 수 있다.   따라서..