포트폴리오 만들기
설정
먼저 바탕화면에 빈 디렉토리를 만들어주고
vs code로 들어가서
설정부터 해줍니다!
윈도우는 Tab + , 키를 입력해 설정으로 들어가준 후
작업 영역에 들어가
default format을 Prettier설정
format on save를 체크 표시
tab size는 2로 표시 해줍시다.
추가적으로 .prettierrc의 파일을 생성 후
{
"semi": true, // 세미콜론을 항상 추가
"singleQuote": true, // 문자열에 홑따옴표 사용
"tabWidth": 2, // 탭 너비를 2 스페이스로 설정
"useTabs": false, // 탭 대신 스페이스 사용
"trailingComma": "es5", // ES5에서 유효한 곳에만 후행 콤마 추가
"printWidth": 80, // 한 줄에 80자까지 작성
"bracketSpacing": true, // 객체 리터럴에서 중괄호와 속성 사이에 공백 추가
"arrowParens": "always", // 화살표 함수에서 괄호를 항상 사용
"endOfLine": "lf" // 줄바꿈 스타일을 'lf'로 설정
}를 추가해줍니다.
또한 Tailwind CSS IntelliSense가 잘 작동할 수 있도록
루트 디렉터리에 tailwind.config.js 파일을 생성해줍니다.
그렇게 되면 유틸리티 클래스를 자동완성 할 수 있도록 IntelliSense가 잘 작동되는 걸 확인할 수 있습니다.
UI 구성
index.html을 만들고
UI는 크게 헤더, 메인에는(홈, 소개, 기술, 프로젝트, 연락처), 푸터로 구성하려고 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>개발자 포트폴리오</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="bg-gray-200 w-full h-20"></header>
<main class="bg-gray-300 container max-w-4xl mx-auto px-6 py-12">
<!-- Home Section -->
<section class="bg-red-200 h-60"></section>
<!-- About Section -->
<section class="bg-yellow-200 h-60">
<h2 class="text-3xl font-bold mb-6">소개</h2>
</section>
<section class="bg-blue-200 h-60">
<h2 class="text-3xl font-bold mb-6">기술</h2>
</section>
<section class="bg-cyan-200 h-60">
<h2 class="text-3xl font-bold mb-6">프로젝트</h2>
</section>
<section class="bg-green-200 h-60">
<h2 class="text-3xl font-bold mb-6">연락처처</h2>
</section>
</main>
<footer class="bg-gray-400 w-full h-20"></footer>
</body>
</html>
현재 css는 구성 요소를 잘 표현하기 위해서 랜덤으로 선택했습니다.
Header 만들기
Header
<!-- 헤더 -->
<header class="sticky top-0 bg-opacity-90 backdrop-blur-lg">
...
</header>-
sticky
이 클래스는 HTML 요소를 "스티키" 위치로 설정합니다.
스티키 위치란, 스크롤을 내리더라도 요소가 화면에 고정된 채로 유지되다가, 특정 부모 요소의 경계를 넘어가면 더 이상 고정되지 않는 동작을 의미합니다.
쉽게 말해, "스크롤 중에도 고정된 느낌을 줄 수 있는 위치 설정"입니다. -
top-0
요소의 상단(Top) 위치를 기준으로 0픽셀 간격을 의미합니다.
즉, 요소가 부모 컨테이너나 페이지의 최상단에 딱 붙도록 설정합니다.
쉽게 말해, "요소를 화면 맨 위로 딱 붙게 만든다"라고 이해하면 됩니다. -
bg-opacity-90
요소의 배경색의 불투명도를 90%로 설정합니다.
배경이 살짝 투명해져서 뒷배경과 조화를 이룹니다. -
backdrop-blur-lg
요소 뒤에 있는 배경에 큰 정도의 블러 효과를 적용합니다.
이로 인해 배경이 흐릿하게 보이며, 시각적으로 부드러운 느낌을 줍니다.
Logo
<!-- 로고 -->
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">KMW</h1>
<p class="text-sm text-gray-500">프론트 개발자</p>
</div>-
flex
이 클래스는 컨테이너를 플렉스박스로 설정합니다.
자식 요소들이 가로 방향(기본 축)으로 배치되며, 플렉스 레이아웃의 동작을 따릅니다. -
items-center
자식 요소들을 수직 방향(교차 축)으로 가운데 정렬합니다.
쉽게 말해, "요소들이 세로로 균형 있게 배치되도록 설정"합니다. -
space-x-4
가로 방향(주 축)에서 자식 요소 간의 간격을 설정합니다.
여기서4는 Tailwind의 간격 스케일로, 1단위가 0.25rem이며space-x-4는 1rem의 간격을 의미합니다.
Menu
<!-- 메뉴 -->
<div class="flex items-center gap-x-6">
<a href="#home" class="hover:text-blue-500 transition-colors">홈</a>
<a href="#about" class="hover:text-blue-500 transition-colors"
>소개</a
>
<a href="#skills" class="hover:text-blue-500 transition-colors"
>기술</a
>
<a href="#projects" class="hover:text-blue-500 transition-colors"
>프로젝트</a
>
<a href="#contact" class="hover:text-blue-500 transition-colors"
>연락처</a
>
</div>-
flex
이 클래스는 컨테이너를 플렉스박스로 설정합니다.
자식 요소들이 가로 방향(기본 축)으로 배치되며, 플렉스 레이아웃의 동작을 따릅니다. -
items-center
자식 요소들을 수직 방향(교차 축)으로 가운데 정렬합니다.
쉽게 말해, "요소들이 세로로 균형 있게 배치되도록 설정"합니다. -
gap-x-6
자식 요소 간의 가로 간격을 설정합니다.
여기서6은 Tailwind의 간격 스케일로, 1단위가 0.25rem이며gap-x-6은 1.5rem의 간격을 의미합니다. -
hover:text-blue-500
사용자가 요소 위에 커서를 올렸을 때, 텍스트 색상이 파란색 계열의500단계로 변경됩니다. -
transition-colors
요소의 색상 변화를 부드럽게 전환하도록 설정합니다.
텍스트 색상 변경 시 애니메이션 효과를 적용하여 자연스러운 사용자 경험을 제공합니다.
Dark Mode
먼저 다크모드 버튼을 위해서 Font Awesom
페이지에 들어가 링크를 복사해준 뒤
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>개발자 포트폴리오</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>link로 추가해 줍니다.
<!-- 다크모드 -->
<div class="flex items-center gap-x-6">
<button
class="p-2 w-10 h-10 rounded-full bg-gray-200 focus:outline-none focus:ring focus:ring-blue-500">
<i class="fas fa-moon"></i>
</button>
</div>-
p-2
요소의 모든 면에 0.5rem(8px)의 패딩을 설정합니다.
이는 버튼의 내부 여백을 균형 있게 만들어줍니다. -
w-10 h-10
버튼의 너비와 높이를 각각 2.5rem(40px)로 설정합니다.
버튼이 정사각형 형태로 나타나도록 만듭니다. -
rounded-full
요소의 모서리를 완전히 둥글게 설정합니다.
이로 인해 버튼이 원형으로 표시됩니다. -
focus:outline-none
포커스 상태에서 기본으로 적용되는 테두리 스타일을 제거합니다.
사용자 정의 포커스 스타일만 적용되도록 설정합니다. -
focus:ring
요소에 포커스가 발생했을 때 외곽선 효과(링 스타일)를 추가합니다.
이로 인해 버튼이 클릭 가능하거나 활성화되었음을 시각적으로 표시합니다. -
focus:ring-blue-500
포커스 상태에서 추가된 외곽선의 색상을 파란색 계열의500단계로 설정합니다.
시각적인 강조 효과를 제공합니다.
