그누보드와 잘 맞는 CSS 정보
그누보드와 잘 맞는 CSS본문
보통 bootstrap이 CSS패키지로 유명한데, 그누보드랑 충돌이 좀 있어서 사용이 꺼려집니다.
Wordpress 분석 도중 그누보드랑 찰떡궁합인 CSS패키지를 찾아서 유용하게 쓰고 있는데, 단점은 제가 만든 웹사이트가 다 똑같은 CSS 모양입니다.
혹시 여러분이 아시는 CSS 패키지 중 그누보드와 궁합이 잘 맞는 패키지가 있을까요?
있다면 소개해 주시는건 어떨까요?
답변 미리 감사드립니다.
추천
0
0
베스트댓글
css 는 그냥 닥치는대로 사용합니다만
1년전 쯤 만들어준 사이트 대표가 아무 것도 모르면서 누구 말을 들었는지 꼭 부트스트랩으로 해달라고 해서 시늉만 내어 보았는데 충돌하는 부분은 없었어요.
너무 표본이 적어서 강력하게 주장은 못하겠지만요.
1년전 쯤 만들어준 사이트 대표가 아무 것도 모르면서 누구 말을 들었는지 꼭 부트스트랩으로 해달라고 해서 시늉만 내어 보았는데 충돌하는 부분은 없었어요.
너무 표본이 적어서 강력하게 주장은 못하겠지만요.
댓글 16개
Tilewindcss??
부트스트랩과의 충돌은 시간을 들여 한번 잡으면 이것 때문에 문제가 되진 않아요. 부트스트랩만큼 편한 게 없죠. 시장도 좋고, 유저도 많고 협업하기도 좋고, 템플릿도 많고. 제 경험상 css패키지는 손 안보게 되는 경우는 거의 없습니다. 궁합을 좋게 하는 건 개발자의 몫이죠.
부트스트랩 충돌이 어디서 나나요?
최신버전은 jquery도 사용하지 않아서 더 좋습니다.
최신버전은 jquery도 사용하지 않아서 더 좋습니다.
css 는 그냥 닥치는대로 사용합니다만
1년전 쯤 만들어준 사이트 대표가 아무 것도 모르면서 누구 말을 들었는지 꼭 부트스트랩으로 해달라고 해서 시늉만 내어 보았는데 충돌하는 부분은 없었어요.
너무 표본이 적어서 강력하게 주장은 못하겠지만요.
1년전 쯤 만들어준 사이트 대표가 아무 것도 모르면서 누구 말을 들었는지 꼭 부트스트랩으로 해달라고 해서 시늉만 내어 보았는데 충돌하는 부분은 없었어요.
너무 표본이 적어서 강력하게 주장은 못하겠지만요.
bootstrap 충돌 많이나던데요
특히 이름이 같은 btn 클래스에서요
특히 이름이 같은 btn 클래스에서요
@천담바라
BTN도 그렇고,, padding 쪽, 특히 모바일 뷰에서는 그냥 다 지우고 새로 CSS 짜는게 빠를 정도더라구요.
BTN도 그렇고,, padding 쪽, 특히 모바일 뷰에서는 그냥 다 지우고 새로 CSS 짜는게 빠를 정도더라구요.
잘 어울리는 것보다는 만들어서 사용하는 것이 대부분이라서..
충돌에 대한 걱정이라면 tailwindcss 가 완벽한 선택입니다. 컴포넌트 기반이 아니라 유틸리티 기반이라 충돌가능성이 거의 없습니다. 뭔말인지 모르시겠으면 공식 홈피가서 동영상만 보셔도 바로 이해갈겁니다. 전 요즘 이것만 쓰는데 정말 만족스럽습니다. Nodejs를 이용하면 자신만의 컴포넌트 만들거나 유틸리티를 확장하는것도 싑게 가능합니다
@몰라무서워 좋아보입니다. 소개 감사합니다.
@몰라무서워
좋은 정보 감사합니다. Bootstrap 보다 더 낳은거 같아요. Gnuboard6 에서 저 CSS를 채태하면 호랑이에 날개를 단 격이곘네요. npm install tailwindcss 다만 이렇게 설치해야 되는게 어려운데, 혹시 CSS 파일만 뽑아서 팁게시판에 올려주실 수 있을까요? 너무 큰 부탁이라면 사양하셔도 됩니다. 좋은 하루 되세요.
좋은 정보 감사합니다. Bootstrap 보다 더 낳은거 같아요. Gnuboard6 에서 저 CSS를 채태하면 호랑이에 날개를 단 격이곘네요. npm install tailwindcss 다만 이렇게 설치해야 되는게 어려운데, 혹시 CSS 파일만 뽑아서 팁게시판에 올려주실 수 있을까요? 너무 큰 부탁이라면 사양하셔도 됩니다. 좋은 하루 되세요.
@울라프 그냥 홈페이지에서 제공하는 cdn을 사용해도 됩니다.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
이렇게요.
커스트마이징이 필요하거나 container 가로폭 등을 수정할때만 tailwind.config.js 수정해서
npx tailwindcss -i 입력파일 -o 출력파일
이렇게 빌드하면 됩니다.
기본 css에 자신의 css를 추가 하고 싶을때는
source.css 만드셔서
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
// 컴포넌트 추가
@apply
}
@layer utilities {
// 유틸리티 추가
.btn-primary {
@apply bg-blue-500 text-white ....;
}
}
이렇게 만드셔서 위와 똑같이 npx tailwindcss ... 로 빌드하시면 됩니다.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
이렇게요.
커스트마이징이 필요하거나 container 가로폭 등을 수정할때만 tailwind.config.js 수정해서
npx tailwindcss -i 입력파일 -o 출력파일
이렇게 빌드하면 됩니다.
기본 css에 자신의 css를 추가 하고 싶을때는
source.css 만드셔서
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
// 컴포넌트 추가
@apply
}
@layer utilities {
// 유틸리티 추가
.btn-primary {
@apply bg-blue-500 text-white ....;
}
}
이렇게 만드셔서 위와 똑같이 npx tailwindcss ... 로 빌드하시면 됩니다.
bootstrap 적용을 하는 작업을 하면 기본 CSS는 모두 걷어내고 씁니다.
scss 전처리기를 사용하면 동일 css 충돌은 css명 변경등으로 처리가능합니다.
scss 전처리기를 사용하면 동일 css 충돌은 css명 변경등으로 처리가능합니다.
저도 tailwindcss 로 테스트해봐야겠네요~~인라인 방식을 좋아해서 맞을듯합니다.
좋은 정보 감사합니다.
좋은 정보 감사합니다.
그래서 전 그냥 페키지 말고 라이브러리 써요. aos, venobox 같은거요. ㅎㅎ
bootstrap을 쓸려면 style.css를 제거하고 쓰시면 편해요 ㅎㅎ