hyungju-lee

77. Practicing with Tailwind

npm create vue@latest

이 강의에서는 Tailwind를 사용하는 연습을 하겠습니다.
우리 사이트는 현재 부분적으로 깨져 보입니다.
곧 이를 수정할 예정입니다. 우선, 바디 태그에 몇 가지 클래스를 적용해볼 것입니다.
변경하고 싶은 것은 문서의 폰트 패밀리와 배경색입니다.
다른 탭에서 정적 템플릿 버전을 열어둔 상태입니다.
정적 버전에서는 폰트 패밀리가 Roboto로 설정되어 있고, 배경색은 연회색입니다.
이 변경사항을 우리 템플릿에 적용해야 합니다. 배경색부터 시작해 보겠습니다.

우리에게는 두 가지 옵션이 있습니다.
바디 태그를 선택하고 배경색 속성을 추가하여 색상을 설정하거나 Tailwind에서 색상을 선택할 수 있습니다.
공식 Tailwind 사이트로 이동해 보겠습니다.
상단에서 수정하고자 하는 속성을 검색할 수 있습니다.
배경색을 변경하려고 하니 배경색 속성을 검색해보겠습니다.
그러면 요소의 배경색을 변경하는 클래스 목록이 있는 페이지로 이동합니다.

이 표는 클래스의 이름, 영향을 미치는 속성, 사용하는 값에 대해 알려줍니다.
오른쪽에는 색상 미리보기도 있습니다.
볼 수 있듯이 수십 가지 색상이 있습니다.
개인적으로 저는 BG Gray 100이 마음에 듭니다.
복사해 보겠습니다. bg-gray-100

편집기에서 index HTML 파일을 엽니다.
인덱스 HTML 파일에 바디 태그가 위치해 있습니다.
바디 태그에 BG Gray 100 클래스를 추가하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body class="bg-gray-100">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>









 




인덱스 HTML 파일을 수정하는 것은 완전히 괜찮습니다.
사실, Tailwind 구성 파일은 이 파일의 내용을 검색하여 Tailwind 클래스를 찾습니다.
Vue 컴포넌트 외부에서도 Tailwind 클래스를 사용할 수 있습니다.
페이지를 새로고침하여 결과를 확인해보겠습니다.
배경색이 변경되었습니다.
Tailwind는 사용하기가 매우 간단합니다.
변경하고 싶은 속성을 검색하고, 클래스를 선택하여 HTML에 적용하면 됩니다.
CSS를 작성할 필요가 없습니다.
Tailwind를 충분히 사용하면 클래스에 빨리 익숙해질 것입니다.

다음 문제를 해결해 보겠습니다.
템플릿의 폰트 패밀리를 변경하고 싶습니다.
Tailwind 문서로 이동하겠습니다.
이번에는 폰트 패밀리 속성을 검색할 것입니다.

Tailwind는 요소의 폰트 패밀리를 변경하는 세 가지 클래스를 제공합니다.
우리가 적용하고자 하는 폰트 패밀리의 이름은 Roboto입니다.
'font-sans' 속성을 살펴보면 Roboto 폰트 패밀리가 값으로 나열되어 있음을 확인할 수 있습니다.
폰트 패밀리가 Tailwind 클래스에 나열되어 있지 않다면, Tailwind를 수정하여 폰트 패밀리를 포함시킬 수 있습니다.
사이드바에서 'Customizing' 링크를 클릭합니다.

Tailwind는 기본 구성에 나열되지 않은 값을 포함시키는 방법에 대한 지침을 제공할 것입니다.
문서에 따르면 새 폰트 패밀리를 추가하려면 Tailwind 구성 파일을 수정해야 합니다.
다행히도, 우리는 구성을 수정할 필요가 없습니다.
편집기로 돌아가서 바디 태그에 'font-sans' 클래스를 추가하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body class="bg-gray-100 font-sans">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>









 




이 클래스는 문서에 Roboto 폰트 패밀리를 적용할 것입니다.
하지만, 폰트 패밀리 자체를 로드하는 작업은 우리가 직접 처리해야 합니다.
다음 강의에서 자산 로드에 대해 이야기할 예정입니다.
일단 여기까지만 하겠습니다.

여러분에게 도전과제를 드리겠습니다.
우리는 음악 애플리케이션을 만들고 있습니다.
모든 페이지 하단에는 오디오 플레이어가 있습니다.
이 오디오 플레이어는 문서 끝에서 다른 요소와 겹치지 않도록 공간이 필요합니다.
브라우저가 페이지 하단으로 스크롤될 때, 여백을 추가해야 합니다.

여기 도전과제가 있습니다.
문서 하단에 여백을 추가하는 클래스를 찾아보세요.
클래스를 찾은 후, 바디 태그에 적용하세요.
여백의 크기는 6rem이어야 합니다.

여백을 추가하는 클래스는 수백 가지가 있습니다.
우리는 요소의 모든 면에 여백을 추가하거나, 축에 여백을 추가하거나, 한 면에만 여백을 추가할 수 있습니다.
우리가 적용하려는 클래스는 pb-24입니다.
이 클래스는 요소의 하단에 여백을 추가합니다.
값은 6rem입니다.
이 클래스를 복사해 보겠습니다.
다음으로, 편집기에서 바디 태그에 이 클래스를 추가하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body class="bg-gray-100 font-sans pb-24">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>









 




멋지네요. 우리는 완료했습니다. 우리는 CSS 처리만 했을 뿐입니다.
우리 템플릿에는 이미지와 폰트가 필요할 것입니다.
다음 강의에서는 템플릿을 위한 다른 자산들을 로드하기 시작할 것입니다.