Tailwind CSS - 포트폴리오를 만들어보자 (UI Main부터 Fotter section까지)

김명원·2025년 1월 23일

learnTailwindCSS

목록 보기
8/10

포트폴리오 만들기

UI Main

Home

Home의 UI는 좌측에 프로필 사진과 우측에는 간단한 소개가 있도록 만드려고 합니다!

<!-- Home Section -->
<section class="flex justify-between items-center mb-12">
  ...
</section>

profile

<!-- 이미지지 -->
<div id="home" class="shrink-0 mr-10">
  <img class="w-56 h-60 rounded-full border-2 object-cover" src="img/profile.jpg" alt="프로필" />
</div>

  • shrink-0
    요소의 축소 비율을 0으로 설정합니다.
    플렉스 컨테이너에서 요소가 축소되지 않고 고정된 크기를 유지하도록 만듭니다.

  • mr-10
    요소의 오른쪽 외부 여백을 2.5rem(40px)로 설정합니다.
    다른 요소와의 가로 간격을 확보합니다.

  • rounded-full
    이미지의 모서리를 완전히 둥글게 설정합니다.
    이미지가 원형으로 표시되도록 만듭니다.

  • border-2
    테두리 두께를 2px로 설정합니다.
    이미지에 테두리를 추가해 강조합니다.

  • object-cover
    이미지를 요소의 크기에 맞게 자르거나 확대하여 비율을 유지하면서 가득 채웁니다.
    이미지가 왜곡되지 않고 적절하게 표시됩니다.

short introduce

<!-- 짧은 소개 -->
<div class="text-right">
  <h1 class="text-4xl font-bold mb-6">김**</h1>
  <p class="text-xl mb-4">성장을 멈추지 않는 개발자</p>
  <p class="text-gray-600">
     ~소개 내용~
  </p>
</div>

  • text-right
    요소 내 텍스트를 오른쪽으로 정렬합니다.
    모든 자식 텍스트 요소가 오른쪽에 맞춰지도록 설정됩니다.

  • mb-6
    요소의 아래쪽 외부 여백을 1.5rem(24px)로 설정합니다.
    다음 요소와의 간격을 확보합니다.

  • mb-4
    요소의 아래쪽 외부 여백을 1rem(16px)로 설정합니다.
    다음 요소와의 간격을 확보합니다.

About

소개에서는 좌측에 교육 및 활동과 자격증 칸으로 나누려고 합니다.

<h2 class="text-3xl font-bold mb-6">소개</h2>
<div class="grid grid-cols-2 gap-6">
	...
</div>

  • mb-6
    요소의 아래쪽 외부 여백을 1.5rem(24px)로 설정합니다.
    다음 요소와의 간격을 확보합니다.

  • grid
    요소를 CSS 그리드 컨테이너로 설정합니다.
    자식 요소들이 그리드 레이아웃 규칙에 따라 배치됩니다.

  • grid-cols-2
    그리드의 열을 2개로 설정합니다.
    자식 요소들이 두 개의 열로 균등하게 배치됩니다.

  • gap-6
    그리드 항목 간의 간격을 1.5rem(24px)로 설정합니다.
    행과 열 사이에 적절한 간격을 만들어 줍니다.

교육 및 활동

<article class="bg-gray-100 shadow-md rounded-lg p-6 hover:scale-105 transition-transform duration-300">
  <h3 class="text-xl font-semibold mb-4">🧑‍🎓 교육 및 활동</h3>
  <ul class="text-gray-800 leading-relaxed">
    <li>🏫 내용</li>
    <li>🏫 내용</li>
    <li>📖 내용</li>
    <li>📖 내용</li>
    <li>📖 내용</li>
  </ul>
</article>

  • shadow-md
    요소에 중간 정도의 그림자 효과를 추가합니다.
    요소가 살짝 떠 있는 듯한 입체감을 제공합니다.

  • rounded-lg
    요소의 모서리를 부드럽게 둥글게 설정합니다.
    lg 크기는 적당히 둥근 느낌을 줍니다.

  • p-6
    요소의 내부 여백을 1.5rem(24px)로 설정합니다.
    콘텐츠가 요소의 가장자리와 적절한 간격을 가지도록 합니다.

  • hover:scale-105
    사용자가 요소 위에 커서를 올렸을 때, 요소의 크기를 5% 확대합니다.
    시각적으로 요소가 강조되는 효과를 제공합니다.

  • transition-transform
    크기 변화(확대/축소)와 같은 변환 애니메이션을 부드럽게 전환하도록 설정합니다.

  • duration-300
    변환 애니메이션의 지속 시간을 300밀리초로 설정합니다.
    짧고 자연스러운 효과를 제공합니다.

  • leading-relaxed
    텍스트 줄 간격을 relaxed로 설정합니다.
    줄 간격이 약간 넓어져 가독성이 향상됩니다.

자격증

<article class="bg-gray-100 shadow-md rounded-lg p-6 hover:scale-105 transition-transform duration-300">
  <h3 class="text-xl font-semibold mb-4">🪪 자격증</h3>
  <ul class="text-gray-800 leading-relaxed">
    <li>🛠️ 2025 정보처리기사 준비중</li>
    <li>🛠️ 2025 Sqld 준비중</li>
  </ul>
</article>

Skills

기술 섹션에서는 스킬 목록에 대한 그리드 섹션을 만드려고 합니다.

<h2 class="text-3xl font-bold mb-6">기술</h2>
<div class="grid grid-cols-3 gap-4">
...
</div>

  • grid
    요소를 CSS 그리드 컨테이너로 설정합니다.
    자식 요소들이 그리드 레이아웃 규칙에 따라 배치됩니다.

  • grid-cols-3
    그리드의 열을 3개로 설정합니다.
    자식 요소들이 세 개의 열로 균등하게 배치됩니다.

  • gap-4
    그리드 항목 간의 간격을 1rem(16px)으로 설정합니다.
    행과 열 사이에 적절한 간격을 만들어 줍니다.

아이콘

기술의 사진을 가져오기 위해서는
아이콘 찾기 여기서 찾으면 됩니다!

<div class="flex flex-col items-center bg-gray-100 shadow-md rounded-lg p-4 hover:scale-105 transition-transform duration-300" >
   <i class="fa-brands fa-python text-4xl text-blue-400"></i>
   <h3 class="text-lg font-semibold">Python</h3>
 </div>

...

  • flex flex-col
    요소를 플렉스박스로 설정하고, 자식 요소를 세로 방향(열 방향)으로 배치합니다.
    쉽게 말해, "자식 요소들이 위에서 아래로 쌓이도록 정렬"됩니다.

  • items-center
    자식 요소들을 수직 방향(교차 축)으로 가운데 정렬합니다.
    요소들이 세로로 균형 있게 배치됩니다.

  • shadow-md
    요소에 중간 정도의 그림자 효과를 추가하여 살짝 떠 있는 입체감을 제공합니다.

  • rounded-lg
    요소의 모서리를 부드럽게 둥글게 설정합니다.
    lg 크기는 적당히 둥근 느낌을 줍니다.

  • p-4
    요소의 내부 여백을 1rem(16px)으로 설정합니다.
    콘텐츠가 요소 가장자리와 적절한 간격을 가지도록 만듭니다.

  • hover:scale-105
    사용자가 요소 위에 커서를 올렸을 때, 요소의 크기를 5% 확대하여 강조 효과를 줍니다.

  • transition-transform
    크기 변화(확대/축소)와 같은 변환 애니메이션을 부드럽게 전환하도록 설정합니다.

  • duration-300
    변환 애니메이션의 지속 시간을 300밀리초로 설정하여 자연스러운 전환 효과를 제공합니다.

Projects

프로젝트 영역 안에서는 이미지, 타이틀, 기술 스택, 그리고 버튼영역으로 구성하려고 합니다.

<h2 class="text-3xl font-bold mb-6">프로젝트</h2>
<div class="grid grid-cols-2 gap-6">
  <article class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:scale-105 transition-transform duration-300">
    ...
  </article>
</div>

  • grid
    요소를 CSS 그리드 컨테이너로 설정합니다.
    자식 요소들이 그리드 레이아웃 규칙에 따라 배치됩니다.

  • grid-cols-2
    그리드의 열을 2개로 설정합니다.
    자식 요소들이 두 개의 열로 균등하게 배치됩니다.

  • gap-6
    그리드 항목 간의 간격을 1.5rem(24px)으로 설정합니다.
    행과 열 사이에 적절한 간격을 만들어 줍니다.

  • rounded-lg
    요소의 모서리를 부드럽게 둥글게 설정합니다.
    lg 크기는 적당히 둥근 느낌을 줍니다.

  • overflow-hidden
    요소의 내용이 박스 크기를 초과할 경우, 초과된 내용이 보이지 않도록 설정합니다.
    이는 깔끔한 디자인을 유지하는 데 유용합니다.

  • shadow-lg
    요소에 큰 정도의 그림자 효과를 추가하여 더 강한 입체감을 제공합니다.

  • hover:scale-105
    사용자가 요소 위에 커서를 올렸을 때, 요소의 크기를 5% 확대하여 강조 효과를 줍니다.

  • transition-transform
    크기 변화(확대/축소)와 같은 변환 애니메이션을 부드럽게 전환하도록 설정합니다.

  • duration-300
    변환 애니메이션의 지속 시간을 300밀리초로 설정하여 자연스러운 전환 효과를 제공합니다.

이미지

<!-- 이미지 -->
<img class="w-full h-48 object-cover" src="img/project1.png" alt="이미지"
/>

  • w-full
    이미지를 부모 요소의 너비에 맞게 100%로 설정합니다.
    이미지가 부모 요소의 너비를 완전히 채우도록 만듭니다.

  • h-48
    이미지의 높이를 12rem(192px)로 설정합니다.
    고정된 높이로 이미지가 일관되게 보이도록 합니다.

  • object-cover
    이미지를 요소의 크기에 맞게 자르거나 확대하여 비율을 유지하면서 가득 채웁니다.
    이미지가 왜곡되지 않고 적절하게 표시됩니다.

정보 영역 (프로젝트 명 & 기술스택 & 버튼 )

<!-- 정보 영역 -->
<div class="p-6">
  <!-- 프로젝트 명 -->
  <h3 class="text-xl font-semibold mb-4 text-gray-800">
    Lean Canvas
  </h3>

  <!-- 기술스택 -->
  <div class="space-x-2 mb-4">
    <span class="bg-gray-200 text-xs px-2 py-0.5 rounded-md text-gray-700 border border-gray-300">
      React
    </span>
    <span class="bg-gray-200 text-xs px-2 py-0.5 rounded-md text-gray-700 border border-gray-300">
      JavaScript
    </span>
    <span class="bg-gray-200 text-xs px-2 py-0.5 rounded-md text-gray-700 border border-gray-300">
      Tailwind-CSS
    </span>
    <span class="bg-gray-200 text-xs px-2 py-0.5 rounded-md text-gray-700 border border-gray-300">
      Vercel
    </span>
  </div>

  <!-- github 버튼 -->
  <div class="flex justify-start space-x-2">
    <a href="깃허브 주소" class="text-sm bg-gray-800 text-white px-3 py-1 rounded-md">
      Github
    </a>
    <a href="배포 주소" class="text-sm bg-blue-600 text-white px-3 py-1 rounded-md">
      라이브데모
    </a>
  </div>
</div>

  • p-6
    요소의 내부 여백을 1.5rem(24px)으로 설정하여 콘텐츠와 가장자리 간의 간격을 만듭니다.

  • space-x-2
    자식 요소 간의 가로 간격을 0.5rem(8px)으로 설정합니다.
    버튼 또는 태그들 간의 간격을 확보합니다.

  • rounded-md
    요소의 모서리를 적당히 부드럽게 설정합니다.
    깔끔하고 세련된 디자인을 제공합니다.

  • border border-gray-300
    요소에 1px 두께의 테두리를 추가하고, 색상을 회색 계열의 300단계로 설정합니다.
    테두리로 인해 태그가 더욱 구분됩니다.

  • flex
    자식 요소를 가로 방향으로 배치할 수 있도록 컨테이너를 플렉스박스로 설정합니다.

  • justify-start
    플렉스 컨테이너 내 자식 요소들을 왼쪽 정렬합니다.

  • text-sm
    버튼의 글자 크기를 작게 설정하여 텍스트가 버튼 안에 잘 맞도록 조정합니다.

연락처

연락처 섹션에는 좌측에는 이메일을 보낼 수 있는 폼과 우측에는 sns링크를 업로드 하려고 합니다.

<h2 class="text-3xl font-bold mb-6">연락처</h2>
<div class="grid grid-cols-2 gap-8">
  ...
</div>

  • grid
    요소를 CSS 그리드 컨테이너로 설정하여 자식 요소들을 그리드 레이아웃에 따라 배치합니다.

  • grid-cols-2
    그리드의 열을 2개로 설정합니다.
    자식 요소들이 두 개의 열로 균등하게 배치됩니다.

  • gap-8
    그리드 항목 간의 간격을 2rem(32px)으로 설정합니다.
    행과 열 사이에 넓은 간격을 만들어 콘텐츠를 분리하고 가독성을 높입니다.

이메일 보내기

<!-- 이메일 -->
<form id="contactForm" class="space-y-4">
  <div>
    <label for="name" class="block mb-1 font-medium">
      이름
    </label>
    <input type="text" name="name" id="name" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500"/>
  </div>
  <div>
    <label for="email" class="block mb-1 font-medium">
      이메일
    </label>
    <input type="text" name="email" id="email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500"/>
  </div>
  <div>
    <label for="name" class="block mb-1 font-medium">
      메시지
    </label>
    <textarea type="text" name="name" id="name" required class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500">
    </textarea>
  </div>
  <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-500 transition-colors">
     이메일 보내기기
  </button>
</form>

  • space-y-4
    자식 요소 간의 세로 간격을 1rem(16px)으로 설정합니다.
    각 입력 필드와 버튼 사이에 간격을 만듭니다.

  • block
    요소를 블록 레벨로 설정하여, 레이블이 입력 필드 위에 위치하도록 만듭니다.

  • mb-1
    레이블의 아래쪽 외부 여백을 0.25rem(4px)로 설정하여 입력 필드와 간격을 만듭니다.

  • w-full
    입력 필드와 텍스트 영역이 부모 요소의 너비를 모두 차지하도록 설정합니다.

  • px-4 py-2
    입력 필드의 좌우 여백을 1rem(16px), 위아래 여백을 0.5rem(8px)로 설정하여 내부 여백을 확보합니다.

  • border
    입력 필드에 1px 두께의 기본 테두리를 추가합니다.
    테두리를 통해 입력 영역이 시각적으로 구분됩니다.

  • rounded-md
    입력 필드의 모서리를 부드럽게 설정하여 깔끔한 디자인을 제공합니다.

  • focus:outline-none
    포커스 상태에서 기본 테두리 스타일을 제거하여 사용자 정의 스타일만 적용되도록 만듭니다.

  • focus:ring
    포커스 상태에서 외곽선 효과(링 스타일)를 추가하여 입력 필드가 활성화된 상태를 강조합니다.

  • focus:ring-blue-500
    포커스 상태에서 추가된 외곽선의 색상을 파란색 계열의 500단계로 설정하여 시각적인 강조를 제공합니다.

  • hover:bg-blue-500
    사용자가 버튼 위에 커서를 올렸을 때 버튼 배경색을 파란색 계열의 500단계로 변경하여 강조 효과를 제공합니다.

  • transition-colors
    버튼의 배경색 변화가 부드럽게 전환되도록 설정합니다.

sns 링크

<div class="flex flex-col items-center justify-center gap-y-4">
  <a
    href="깃허브 주소"
    target="_blank"
    class="felx items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
  >
    <i class="fa-brands fa-github"></i>
    <span>Github</span>
  </a>
  <a
    href="블로그 주소"
    target="_blank"
    class="felx items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
  >
    <i class="fa-brands fa-blogger-b"></i>
    <span>Velog</span>
  </a>
  <a
    href="이메일주소"
    target="_blank"
    class="felx items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
  >
    <i class="fa-regular fa-envelope"></i>
    <span>이메일주소</span>
  </a>
</div>

  • flex flex-col
    요소를 플렉스박스로 설정하고, 자식 요소를 세로 방향(열 방향)으로 배치합니다.
    쉽게 말해, "자식 요소들이 위에서 아래로 쌓이도록 정렬"됩니다.

  • items-center
    자식 요소들을 수직 방향(교차 축)으로 가운데 정렬합니다.
    요소들이 세로로 균형 있게 배치됩니다.

  • justify-center
    플렉스 컨테이너 안에서 자식 요소를 수직 축 기준으로 가운데 정렬합니다.

  • gap-y-4
    자식 요소 간의 세로 간격을 1rem(16px)으로 설정합니다.
    각 항목 간의 적절한 간격을 만듭니다.

  • space-x-2
    플렉스 항목 안에서 텍스트와 아이콘 간의 가로 간격을 0.5rem(8px)으로 설정합니다.

  • hover:text-blue-500
    사용자가 요소 위에 커서를 올렸을 때 텍스트 색상을 파란색 계열의 500단계로 변경합니다.

  • transition-colors
    텍스트 색상 변화가 부드럽게 전환되도록 설정합니다.

<footer class="bg-gray-100 py-6">
  <div class="container max-w-4xl mx-auto px-6 text-center">
    <p>&copy; 2025 이름. All rights reserved.</p>
  </div>
</footer>

  • py-6
    요소의 위아래 패딩을 1.5rem(24px)으로 설정합니다.
    콘텐츠가 충분히 여유롭게 배치되도록 만듭니다.

  • container
    Tailwind에서 제공하는 유틸리티 클래스로, 컨텐츠의 너비를 제한하여 화면 크기에 따라 적절하게 중앙에 정렬되도록 설정합니다.

  • max-w-4xl
    컨테이너의 최대 너비를 4xl(896px)로 제한합니다.
    콘텐츠가 너무 넓게 퍼지지 않도록 조정합니다.

  • mx-auto
    요소를 수평 방향으로 가운데 정렬합니다.
    자동 여백을 적용하여 화면 중앙에 위치시킵니다.

  • px-6
    요소의 좌우 패딩을 1.5rem(24px)으로 설정합니다.
    콘텐츠가 양쪽에서 적절한 여백을 가지도록 만듭니다.

  • text-center
    텍스트를 가운데 정렬합니다.
    모든 텍스트 콘텐츠가 중앙에 정렬됩니다.

이렇게 모든 섹션의 스타일을 적용해 보았습니다!

profile
김명원
개발자가 되고 싶은 정치학도생의 기술 블로그
이전 포스트

Tailwind CSS - 포트폴리오를 만들어보자 (설정부터 UI 계획 후 Header까지)

다음 포스트

Tailwind CSS - 포트폴리오를 만들어보자 (다크모드 스타일링부터 기능구현까지)

0개의 댓글