틀의 싸움, 어떤 것을 선택하고 왜.
8770 단어 tailwindcsscssbeginnersfrontend
CSS vs Bootstrap vs Tailwind CSS를 구체화합니다.
프레임(독서, 전단 프레임)은 날씨처럼 항상 변한다.너는 오늘 새로운 것을 배웠는데, 이듬해에는 유행이 지났다.이제 대량의 프레임워크를 추가하면 왜 초보자들이 두려워하는지 알게 될 것이다.
그러나, 헤헤, 걱정할 것이 없다. 왜냐하면 본문이 끝날 때 당신은 분명히 이해할 수 있기 때문이다.
1. CSS를 구체화한다.
Materialize CSS는 구글의 Material Design을 기반으로 한 성공적인 디자인의 고전적인 원칙과 혁신, 기술을 결합한 디자인 언어입니다. Materialize CSS는 보기 좋은 사이트를 만들기 위해 빠른 응답을 하는 CSS 프레임워크입니다.그것은 사이트 모델을 만드는 것을 매우 빠르고 간단하게 한다.
대부분의 전통적인 전단 프레임워크와 마찬가지로, Materialize는 우수한 사이트를 만드는 데 필요한 거의 모든 구성 요소와 자바스크립트 위젯을 가지고 있다.
지금 만약 당신이 포부를 가진 전단 개발자라면, Material UI를 들은 적이 있을 것이다.Materialize와 매우 비슷하다. 구글의 재료 설계 원칙도 사용했기 때문이다.그러나 Materialize는 정적 사이트를 신속하게 만드는 데 매우 적합하지만, Material UI, 예를 들어 React, 미리 만들어진 구성 요소를 빨리 추가하려면 차라리 Material UI를 사용하십시오.또한 물화 CSS는 재료 UI보다 학습이 용이합니다.
여기서 지적해야 할 점은 Bootstrap과 같은 프레임워크에 비해 Materialize를 어떻게 사용하는지 배우고 기억하는 것이 훨씬 쉽다는 것이다.
주의: 비록 나는 당신이 맹목적으로 수업을 기억하는 것을 건의하지는 않지만, 그렇습니다. 이 과정이 어떻게 운영되는지 알게 되면 그것을 실현하려고 시도하는 데 큰 문제가 없을 것입니다.
그러나 모든 장점이 따르지만 나쁠 것은 없다.
다음은 Materialize에서 어셈블리의 모양새입니다.
물화 CSS에 대한 자세한 내용과 모든 기능을 보려면 here를 방문하십시오.
2. 안내
Bootstrap은 보편적으로'세계에서 가장 인기 있는 전단 프레임워크'라고 불리는데 이것은 프레임워크로 신속하게 응답이 빠른 모바일 첫 번째 사이트를 디자인하고 맞춤형으로 제작할 수 있다.
bootstrap이 도입되기 전에 개발자는 서로 다른 화면 크기를 위해 미디어 조회를 작성해야 합니다. 그래도 사이트의 '응답성' 은 그다지 좋지 않습니다.하지만 부스트랩이 나오자마자 게임이 완전히 바뀌었다.이제 작은 스크린과 모바일 기기에서 보기 좋은 사이트를 만드는 것은 식은 죽 먹기다.응답 클래스가 있으면 HTML 파일을 떠나지 않고 웹 사이트의 다른 뷰포트에서 외관을 정의할 수 있습니다.
bootstrap이 처음 발표된 이래 많은 변화가 생겼습니다. 현재bootstrap은 Sass 변수와 혼합, 응답 격자 시스템, 대량의 예비 구성 요소와 강력한 자바스크립트 플러그인을 가지고 있습니다.
부팅의 주요 이점은 다음과 같습니다.
아이디어를 주기 위해서, 다음은Bootstrap에서 구성 요소와 스타일의 외관입니다.
부트에 대한 자세한 내용은 this를 참조하십시오.
3. 순풍 CSS
Tailwind CSS는 유틸리티 클래스로 구성된 프레임워크이거나 유틸리티 클래스를 "패키지"한 것입니다.Bootstrap이나 Materialize보다 훨씬 낮은 프레임입니다.
현재 '실용 프로그램 클래스' 와 '저급 프레임워크' 는 실제로 무엇을 의미합니까?
우선, '유틸리티 클래스' 는 일부 클래스입니다. 채우기와 간격 추가, 텍스트와 배경색 변경, 글꼴 크기와 글꼴 무게 변경, 원각과 테두리 추가 등 여러 가지 일을 할 수 있습니다.
현재 '하위 프레임' 은 Tailwind CSS에 미리 정의되거나 미리 만들어진 구성 요소와 자바스크립트 위젯이 없다는 뜻입니다.내 말은 카드나 버튼이나 모드 따위는 없다는 것이다.
뭐!!!!구성 요소가 없는 프레임!!!우우!!!
나는 이것이 바로 내가 처음으로 순풍을 시도했을 때의 생각이라는 것을 안다.그러나 사실상 순풍에는 미리 정의된 구성 요소가 없어서 신기하다. (이따가 자세히 소개할 것이다.)내 말은, 너는 너 자신의 구성 요소를 만들고, 네 뜻대로 그것을 설계할 수 있다는 것이다.flex, pt-4, 텍스트 센터,rotate-90 등 클래스는 태그에 직접 조합하여 모든 디자인을 구축할 수 있습니다.
이제 카드 구성 요소를 만들고 싶다고 가정해 봅시다. 이것이 바로 당신이 해야 할 일입니다.
<body class="bg-gray-500">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
</div>
지금 어떤 사람들은 이런 조합류의 방식은 더 많은 작업을 필요로 하지 않고, 더 많은 불필요한 코드도 필요로 하지 않는다고 말할 수 있다.답은 긍정과 부정입니다. 어떻게 합니까?
어디 보자.
결론
그래서 이 책을 많이 읽었어, 응?하지만 만약 당신이 이 점을 해냈다면, 다음은'어떤 것을 사용해야 합니까?'
이것은 너의 취향과 수요에 달려 있다.예를 들어 모든 사이트가 비슷해 보일까봐 걱정하지 않고 내장된 구성 요소와 작은 위젯의 구조를 원한다면 Materialize (구글의 재료 디자인 원칙을 실현한 것처럼 보이고 싶다면), Bootstrap, 훌륭한 모바일 우선 사이트나 응용 프로그램을 만들고 싶다면.
단, 만약 당신이 정말로 완전한 맞춤형 디자인과 구성 요소를 원한다면, 대량의 CSS와 미디어 조회를 작성할 필요가 없다면, 반드시Tailwind CSS를 사용해야 한다.이것은 좀 배우기 어려울 수도 있다. 처음에는 네가 그것을 좋아하지 않을 수도 있지만, 몇 가지 항목에서 그것을 사용해 보아라. 나는 네가 그것을 좋아하기 시작할 것이라고 믿는다.
참고: 이러한 프레임은 HTML 또는 CSS의 직접적인 대안이 아닙니다.이러한 프레임워크를 최대한 활용하려면 HTML과 CSS가 어떻게 작동하는지 잘 알아야 합니다.
만약 네가 이 문장이 매우 유용하다고 생각한다면 반드시 다른 사람과 공유해야 한다.읽어주셔서 감사합니다.
다음에 또 만나요!!!
Reference
이 문제에 관하여(틀의 싸움, 어떤 것을 선택하고 왜.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pravunathsingh/battle-of-the-frameworks-which-one-to-choose-and-why-27ke텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
