joycie416 님의 블로그

이번 프로젝트의 css는 모두 Tailwindcss를 사용하기로 했다. 처음이라 모든 속성을 홈페이지에서 검색해서 써야하는 번거로움이 있었지만, 적응되니 생각보다 쓸만했다.! 오늘은 아주 기초적인 사용법을 정리해보려고 한다. 1. Arbitrary value 적용하기먼저 기본적으로 height를 적당히 적용하려면 홈페이지에서 height를 검색해서 주어진대로 사용해도 된다.하지만 주어진 값 외엔 제대로 적용되지 않는 불편함이 있다. 이때 해당 페이지를 맨 아래로 내리면 arbitrary value를 사용할 수 있는 방법을 알려준다. 이렇게 크기를 임의로 입력하는 방법은 대체로 다 적용된다. Padding도 margin도 다 가능하다. 즉 `width: 30px; height; 80px;` 짜리 div를 ..

이번 팀 프로젝트에서 헤더를 상단 고정하려고 fixed를 사용하니 크기가 부모 컴포넌트의 width가 아닌, browser의 width가 되는 것을 확인했다. 또한 가로 스크롤을 하면 같이 스크롤되지 않는 문제점이 발생했다. 전부터 해결하고 싶었던 내용인데, 오늘 해결하게 되어 정리하고 씻으러 가려고 한다. `position: fixed` 와 `width: inherit`위에서 말했듯이 `width: 100%`를 사용하면 브라우저의 전체 width가 된다. 부모 컴포넌트의 width를 사용하고 싶다면 `width: inherit`을 사용하면 된다. 여태 `inherit`은 언제 사용하는 것인지 궁금했는데, 이럴 때 쓰는 것이었다.`로그인|회원가입`을 회색 라인 밖으로 나가지 않게 하고싶었는데, 브라우저의..

이번 게시글은 개인과제 중 표에 스크롤 바를 이쁘게 적용하기 위해 찾아보다가 잘 정리된 글이 있어 정리하게 되었다. 🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이inpa.tistory.com결론은... 웨일에서 기본적으로 제공하는 스타일처럼 overlay가 되도록하고 싶었는데, 단순한 구조로는 불가능할 것 같고, 외부 라이브러리를 사용해야 할 것 같다. 웨일에서 스크롤바의 기본 스타일은 아래와 같다. 오른쪽은 마우스가 가까이 있을 때 반응이다.크롬에서 기본적으로 제공하는 스크롤바는 아래처럼 투박..