tailwind css2 [Tailwind CSS] px 값 부여하기 & 반응형 레이아웃 만들기 px값 부여하는법 tailwind CSS 의 장점 중 하나는 이미 설정되어 있는 값을 손쉽게 쓸 수 있다는 점이다. 이미지처럼 width에 값들이 설정되어 있기 때문에 width-72, width-sreen 등으로 편하게 너비를 설정할 수 있다. 하지만 테일윈드 CSS 속성값에 없는 사이즈를 주고 싶다면? 나는 384px보다 더 큰 600px를 주고 싶다면 어떻게 해야 할까? [대괄호] 안에 원하는 픽셀 값을 넣으면 된다. 그러면 이렇게 원하는 값으로 width를 설정할 수 있다. 하나만 하면 재미 없으니깐 이번엔 반응형 레이아웃도 알아보자! 반응형 레이아웃 공식문서를 보면 sm, md, lg, xl, 2xl 로 최대 너비를 설정할 수 있다. 이렇게 해서는 안된다. 이 코드의 결과물은 다음과 같다. w.. 2023. 3. 22. [Tailwind CSS] background-image 경로 설정 이번에 프로젝트로 tailwind css를 활용하기로 해서 tailwind css를 연습하는 중이다. tailwind css는 클래스네임에 css 속성을 입력하기 때문에 클래스네임이 매우 지저분해진다는 단점이 있긴 하지만, 약어로 코드를 빠르게 칠 수 있고, reset CSS가 필요 없다는 장점이 있다. 아직은 미숙해서 tailwind css 사이트에서 속성을 찾아보면서 코드를 치고 있지만 손에 익으면 빠르게 레이아웃을 구현할 것으로 기대된다! 오늘은 배경 이미지의 경로를 설정하는 데 어려움을 겪어서 경로 설정을 어떻게 했는지 공유해보려고 한다. 폴더 구조 활용할 사진은 [src] 폴더 - [assets] 폴더 - [images] 폴더 안에 sky.jpg를 넣어두었다. [public] 폴더에 이미지를 넣.. 2023. 3. 20. 이전 1 다음
