복붙으로 반응형 웹사이트 만들기 [tailblocks]

웹페이지 구조를 하나하나 만들어서 프로토타입으로 만드는데 걸리는 시간을 한참 줄여줄 수 있는 팁 하나를 소개해드리고자 합니다.

물론 각 항목들에 대한 수정은 있어야 할지 몰라도, 반응형 되고요, 페이지의 구성도 네비게이션바부터 푸터까지 다 잡아서 나타낼 수 있어요.

바로 tailblocks 라는 페이지를 이용하는 건데, 사용방법은 굉장히 간단하면서도, 편리합니다.

지금 보시면서 따라하셔도 금방 웹페이지 하나를 만드실 수 있어요.

사이트는 아래 링크를 통해 접근 가능하십니다.

https://mertjf.github.io/tailblocks/

tailblocks — Ready-to-use Tailwind CSS blocks

mertjf.github.io

tailblock으로 검색하시면 아래 제일 처음 나타나는 링크로 진입가능하십니다.

접속하시면 이렇게 화면 ui 가 나타난 걸 확인하실 수 있어요.

간략하게 살펴보겠습니다.

왼쪽에 있는 카테고리별로 구성된 항목들을 클릭하시면, 오른쪽 화면에 해당 구성의 UI가 출력됩니다. 네비게이션바, hero, contents, contact, footer 등의 기본적인 구성들을 다 포함하고 있고, 상단의 디바이스 버튼을 누르면 반응형으로 동작했을 때 화면도 먼저 볼 수 있어요.

그럼 이제 웹페이지 하나를 만들어볼게요. 기본적인 랜딩페이지를 만들겁니다.

먼저, 웹페이지 기본 구성 잡아주시고, (에디터는 자율적으로 쓰시면 되십니다. 저는 vscode를 쓸겁니다.

먼저 파일 이름.html 저장 후 '!' 입력 하신 다음 tab으로 잡아줍니다.

이제 tailwindcss를 넣을겁니다. 다운로드를 받아서 실행하시고, 추후 정리하는 방법도 있지만, 일단은 샘플만 볼 예정이니 cdn으로 할거에요.

https://tailwindcss.com/

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs

Documentation for the Tailwind CSS framework.

tailwindcss.com

사이트 접속해서 'cdn'검색 하시고, 코드 복사 또는,

아래 코드블록을 복사하셔서, 작성하신 html 코드의 head부분에 붙여넣기 해줍니다.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

그럼 이제, 내용을 하나하나 채워볼게요.

먼저 네비게이션바 부분을 넣을건데, 여기에서는 header라고 하고 있어요. 그 안에서 원하는 레이아웃을 선택해줍니다.

다음 오른쪽 상단에 < > VIEW CODE를 눌러주면,

이렇게 코드가 나타나는걸 볼 수있어요. 이 상태에서 'COPY TO CLIPBOARD'를 클릭, 코드의 body 에 붙여넣기를 합니다.

<header class="text-gray-700 body-font">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <nav class="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
      <a class="mr-5 hover:text-gray-900">First Link</a>
      <a class="mr-5 hover:text-gray-900">Second Link</a>
      <a class="mr-5 hover:text-gray-900">Third Link</a>
      <a class="hover:text-gray-900">Fourth Link</a>
    </nav>
    <a class="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="ml-3 text-xl">tailblocks</span>
    </a>
    <div class="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
      <button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>
  </div>
</header>

이렇게 복사가 잘 되어서 들어와요. 사실 이게 전부입니다.:)

남은건 다른 항목들을 선택, VIEW CODE, CLIP TO PASTEBOARD, 붙여넣기 반복해주시면 됩니다.

저는 hero, contents, contact, footer 만 넣어볼게요.