TailwindCSS로 추천 카드 만들기
8292 단어 tailwindcsswebdev
소개하다.
안녕하세요, 제 블로그로 돌아온 것을 환영합니다.사람들이 기다리던 TailwindCSS 프로젝트가 여기 있습니다!!호리!그거 좋잖아.TailwindCSS 시리즈의 마지막 3편에서 우리는TailwindCSS의 기본 원리, 그의 장점과 단점을 토론했고TailwindCSS의 맞춤형 제작, 심지어TailwindCSS에서 우리만의 맞춤형 실용 프로그램과 맞춤형 클래스를 만들었다.이 문서에서는 다음을 다룹니다.
If this is your first time hearing about TailwindCSS, be sure to consume the following article and come back and join us here, we would be waiting for you:
본고에서 우리는 우리의 이름, 직업, 그리고TailwindCSS에 대한 멋진 증언이 적힌 증명 카드를 구축할 것이다.다음은 내 것이다.
정말 귀여워요?나는 어떤 CSS도 쓰지 않고 그것을 만들었다.저와TailwindCSS는 당신을 어떻게 구축하는지 배울 것입니다. 본고의 목적을 위해 저는 제가 좋아하는 색깔로 저를 재구성할 것입니다. 하지만 당신 쪽에서 저는 당신의 색깔, 당신의 아름다운 사진, 당신의 이름과 직업을 추가해서 당신을 변화시키기를 바랍니다. 제가 하는 것처럼.
우리는 Tailwind Playground를 사용할 것이다. 물론 당신이 좋아하는 온라인 환경을 선택할 수 있다. 로컬 기기에서 당신의 코드 편집기를 사용할 수도 있고 학습 과정을 통해 이 실천에 Tailwind를 설치할 수도 있다. 이것은 당신이 배운 것을 강화할 수 있기 때문에 이것article에서 설치 안내서를 사용할 수 있다.다른 온라인 코드 편집기를 사용하려면 Codepen 을 보십시오.코드pen을 사용한다면,TailwindCSS를 사용할 수 있는 설정을 추가하는 방법을 가르쳐 드리겠습니다.
Settings
탭을 클릭합니다.Add External Stylesheets/Pens
합니다.우리가 만들자!!!
이제 구축을 시작하려면TailwindCSS가 하나의 프레임워크라는 것을 알아야 합니다. 이 프레임워크는 모바일 장치를 먼저 사용할 수 있는 기회를 줍니다.
우리가 원하는 모든 것을 설계하는 방법은 우리가 이 프로젝트에서 사용할 방법이기 때문이다.
우선 카드의 모든 항목을 포함하는 용기
section
를 만듭니다.<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
</section>
그럼 우리 위에서 뭐 했어?우리는 용기 apadding-top
4를 주고 그 다음에 흰색 배경을 주었다. 경계 반경은TailwindCSS류rounded-xl
를 사용했다. 이것은 0.75rem
와 같다. 카드에 음영을 추가했다. mx-auto
는 x축(왼쪽과 오른쪽)의 경계를 사용하여 페이지에 중심을 잡고 가장자리 10의 경계를 포함하여 페이지로 밀어낸다.그리고 우리는 너비w-4/5
를 증가시켰다. 이것은 너비가 80%와 같은 순풍 등급이다.완성좋아.현재,
section
에서, 우리는 우리의 증명 성명을 보존하기 위해 blockquote
를 만들 것입니다.<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
<blockquote class="m-8">
<p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
</blockquote>
</section>
우리는 수업blockquote
의 각 방면에 8의 간격을 늘렸고 수업semi-bold
에서 증명 성명을 했다font-semi-bold
.이제 카드는 다음과 같습니다.우리 잘했어!!!이제 이름, 사진, 직업을 포함하는 부분으로 넘어가겠습니다.우리는 이미지와 우리의 이름 + 직업을 포장하기 위해
div
를 만들 것입니다.<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
<blockquote class="m-8">
<p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
</blockquote>
<div class= "text-white bg-pink-600 p-8 rounded-b-xl">
</div>
</section>
div
의 배경색은 분홍색이고 밀도는 600이며 텍스트는 흰색이며 주위는 8로 채워지고 밑부분은 원형(테두리 반경은 0.75rem)으로 배경색을 선택할 수 있습니다.이제 사진과 글을 한 장 추가합시다. 이것은 우리의 이름과 직업입니다.나는 Unsplash의 그림을 사용할 것이다.
<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
<blockquote class="m-8">
<p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
</blockquote>
<div class= "text-white bg-pink-600 p-8 rounded-b-xl">
<img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white " >
<div>
<p class= "font-bold"> Franklin Okolie</p>
<p> Software Engineer</p>
</div>
</div>
</section>
우리의 이미지는 한 등급w-24
이 있는데 이것은 너비가 6rem이고 높이가 6rem인 이미지가 한 등급h-24
이 있다는 것을 의미한다.우리는 rounded-full
를 동그라미로 만들고 그 주위에 흰색 테두리를 둘렀다. 나는 내 이름+직업을 하나div
에 포장하여 코드를 간결하고 쉽게 읽을 수 있도록 했다.이제 카드는 다음과 같습니다.호리!우리는 손바닥을 털고 계속 전진할 수 있지만, 데스크톱에 더 많은 스타일을 추가해야 합니다. 이 스타일은 데스크톱 화면에 기본적으로 적용됩니다. 설령 우리가 이동을 우선시하는 방법을 사용했다 하더라도.
section
에 다음을 추가합니다.<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5 md:w-3/5">
</section>
우리는 방금 md:w-3/5
를 추가했는데 이것은 중등 및 이상 스크린에 대해 이 부분의 너비는 w-3/5
로 60%의 너비와 같다는 것을 의미한다.우리div
가 그림과 텍스트를 손에 들고 있을 때, 우리는 중간 화면에서 그림 위쪽과 우리의 이름 + 직업을 나란히 하기를 희망한다.따라서 flexbox 스타일을 추가하고 가운데에 배치할 수 있습니다.<div class= "text-white bg-pink-600 p-8 rounded-b-xl md:flex md:items-center">
</div>
그림% 1개의 캡션을 편집했습니다. <img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white md:mr-4">
우리 끝났어!휴대전화에서 데스크톱까지의 모든 화면에 우리의 카드는 고정되어 있어 응답 속도가 매우 빠르다.이거 달콤하지 않아요?우리는 어떤 CSS도 작성하지 않고 이 모든 것을 완성했다.이것은 세계 8대 기적일 것이다.결론
나는 네가 이 문장을 좋아하길 바란다. 나는 정말 지체없이 너의 추천 카드를 보고 싶다. 너는 평론 구역에서 나에게 보여줄 수 있니?내가 좀 더 보여줄게.
Go, Javascript,TailwindCSS, 소스 오픈, 본문에 대해 궁금한 것이 있다면?너는 여기서 나를 찾을 수 있다.다음에 봐요.감사합니다.
Reference
이 문제에 관하여(TailwindCSS로 추천 카드 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/developeraspire/building-a-testimonial-card-with-tailwindcss-p64텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)