Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다. Vue.js 3 - tailwindcss3 를 사용하였습니다. 하는 방법 바로 가시죠. 우선 tailwind.config.js 파일이 /src 내에 있습니다. 이곳에다가 작성하는것인데요, theme.extend. 내에 작성 module.exports = { purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { backgroundImage: (theme) => ({ 'hero-pattern': "url('pattern-bg.png')", 'second-im..

FrontEnd/css 2022. 2. 17. 20:27

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다. 지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다. 그런데 에러라니!? 그래서 해결책을 찾아왔다. core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다. 그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다. 최신화: core-js, vue, vue-cli npm install --save core-js@^3 npm install vue@next vue upgrade --next 아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 ..

FrontEnd/css 2022. 2. 15. 00:15

부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중, 이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다. child2 를 예시로 들어보면, .child2 { flex: 1; } 을 해주면 남은 영역이 모두 할당된다. 맨 위 사진의 코드 예시) parent div child1 child2 이상

FrontEnd/css 2021. 12. 9. 14:31

안녕하세요 상훈입니다. 우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다. 그 중 hover의 이벤트를 사용하려고 합니다. html에서는 클래스명만 정해주시면 됩니다. width, height, bg-color, transform 을 위한 트랜지션 결합. 클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다. rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면, 2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다. 이상입니다. 해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다. CSS 트랜지션 사용하기 -..

FrontEnd/css 2021. 10. 26. 13:48