TailwindCSS 시작 워크숍
32306 단어 CSSHTMLTailwind CSSfrontendtech
독자 대상
이른바 TailwindCSS
인기 있는 CSS 프레임워크 중 하나가 됩니다.
먼저 공식 문서읽어보세요.
Rapidly build modern websites without ever leaving your HTML.
HTML 레이크 모던한 사이트를 고속으로 제작할 수 있을 것 같다.
어서 TailwindCSS를 가져와서 사용하세요.
설치 단계
숨쉬는 것처럼 당연히공식 문서 훑어보세요.
WEB학과의 기술은 유행이 빠르게 변하기 때문에 한 번의 소스부터 조사하는 것이 좋다.
npm라고 불리는 노드 봉인 관리자의 명령을 사용해서 설치하는 것을 권장합니다.
이번엔 노드.js 환경이 없어도 CDN(Conntent Delivery Network)을 사용하여TailwindCSS에 접근해야 한다.
CDN은 인터넷상의 내용을 가리킨다.
실제 방문TailwindCSS의 CDN하면 실체를 알 수 있다.
먼저 HTML 파일을 만듭니다.
적당한 곳에서 index.서류를 작성하세요.
공식 서류에 따라 써 보아라.
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
굵게 및 밑줄이 있는지 확인할 수 있습니다.
CDN에서 참조하는 스크립트 태그만 헤드 태그에 설명합니다.
<h1 class="text-3xl font-bold underline">
만든 물건
원래는 AdobeXD 등의 도구를 사용해 WEB 디자인부터 시작할 수 있다.
이번에는 WEB 디자인이 이쪽을 모방했다.
위에는 로고와 메뉴가 있고, 아래에는 배경 이미지와 제목과 단추가 있습니다.
흔한 WEB 디자인의 구성입니다.
화면 크기가 작아지면 머리 부분이 햄버거 메뉴로 바뀐다.
하지만 햄버거 메뉴를 클릭해도 아무 일도 일어나지 않는다.
설치 버튼을 눌러서 처리해야 합니다.이번에는 할애 실장 처리를 클릭하세요.
구축 절차
1. 머리글 만들기
먼저 머리글을 만듭니다.
각 영역에 대해 머리글 부분에 표시되도록 적절한 배경색을 설정합니다.
참조여기..
항목의 정렬을 제어합니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="w-full bg-red-200">
<div class="flex justify-between bg-blue-200 max-w-5xl mx-auto">
<div class="bg-yellow-200">Logo</div>
<div class="bg-indigo-200">Menu</div>
</div>
</nav>
</body>
</html>
로고와 메뉴 영역이 완성되었습니다.
2. 표지 부분 제작
로고 작성을 계속합니다.
그림은 Hero Icon에서 빌려 쓴다.
svg 라벨을 노란색 배경색 영역에 놓습니다.
또 로고의 오른쪽에 제목을 기재하고 싶어 flex 속성과 중앙 정렬을 추가했다.
index.html
<nav class="w-full bg-red-200">
<div class="flex justify-between bg-blue-200 max-w-5xl mx-auto">
<div class="flex items-center bg-yellow-200">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
/>
</svg>
<h2 class="text-xl font-bold">タイトル</h2>
</div>
<div class="bg-indigo-200">Menu</div>
</div>
</nav>
노란색 구역에 표지가 나타났다.
노란색 배경색은 나중에 삭제됩니다.
3. 메뉴 만들기
인디고 구역에서 Menu를 추서하세요.
히든이라는 기술이 있습니다.
자세한 내용은 확인하십시오여기..
화면 크기에 따라 스타일을 적용할 때의 설명 방법입니다.
스펀지를 간단하게 대처할 수 있다.
index.html
<div class="bg-indigo-200">
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button
type="button"
class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
aria-label="toggle menu"
>
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path
fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
></path>
</svg>
</button>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden -mx-4 lg:flex lg:items-center">
<a
href="#"
class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400"
>Web developers</a
>
<a
href="#"
class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400"
>Web Designers</a
>
<a
href="#"
class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400"
>UI/UX Designers</a
>
<a
href="#"
class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400"
>Contact</a
>
</div>
</div>
메뉴 나왔습니다.
먼저 인디고의 배경색을 지워라.
4. 배경 이미지 추가
nav 탭 아래에 다음 코드를 추가합니다.
배경 이미지, 제목 및 버튼을 추가합니다.
index.html
<div
class="w-full bg-center bg-cover h-96"
style="
background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
"
>
<div
class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50"
>
<div class="text-center">
<h1 class="text-2xl font-semibold text-white uppercase lg:text-3xl">
Build Your new <span class="text-blue-400 underline">Saas</span>
</h1>
<button
class="w-full px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md lg:w-auto hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
>
Start project
</button>
</div>
</div>
</div>
이것만 나오면 OK.
완성
완성 코드는 여기.입니다.
완성품
끝말
TailwindCSS에서는 class 속성에 TailwindCSS 속성을 설정하여 간단하게 스타일링할 수 있습니다.
이번에 > 파일을 불러왔기 때문에 코드의 가독성이 매우 떨어진다.
TailwindCSSFunctions & Directives 등을 활용해 코드 분할과 삭감을 진행하자.
그게 다야.
Reference
이 문제에 관하여(TailwindCSS 시작 워크숍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/takaha4k/articles/8e573887003c05텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
