Tailwind CSS를 사용하여 이동이 편리하고 완전한 응답을 제공하는 사이트 내비게이션을 구축하는 방법
28977 단어 tailwindcsscssmobilehtml
네, 당신의 사이트를 위해 매력적인 내용을 쓰는 것은 매우 중요하지만, 만약 사용자가 그것을 내비게이션할 수 없다면, 이 모든 것은 헛수고가 될 것입니다.
더 어려운 것은 무수한 장치에서 내비게이션의 가용성, 화면 크기, 해상도를 고려해야 한다는 것이다.
다행히도, 몇 가지 기술과 최선의 실천이 사이트 내비게이션의 사용자 인터페이스와 사용자 체험을 파악하는 데 도움을 줄 수 있다.
우리는 본문에서 그것들을 탐구할 것이다.
Check out the DEMO
Download the SOURCE CODE
브랜디 의학 / 순풍 응답 내비게이션
그럼 저희가 뭘 짓고 있죠?
Tailwind CSS를 사용하여 다음과 같이 이동이 간편하고 완벽하게 응답하는 탐색 시스템을 구축합니다.
비밀 번호
나는 학습의 측면에서 본 교과서의 나머지 부분을 읽는 것이 너에게 유익하다고 믿는다.나는 또한 당신이 매우 바쁠 수도 있고 해결 방안을 실시하기만 하면 된다는 것을 알게 되었다.
이것은 완전한 코드다.
색인html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="public/dist/styles.css">
</head>
<body>
<h1 class="text-center my-10 text-4xl">Responsive Navigation</h1>
<nav class="flex flex-col md:flex-row bg-gray-200 p-5">
<div class="flex flex-wrap justify-between items-center">
<div>
Logo goes here...
</div>
<div class="burger md:hidden">
<div class="bar1 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
<div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="bar3 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
</div>
</div>
<ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around hidden">
<li>
<a href="#" class="block p-5">
Home
</a>
</li>
<li>
<a href="#" class="block p-5">
Services
</a>
</li>
<li>
<a href="#" class="block p-5">
About
</a>
</li>
<li>
<a href="#" class="block p-5">
Contact
</a>
</li>
<li>
<a href="#" class="block p-5">
Blog
</a>
</li>
</ul>
</nav>
<script src="public/dist/script.js"></script>
</body>
</html>
const burger = document.querySelector('.burger');
const links = document.querySelector('.links');
const bar1 = document.querySelector('.bar1');
const bar2 = document.querySelector('.bar2');
const bar3 = document.querySelector('.bar3');
burger.addEventListener('click', () => {
links.classList.toggle('hidden');
bar1.classList.toggle('transform');
bar1.classList.toggle('translate-y-1.5');
bar1.classList.toggle('-rotate-45');
bar2.classList.toggle('hidden');
bar3.classList.toggle('transform');
bar3.classList.toggle('-translate-y-1');
bar3.classList.toggle('rotate-45');
});
초기 설정
나는 네가 이미 알아차렸다고 믿는다. 이 프로젝트에서 우리는 놀라운Tailwind CSS 프레임워크를 사용하여 모든 CSS 스타일 디자인을 할 것이다.
CDN에 연결된 것만 추가할 수 있지만, 모든 훌륭한 기능에서 이득을 보지 못할 것이다.
따라서 NPM을 통해'순풍'CSS를 포함하겠습니다.
npm i tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli일단 설치가 완료되면, 우리는 더 많은 것을 설치한 후에야 내비게이션 코드를 작성할 수 있다.소포를 열다.나중에 Tailwind CSS를 컴파일하기 위해 스크립트를 추가해야 하기 때문에 json 파일입니다.
"build": "postcss ./src/styles.css -o ./public/dist/styles.css",
"prod": "NODE_ENV=production postcss ./src/styles.css -o ./public/dist/styles.css"
npx tailwindcss init -p 생성 tailwind.config.js 및 postcss.config.js 파일을 실행한 다음 tailwind.config.js 파일을 열고 darkMode 를 class로 업데이트합니다.CSS를 컴파일하기 전에 소스 CSS 파일을 만들어야 합니다.
src 폴더
mkdir src를 만들고 디렉터리cd src를 만들고 CSS 파일touch styles.css을 만듭니다.포함된 스타일을 스타일에 추가합니다.css 파일
@tailwind base;
@tailwind components;
@tailwind utilities;
npm run build를 실행합니다.이것은 컴파일된 스타일을 public/dist/styles.css 파일에 출력합니다.HTML 태그 - 구조 및 스타일
이제 프로젝트에 Tailwind CS를 포함하고 개발 패키지를 컴파일했으니 HTML 태그를 작성할 때가 되었습니다.
Tailwind CSS에 익숙해지면 HTML 요소의 스타일을 디자인하기 위해 다양한 '실용' 클래스를 내장할 수 있다는 것을 알게 될 것이다.이를 통해 맞춤형 CSS를 작성하는 시간이 많이 절약되고 개발 속도가 크게 빨라졌다.
우선, 우리의 견본을 준비하기 시작합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
</head>
<body>
</body>
</html>
!를 클릭한 다음 tab를 클릭하여 상기 코드를 자동으로 작성할 수 있습니다.그리고 컴파일한 스타일에 링크를 추가해야 합니다.css는 당신의 헤더 라벨에 있습니다.
...
<link rel="stylesheet" href="public/dist/styles.css">
</head>
<nav>
<ul class="links">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Services
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
nav 표시를 만들고 그 안에 무질서한 링크 목록을 추가하는 것이 사이트 내비게이션의 흔한 관례이다.다음은 좀 지루해 보이기 때문에 Tailwind의 유틸리티 클래스를 사용해서 스타일을 추가합니다.
우리는 네비게이션 레이아웃을 실현할 수 있는 몇 가지 방법이 있는데, 이 예에서 우리는 flexbox를 사용할 것이다.이것은 우리가 만족해야 할 각종 화면 크기에 응답할 수 있도록 필요한 모든 도구를 제공할 것이다.
몇 년 전에는 모바일 네비게이션이 데스크톱 네비게이션을 앞질렀기 때문에 먼저 모바일 네비게이션 시스템을 구축하는 것이 의미가 있다.모바일 장치 (작은 화면) 에서 작업할 수 있도록 집중해서 데스크톱에 적용할 것입니다.
대부분의 이동 장치는 수평 공간이 제한되어 있기 때문에 일반적인 방법은 내비게이션 링크를 서로 아래로 수직으로 배열하는 것이다.우리는 Tailwind의 flexbox 유틸리티 클래스를 사용하여 이 점을 실현할 것이다.
<nav class="flex flex-col md:flex-row bg-gray-200 p-5">
<ul class="links flex flex-col text-center">
...
</ul>
</nav>
ulflexbox withflex로 설정하고 링크를 한 열에 위치시켜 flex-col와 겹치게 하고 마지막으로 텍스트를 text-center에 가운데로 둔다.모바일 기기는 정지 기능이 없기 때문에 링크마다 충분한 간격을 두는 것이 매우 중요하다. 이렇게 하면 사용자가 필요한 옵션을 쉽게 누를 수 있다.모든 링크에 이 점을 실현하기 위해 약간의 충전을 추가합시다.
<li>
<a href="#" class="block p-5">
Home
</a>
</li>
이를 위해 햄버거 스타일을 사용자 정의하는 단추를 만들 것입니다. 기본적인 바닐라 자바스크립트를 사용하여 필요한 링크를 숨기고 표시합니다.기본 HTML 구조를 추가합니다.
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<ul class="links flex flex-col text-center">
...
</ul>
<div class="flex flex-wrap justify-between items-center">
<div class="burger">
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
</div>
</div>
더 큰 화면에는 햄버거 메뉴가 필요하지 않기 때문에 우리도 그것을 숨긴다.
Tailwind는 서로 다른 화면 크기에 대한 응답성 유틸리티 종류를 편리하게 제공합니다.우리의 예시에서 우리는
flex-row를 사용하여 링크를 수평으로 정렬하고 hidden류의 숨겨진 햄버거를 사용할 것이다.주의 md: 수식부호는 클래스에 미리 고정됩니다. <div>
<div class="burger md:hidden">
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="h-1 w-7 my-1.5 bg-gray-800"></div>
</div>
</div>
<ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around">
<nav class="flex flex-col md:flex-row bg-gray-200 p-5">
<div>
<div>
Logo goes here...
</div>
<div class="burger md:hidden">
<div class="bar1 h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="bar3 h-1 w-7 my-1.5 bg-gray-800"></div>
</div>
</div>
<ul class="links md:flex flex-col md:flex-row text-center w-full md:justify-around hidden">
public/dist 디렉토리에 script.js라는 새 파일을 만들고 HTML 파일에서 바디 태그를 닫기 전에 링크를 만듭니다. <script src="public/dist/script.js"></script>
</body>
script.js 파일을 열고 다음 코드를 추가합니다.const burger = document.querySelector('.burger');
const links = document.querySelector('.links');
burger.addEventListener('click', () => {
links.classList.toggle('hidden');
});
위에 체리를 추가하려면 햄버거 아이콘에 애니메이션을 추가합니다.
HTML 업데이트
<div class="burger md:hidden">
<div class="bar1 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
<div class="bar2 h-1 w-7 my-1.5 bg-gray-800"></div>
<div class="bar3 h-1 w-7 my-1.5 bg-gray-800 duration-300"></div>
</div>
script.js 파일을 (으)로 업데이트합니다.const burger = document.querySelector('.burger');
const links = document.querySelector('.links');
const bar1 = document.querySelector('.bar1');
const bar2 = document.querySelector('.bar2');
const bar3 = document.querySelector('.bar3');
burger.addEventListener('click', () => {
links.classList.toggle('hidden');
bar1.classList.toggle('transform');
bar1.classList.toggle('translate-y-1.5');
bar1.classList.toggle('-rotate-45');
bar2.classList.toggle('hidden');
bar3.classList.toggle('transform');
bar3.classList.toggle('-translate-y-1');
bar3.classList.toggle('rotate-45');
});
만약 당신이 이 강좌를 좋아한다면, 당신이 이곳에서 나를 따르도록 하세요. 그러면 새로운 강좌를 놓치지 않을 것입니다.
Reference
이 문제에 관하여(Tailwind CSS를 사용하여 이동이 편리하고 완전한 응답을 제공하는 사이트 내비게이션을 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brandymedia/how-to-build-a-mobile-friendly-fully-responsive-website-navigation-using-tailwind-css-3ef9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
