Tailwind
- HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트
- CSS 문서로 가지않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것
Tailwind의 장점
- 쉽고 빠르게 웹사이트 구축이 가능함
- 오직 HTML문서만 보면 됨
- 클래스 이름 고민 X / 협업 문제없음
- 유지보수 용이
Tailwind의 주요 속성
<!DOCTYPE html>
<html lang="ko">
<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>tailwindcss</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- https://tailwindcss.com/docs/margin -->
<!-- https://tailwindcss.com/docs/padding -->
<!-- https://tailwindcss.com/docs/font-weight -->
<!-- https://tailwindcss.com/docs/text-color -->
<div class="text-base">hello world</div>
<div class="text-lg">hello world</div>
<div class="text-2xl">hello world</div>
<div class="text-5xl p-3">hello world</div>
<div class="text-5xl pt-3">hello world</div>
<div class="text-5xl">hello world</div>
<br>
<br>
<div class="text-base">hello world</div>
<div class="text-base mt-3 mb-3">hello world</div>
<div class="text-base mt-3">hello world</div>
<br>
<br>
<div class="text-base">hello world</div>
<!-- my-3에서 y는 위, 아래 -->
<!-- mx-3에서 x는 왼쪽, 오른쪽 -->
<div class="text-base my-3">hello world</div>
<div class="text-base">hello world</div>
<!-- https://tailwindcss.com/docs/list-style-type -->
<div class="p-5">
<ul class="list-disc">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="p-5">
<ul class="list-disc list-inside">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, dignissimos provident molestiae quo ipsa consectetur nulla repellendus harum? Error architecto corporis, laborum nam molestias modi similique natus dicta suscipit quis.</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="p-5">
<ul class="list-decimal">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="w-32 h-32 bg-red-400"></div>
<br>
<div class="w-32 h-32 bg-red-400 rounded"></div>
<br>
<div class="w-32 h-32 bg-red-400 rounded-2xl"></div>
<br>
<div class="w-32 h-32 bg-red-400 rounded-full"></div>
<br>
<br>
<!-- rounded-full w24 -->
<!-- https://tailwindcss.com/docs/border-radius -->
<!-- https://tailwindcss.com/docs/border-width -->
<div class="border-t-4 border-red-400">hello world</div>
<br>
<div class="border-b-4 border-red-400">hello world</div>
<br>
<div class="border-l-4 border-red-400">hello world</div>
<br>
<div class="border-r-4 border-red-400">hello world</div>
<br>
<div class="border-4 border-red-400">hello world</div>
<!-- https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values -->
<div class="text-[17px]">
hello world
</div>
<div class="mt-[17px]">
hello world
</div>
<div class="bg-[#4267B2] text-white">
facebook
</div>
</body>
</html>
Tailwind도 커스터마이징이 가능할까?
- 커스터마이징이 가능함 (수정해야 할 변수가 많아 권장하지 X)
Tailwind로 이력서 작성하기
<!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>
<div class="flex">
<div class="w-1/3">
<img class="rounded-full m-8" src="./emoji.png" alt="" />
</div>
<div class="w-2/3">KIM HYOWON</div>
</div>
<div class="flex">
<div class="w-1/3 bg-[#454a5d] text-white">
<div class="border border-l-4 border-white m-4 pl-2">IN BRIEF</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
<div class="border border-l-4 border-white m-4 pl-2">CONTACT</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
<div class="border border-l-4 border-white m-4 pl-2">SKILL</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
</div>
<div class="w-2/3">
<div class="border-l-4 border-gray-600 m-4 pl-2 text-xl">
EXPERIENCE
</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
<div class="border-l-4 border-gray-600 m-4 pl-2 text-xl">
EDUCATIONS
</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
<div class="border-l-4 border-gray-600 m-4 pl-2 text-xl">PROJECTS</div>
<div class="px-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In animi
doloribus quod mollitia, odio excepturi pariatur ipsam repellat
nesciunt explicabo esse natus rerum, voluptates consequuntur fuga
maxime nostrum quisquam ex.
</div>
</div>
</div>
</body>
</html>Bootstrap
Bootstrap이란?
- 웹 라이브러리
- 최소한의 작업으로 빠르게 결과물을 만들 수 있도록 구축해놓은 종합 공구 세트
Bootstrap의 장점
- 큰 모니터 화면으로 보던지 휴대폰처럼 작은 화면으로 보던지 상관없이 사용자의 시점에 맞춰 최적화되어 화면을 구성
- 반응형 사이트를 구축하기에 최적화
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240705 JavaScript-01 (0) | 2024.07.05 |
|---|---|
| [EST] 240627 Figma-01 / CSS-10 (0) | 2024.07.01 |
| [EST] 240625 GitHub-01 (0) | 2024.07.01 |
| [EST] 240624 CSS-09 (1) | 2024.07.01 |
| [EST] 240621 CSS-08 (0) | 2024.06.29 |
