이번에는 tailwind를 작성하면서 사용했던 단축키나 여러 팁들을 저장하고자 한다. 해당 내용은 추후 tailwind을 사용하고 배우면서 하나씩 채워 나가는 용도로 사용하고자 한다.
html 기본 골격 만들기
일단 html 문서를 건들일때는, <html>, <head> <meta> <title> <body> 처럼 기본적으로 사용하는 태그들을 미리 써줘야 할 필요가 있다. 하지만 이를 하나하나 적기에는 많은 시간이 드는데, 이를 간단하게 불러오는 방법이 있다.
- ! + Tap
해당 단축키를 이용하면 이렇게 html의 전반적인 골격이 완성된다. 현재 내가 작업하고 있는 환경은 webstorm 이지만, VSC에도 같은 기능이 있으므로 이를 활용하여 빠르게 html 의 기본적인 골격을 완성하자.
- index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
클래스가 담긴 태그 만들기
일반적으로 태그안에 클래스를 만들려고 하면 태그를 적어둔 뒤, 뒤에 class="" 을 붙여 처리한다. 하지만 이 시간 마저 아깝다면 해당 방법을 사용해보자.
- .p-2.m-2.justify-center.items-center. + Tap
해당 방법을 이용하게 되면 <div class="p-2 m-2 justify-center items-center"></div> 태그가 새롭게 만들어 진다. 만약에 div 태그가 아닌 다른 태그를 쓰고 싶다면 첫 온점 앞에 자신이 사용하고자 하는 태그를 적어두면 된다.
- index.html
<!--
.p-2.m-2.justify-center.items-center + Tap
-->
<div class="p-2 m-2 justify-center items-center"></div>
태그 반복적으로 만들기
- 태그이름 + * + 숫자 + Tap
<!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
만약에 태그 안에 텍스트나 반복적으로 숫자를 넣어야 하는 상황이 있다면 아래와 같은 방법을 이용한다.
- div{items $}*5. + Tap // 여기서 items는 그저 텍스트의 역활만 한다.
< -- div{text $}*3 -->
<div>text 1</div>
<div>text 2</div>
<div>text 3</div>
더미 텍스트 사용하기
CSS을 만지다보면 가끔 박스안에 글자를 넣었을 때 어떻게 변화할지에 대한 부분을 확인하고 싶은 경우가 있다. 이럴 때는 더미 텍스트가 필요한대 이를 lorem 을 이용하면 쉽게 해결 할 수 있다.
- lorem + Tap
<!-- lorem -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aliquid blanditiis commodi deleniti ea fugiat inventore, libero nemo porro quam quia quo sapiente sed similique. Commodi facilis fugit porro.
<!-- lorem4 -->
Lorem ipsum dolor sit.
<!-- lorem*4-->
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque earum illo ipsum repudiandae saepe suscipit vel.
Alias amet consequatur cupiditate maiores, nisi quas rem. Eius incidunt itaque quam velit?
</div>
<div>Accusamus beatae debitis deleniti dolor error ex minus pariatur reprehenderit sed totam! Accusamus, architecto
atque commodi deserunt error exercitationem, inventore maiores nostrum possimus qui quod quos sit sunt, ullam vero?
</div>
<div>Accusamus commodi consectetur cum debitis delectus, dolorem hic id illum laboriosam laudantium necessitatibus
officia porro quia quisquam quo reiciendis reprehenderit sit tempore temporibus voluptatibus! Cupiditate deleniti
enim fuga nulla officiis.
</div>
<div>Ab alias asperiores aspernatur atque blanditiis cum dolor doloremque, eum facere fugit incidunt magni optio quaerat
quisquam, reprehenderit sed suscipit totam vero voluptate, voluptatibus! Consequatur enim esse laudantium magnam
totam?
</div>'FrameWork > Tailwind' 카테고리의 다른 글
| 트랜스폼, 애니메이션 조절하기 (1) | 2023.11.06 |
|---|---|
| 플렉스, 그리드 조절하기 (0) | 2023.11.05 |
| 테두리, 필터, 상호작용 조절하기 (0) | 2023.11.05 |
| 공간 사이즈, 레이아웃, 그림자와 그라데이션 조절하기 (0) | 2023.11.05 |
| 색 , 컨테이너와 공간, 타이포그래피 조절하기 (0) | 2023.11.05 |