[Day 22] Tailwind

HTML에서 CSS 마크업을 할 수가 있다?

고거시 바로 꼬리바람이다.

 

테일윈드를 배우고 실습해보면서

CSS 파일 없이 페이지를 꾸밀 수 있다는 장점에는 공감을 했지만,

클래스로 떡칠이 되어가는 html..과 

수정할 때 가독성이 안좋은 것 같다는 점이 나한테는 살짝 불호같다..ㅠ_ㅠ

 

오늘도 실습한 내용을 코드와 구현창 위주로 정리하려 한다.

(테일윈드 사용시 반드시 헤드에 스크립트 소스 붙이기!!)

 

1) colors, fonts

<div class="space-y-5">
        <div class="p-3 bg-white shadow rounded-lg">
        <h3 class="text-xs border-b">font-sans</h3>
        <p class="font-sans">
            The quick brown fox jumps over the lazy dog.
        </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
        <h3 class="text-xs border-b">font-serif</h3>
        <p class="font-serif">
            The quick brown fox jumps over the lazy dog.
        </p>
        </div>
        <div class="p-3 bg-white shadow rounded-lg">
        <h3 class="text-xs border-b">font-mono</h3>
        <p class="font-mono">
            The quick brown fox jumps over the lazy dog.
        </p>
        </div>
    </div>

이력서 실습 시간 때 웹폰트를 임포트하려고 했었는데

테일윈드에서 그러기가 쉽지 않았다(구글링해보면 js컨트롤, next.js 등등 @~@)

자스 배우고 나서 생각나면 시도해봐야겠다...ㅎ

 

 

2)typhography shadow

<div class="grid grid-cols-2 gap-6">
        <div class="shadow-sm bg-white rounded-lg">
            shadow-sm
        </div>
        <div class="shadow bg-white rounded-lg">
            shadow
        </div>
        <div class="shadow-md bg-white rounded-lg">
            shadow-md
        </div>
        <div class="shadow-lg bg-white rounded-lg">
            shadow-lg
        </div>
        <div class="shadow-xl bg-white rounded-lg">
            shadow-xl
        </div>
        <div class="shadow-inner bg-white rounded-lg">
            shadow-2xl
        </div>
    </div>

 

3) flex

<div class="flex flex-wrap border-4 border-red-300 m-3">
        <div class="flex-1 border-4 border-blue-500">hello world</div>
        <div class="flex-1 border-4 border-blue-500">hello world</div>
    </div>

    <div class="flex flex-wrap border-4 border-red-300 m-3">
        <div class="w-1/4 border-4 border-blue-500">hello world</div>
        <div class="w-3/4 border-4 border-blue-500">hello world</div>
    </div>

    <div class="flex flex-wrap border-4 border-red-300 m-3">
        <div class="w-3/4 border-4 border-blue-500">hello world</div>
        <div class="w-1/4 border-4 border-blue-500">hello world</div>
    </div>

    <div class="flex flex-wrap border-4 border-red-300 m-3">
        <div class="border-4 border-blue-500">wrap test</div>
        <div class="border-4 border-blue-500">wrap test</div>
    </div>

    <div class="box-border border-4 border-red-300 m-3">
        <div class="inline-block w-1/4 border-4 border-blue-500">wrap test</div>
        <div class="inline-block w-1/4 border-4 border-blue-500">wrap test</div>
    </div>

    <div class="flex-col flex-nowrap border-4 border-red-300 m-3">
        <div class="border-solid border-4 border-blue-500">
            hello world
        </div>
        <div class="border-solid border-4 border-blue-500">
            hello world
        </div>
    </div>

    <!-- 중앙정렬 -->
    <div class="flex w-36 h-36 justify-center items-center border-4 border-red-300 m-3">
        <div class="border-4 border-blue-500">01</div>
    </div>

 

5) grid

 <div class="grid grid-cols-3 gap-2">
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
        <div class="border-solid border-4 border-blue-500">hello world</div>
    </div>

    <div class="grid grid-cols-3 gap-4 mt-10">
        <div class="border-solid border-4 border-blue-500">01</div>
        <div class="border-solid border-4 border-blue-500">02</div>
        <div class="border-solid border-4 border-blue-500">03</div>
        <div class="col-span-2 border-solid border-4 border-blue-500">04</div>
        <div class="border-solid border-4 border-blue-500">05</div>
        <div class="border-solid border-4 border-blue-500">06</div>
        <div class="col-span-2 border-solid border-4 border-blue-500">07</div>

 

6) transition

    <div class="flex h-64 justify-center items-center">
        <button class="transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 rounded p-5 m-3 text-white">
            Save Changes
        </button>
        <button class="transition ease-linear bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 rounded p-5 m-3 text-white">
            Save Changes
        </button>
        <button class="transition ease-in-out bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-100 rounded p-5 m-3 text-white">
            Save Changes
        </button>
    </div>
</body>

7) 반응형

<div class="w-8 h-64 bg-red-500 md:bg-green-500 md:w-16 lg:bg-blue-500 lg:w-32">
        hello world
    </div>

 

 

[실습: 천하제일 이력서 대회]

 

https://daheejo.github.io/Dahee-s_resume/

조다희의 이력서