1. 타이틀 수정

먼저 타이틀을 Testimonial Grid로 변경합니다.

2. 배경 색상 추가

body 태그에 Gray-200 배경 클래스를 추가합니다.

3. 글로벌 컨테이너 설정

기존의 <h1> 태그를 삭제하고 글로벌 컨테이너를 만듭니다.

<div class="container mx-auto max-w-7xl p-2 md:p-10">

• container: 중앙 정렬
• mx-auto: 수평 중앙 배치
• max-w-7xl: 최대 너비를 설정
• p-2: 기본 패딩
• md: 중간 화면 이상에서는 패딩을 10으로 설정

4. 그리드 컨테이너 설정

이제 그리드 레이아웃을 적용할 예정이지만, 우선 클래스는 text-white로 설정해, 대부분의 텍스트가 흰색임을 표현합니다. 이후 박스 1을 구성할 예정입니다.

5. 첫 번째 박스 생성

첫 번째 박스를 구성하고, 이후 다른 박스를 복사해 색상 등을 조정합니다.

<div class="relative p-10 rounded-xl text-white bg-purple-700">

• relative: 내부에서 절대 위치를 사용할 수 있도록 상대 위치 지정
• p-10: 내부에 10만큼의 패딩 추가
• rounded-xl: 박스를 둥글게 설정
• bg-purple-700: 배경을 보라색으로 설정

6. 인용구 이미지 추가

SVG 인용구 이미지를 배치합니다. 이 이미지는 절대 위치를 사용해 박스의 오른쪽 상단에 배치됩니다.

<img src="images/bg-pattern-quotation.svg" alt="" class="absolute top-3 right-10 scale-125 md:top-7 md:right-24 md:scale-150">

• absolute: 상위 요소에 대해 절대 위치 지정
• top-3, right-10: 상단에서 3, 오른쪽에서 10만큼 떨어짐
• scale-125: 크기를 1.25배로 확대
• md, md: 중간 화면에서는 위치와 크기를 변경

7. 박스 헤더 추가 (이미지, 이름, 직위)

박스의 헤더에는 사용자 이미지와 이름, 직위가 포함됩니다. 이를 Flexbox로 설정하고, 인용구 이미지 위에 텍스트가 표시되도록 z-index를 설정합니다.

<div class="flex z-10 space-x-4">
  <img src="images/image-daniel.jpg" alt="" class="w-10 h-10 ring-2 ring-purple-300 rounded-full">
  <div class="text-sm">
    <h4 class="opacity-90">다니엘 클리포드</h4>
    <p class="opacity-50">인증된 졸업생</p>
  </div>
</div>

• flex: 가로로 정렬
• space-x-4: 아이템 간의 간격을 4만큼 설정
• w-10, h-10: 이미지의 크기를 설정
• ring-2: 외곽선을 추가
• ring-purple-300: 외곽선 색상을 보라색으로 설정
• rounded-full: 이미지를 원형으로 설정
• text-sm: 텍스트 크기를 작게 설정
• opacity-90: 이름의 불투명도를 90%로 설정
• opacity-50: 직위의 불투명도를 50%로 설정

8. 큰 텍스트 및 작은 텍스트 추가

헤더 아래에는 큰 텍스트와 작은 텍스트를 추가합니다. 큰 텍스트는 상대적으로 위치를 설정해 인용구 이미지 위에 겹치도록 합니다.

<p class="relative z-10 mt-6 text-xl">큰 텍스트 내용</p>
<p class="mt-6 opacity-50 line-clamp-6">작은 텍스트 내용</p>

• relative: 텍스트의 위치를 상대적으로 설정
• z-10: 텍스트가 인용구 이미지 위에 표시되도록 z-index 설정
• mt-6: 상단에 6만큼의 여백 추가
• text-xl: 큰 텍스트 크기 설정
• opacity-50: 작은 텍스트의 불투명도를 50%로 설정
• line-clamp-6: 6줄까지만 텍스트가 표시되도록 설정

전체 컨테이너

<!-- 글로벌 컨테이너 -->
<div class="container mx-auto max-w-7xl p-2 md:p-10 ">
  <!-- 그리드 컨테이너 -->
  <div class="container max-auto max-w-7xl p-2 md:p-10">
    <!-- 그리드 시스템 시작 -->
    <div class="grid gap-6 grid-cols-1 text-white md:grid-cols-4 md:grid-rows-2">

여기서는 글로벌 컨테이너와 그리드 컨테이너를 정의하고 있습니다. grid-cols-1은 작은 화면에서 1열로 배치되도록 하고, md:grid-cols-4는 중간 크기 이상의 화면에서는 4열로 바꾸는 역할을 합니다. md:grid-rows-2는 2행으로 설정합니다.

첫 번째 박스: 다니엘 클리포드

<div class="relative p-10 rounded-xl text-white bg-purple-700 md:col-span-2">
  <img src="images/bg-pattern-quotation.svg" alt="" 
    class="absolute top-3 right-10 scale-125 md:top-7 md:right-24 md:scale-150">
  <div class="flex z-10 space-x-4">
    <img src="images/image-daniel.jpg" alt="" class="w-10 h-10 ring-2 ring-purple-300 rounded-full">
    <div class="text-sm">
      <h4 class="opacity-90">다니엘 클리포드</h4>
      <p class="opacity-50">인증된 졸업생</p>
    </div>
  </div>
  <p class="relative z-10 mt-6 text-xl">
    저는 코스 중반에 취업 제안을 받았고, 배운 과목들은 제가 합류한 회사에서도 최신 기술이었습니다.
  </p>
  <p class="mt-6 opacity-50 line-clamp-6">
    "저는 부트캠프에 참여하기 전까지 오랫동안 구급대원으로 일했습니다. 전환을 하고 싶었고, 이곳에서 좋은 경험을 했다는 이야기를 듣고 등록했습니다..."
  </p>
</div>

첫 번째 박스는 md:col-span-2를 사용하여 중간 크기 이상의 화면에서 두 열을 차지하도록 설정됩니다. absolute와 relative로 이미지 배치가 조정되고, line-clamp-6 플러그인은 텍스트를 6줄까지만 보여주고 나머지는 생략하도록 합니다.

두 번째 박스: 조나단 월터스

<div class="p-10 rounded-xl text-white bg-gray-700">
  <div class="flex space-x-4">
    <img src="images/image-jonathan.jpg" alt="" class="w-10 h-10 ring-2 ring-purple-300 rounded-full">
    <div class="text-sm">
      <h4 class="opacity-90">조나단 월터스</h4>
      <p class="opacity-50">인증된 졸업생</p>
    </div>
  </div>
  <p class="relative mt-6 text-xl">
    팀원들이 매우 지원을 잘해주었고, 계속 동기부여를 받을 수 있었습니다.
  </p>
  <p class="mt-6 opacity-50 line-clamp-6">
    "저는 거의 코딩 지식이 없는 상태로 시작했지만, 이제는 큰 회사에서 모바일 엔지니어로 일하고 있습니다."
  </p>
</div>

조나단 월터스의 박스는 기본적인 텍스트와 이미지로 구성되어 있으며, bg-gray-700 배경색을 사용합니다. 작은 화면에서도 하나의 열로 표시됩니다.

세 번째 박스: 키라 휘틀

<div class="p-10 rounded-xl bg-white text-gray-900 hidden md:block md:row-span-2">
  <div class="flex space-x-4">
    <img src="images/image-kira.jpg" alt="" class="w-10 h-10 ring-2 ring-purple-300 rounded-full">
    <div class="text-sm">
      <h4 class="opacity-90">키라 휘틀</h4>
      <p class="opacity-50">인증된 졸업생</p>
    </div>
  </div>
  <p class="relative mt-6 text-xl">
    인생을 바꾸는 경험이었습니다. 적극 추천합니다!
  </p>
  <p class="mt-6 opacity-50 line-clamp-6">
    "부트캠프에 참여하기 전에 저는 한 번도 코드를 작성해 본 적이 없었습니다..."
  </p>
</div>

이 박스는 md:row-span-2를 사용하여 중간 화면 이상에서 두 행을 차지하도록 설정됩니다. 작은 화면에서는 hidden 클래스로 숨겨집니다.

다섯 번째 박스: 패트릭 에이브럼스

<div class="p-10 rounded-xl bg-black text-white md:col-span-2">
  <div class="flex space-x-4">
    <img src="images/image-patrick.jpg" alt="" class="w-10 h-10 ring-2 ring-purple-300 rounded-full">
    <div class="text-sm">
      <h4 class="opacity-90">패트릭 에이브럼스</h4>
      <p class="opacity-50">인증된 졸업생</p>
    </div>
  </div>
  <p class="relative mt-6 text-xl">
    부트캠프를 수료한 TA들의 훌륭한 지원이 정말 놀라웠습니다.
  </p>
  <p class="mt-6 opacity-50 line-clamp-6">
    "진행 과정에서 매우 개인적인 관심을 받으며 성장할 수 있었습니다."
  </p>
</div>

이 박스는 중간 화면 이상에서 두 열을 차지하며 bg-black으로 배경색을 설정했습니다. md:col-span-2로 그리드에서 두 열을 차지하도록 설정되었습니다.

이처럼 Tailwind CSS의 그리드 시스템과 반응형 레이아웃을 활용해 화면 크기에 맞는 배치를 유연하게 조정할 수 있습니다. line-clamp 플러그인을 추가하여 텍스트를 줄이는 기능도 도입했습니다.

Line Clamp라는 플러인

ine Clamp라는 플러그인을 설치하여 텍스트를 잘라내는(truncate) 방법을 배울 것입니다. 이 플러그인은 긴 텍스트를 원하는 줄 수로 제한하여 표시할 수 있게 해줍니다. 예를 들어, 몇몇 후기 내용이 너무 길다면 이를 잘라내고 "더 보기" 버튼을 추가할 수도 있습니다. 이번에는 플러그인을 사용해 텍스트를 잘라내는 기본적인 예시를 보여드리겠습니다.

Tailwind CSS에는 공식 플러그인뿐만 아니라 서드파티 플러그인도 있고, 직접 플러그인을 작성할 수도 있습니다. 다만, 직접 작성하는 것은 이 강좌 범위를 벗어납니다. 여기서는 Line Clamp 플러그인을 사용할 것입니다.

플러그인 설치

먼저, Line Clamp 플러그인을 GitHub 리포지토리에서 가져와 설치할 것입니다. 이를 위해 NPM을 사용하여 설치해야 합니다. 플러그인을 설치하려면 터미널에서 NPM 명령어를 실행합니다.

npm install @tailwindcss/line-clamp --save-dev

만약 NPM 버전이 오래되었다면 업데이트가 필요할 수도 있습니다. 설치가 완료되면 package.json 파일에 해당 플러그인이 dev dependency로 추가된 것을 확인할 수 있습니다.

Tailwind 설정 파일에 플러그인 추가

이제 Tailwind 설정 파일(tailwind.config.js)로 가서 플러그인을 등록해야 합니다. 설정 파일의 플러그인 부분을 찾아 아래와 같이 작성합니다.

module.exports = {
  // 기존 Tailwind 설정들
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

이렇게 플러그인을 추가한 뒤 설정을 저장하고, 에러가 없는지 확인합니다. 만약 설치를 제대로 하지 않았다면 에러 메시지가 나타날 것입니다.

플러그인 사용 방법

이제 원하는 곳에서 Line Clamp 플러그인을 사용할 수 있습니다. 예를 들어, 첫 번째 카드의 텍스트가 길다고 가정해보겠습니다. 텍스트가 길어지면 아래처럼 수정할 수 있습니다.

<p class="line-clamp-5">
  긴 텍스트가 이곳에 들어갑니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Pellentesque vehicula ex ut felis interdum, ut sodales ipsum tempor. Suspendisse nec urna id urna.
</p>

여기서 line-clamp-5는 텍스트를 5줄까지만 표시하고 나머지는 생략한다는 의미입니다. 플러그인은 line-clamp-1부터 line-clamp-6까지 다양한 줄 수를 선택할 수 있습니다.

예를 들어, line-clamp-1을 사용하면 한 줄만 보이게 되고, line-clamp-2를 사용하면 두 줄, line-clamp-5를 사용하면 다섯 줄까지 표시됩니다. 이를 통해 적절한 줄 수를 선택해 텍스트를 잘라낼 수 있습니다.

다른 요소에 적용

두 번째 카드의 경우에도 텍스트가 너무 길다면 동일한 방식으로 적용할 수 있습니다. 예를 들어, 조나단의 카드에 긴 텍스트가 추가되었을 때:

<p class="line-clamp-5">
  조나단의 긴 텍스트. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius 
  venenatis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>