[Tailwind CSS] Tailwind 설치 1. node.js 설치
[tailwind css] 1. 설치 'node.js 설치'
tailwindcss가 좋다라는 말은 많고, 사용 용례도 늘어나고는 있는데, 사용하는 경우 어떻게 쓸지는 한글자료를 찾기 어려워서 정리해두는 중입니다. 홈페이지 작성 마무리단계이기는 한데, 이걸��
jaehyunshin.tistory.com
[Tailwind CSS] Tailwind 설치
기본 출처 : 'Tailwind CSS Tutorial' The Net Ninja [tailwind css] 1. 설치 'node.js 설치' [tailwind css] 1. 설치 'node.js 설치' tailwindcss가 좋다라는 말은 많고, 사용 용례도 늘어나고는 있는데, 사용..
jaehyunshin.tistory.com
먼저 이전에 만들어둔 public 폴더 안에 html 파일 하나를 만든다.
vs code 기준 ! 하고 tab
전체를 감쌀 div 하나,
내부에는 navigation bar,
main,
main 안에는 카드가 들어간다.
카드는 제목, 이미지, 설명 순으로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<!-- content wrapper -->
<div>
<nav>
<div>
<h1>
<a href="/">test template</a>
</h1>
</div>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div> <!-- End nav-->
<main>
<div>
<a href="#">Log in</a>
<a href="#">Sign up</a>
</div>
<header>
<h2>Recipes</h2>
<h3>test</h3>
</header>
<div>
<h4>Latest</h4>
<div>
<!-- card section -->
<div>
<img src="" alt="picture1">
<div>
<span>5 Bean chilli Stew</span>
<span>Recipe by Mario</span>
</div>
</div>
</div>
<h4>Latest</h4>
<div>
<!-- card section -->
</div>
<div>
<div>load more</div>
</div>
</div>
</main>
</div>
</body>
</html>
<link rel="stylesheet" href="style.css">를 적용하면
포맷 적용된 것들이 싹 없어지는 것을 확인 할 수 있다.
이제 여기에서부터 tailwind css의 적용을 시작하면 된다.
이후 부분들은 일단 홈페이지 수정 먼저 끝내고 진행해야지....
원문출처 : www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
Tailwind CSS Tutorial
www.youtube.com
