☑️홈 대표로고 추가 및 간격조정
대표로고가 없어서, 임시로 이미지 하나 만들어서 로고 자리에 img 추가해주었다. 그런데 문제가 img 아래에 홈이름이 출력되어서 img 오른쪽에 글자가 출력되도록 수정해주었다.
수정한 방법은 태그와 텍스트를 가로로 정렬하기위해 Flexbox를 사용했다.
<div className="flex justify-center space-x-4 h-14 items-center lg:justify-start">
<a
href="/"
className="flex items-center text-2xl font-bold text-primary-black hover:text-primary-pink/80 transition-colors"
>
<img
className="w-10 h-10 bg-white mr-2" // 이미지 크기와 오른쪽 여백 설정
src="/images/logo_green.png"
alt="로고"
/>
뷰티허브
</a>
</div>-
className="flex items-center"를 추가하여 이미지와 텍스트를 가로로 정렬.
items-center로 세로 중앙 정렬.
이미지 크기 조정: -
className="w-10 h-10"으로 이미지 크기를 설정.
mr-2로 이미지와 텍스트 사이에 간격 추가.
☑️border 수정하기
Tailwind CSS에서는 위아래(border-top, border-bottom)만 남기기 위해서, border-t와 border-b 클래스를 사용하면 된다.
☑️text-primary-black 설정은 어디서?
className에 text-primary-black 를 어디서 설정해야 불러와서 쓸 수 있는지 찾아보니, 이 클래스는 Tailwind CSS의 설정 파일인 tailwind.config.js에서 정의해야 사용할 수 있다고 한다. = 프로젝트 루트 디렉토리 임.
- 설정이 완료되면, text-primary-black 클래스를 프로젝트 전역에서 사용할 수 있다는 것이 장점이다.
module.exports = {
theme: {
extend: {
colors: {
'primary-black': '#000000', // 원하는 색상 코드로 설정
'primary-pink': '#FF007F', // 다른 사용자 정의 색상 예시
},
},
},
plugins: [],
};☑️main 에 간격주는 방법
(보라색으로 표시한 부분만큼 간격이 있다)
디자인 수정을 위해 참고한 뷰티사이트는 총3군데 강남언니,마메드네,바비톡이다. 모두 웹앱 형식이었다. 특징 중 하나가 화면 양옆이 꽉차있지 않고 어느정도 여유가 있다는 점이었다. 처음에는 간격을 일일이 다 주려고 했는데, 개발자모드로 확인해보니 양옆의 간격이 일정했다.
모든 페이지에서 동일한 내용이 적용되도록 하는 방법을 찾아보았다. layout.js 파일이 글로벌 레이아웃을 담당하고 있고, 이 파일은 Next.js의 Root Layout으로, 모든 페이지에 공통적으로 적용되기 때문에, 여기에 양옆의 간격을 추가하는 코드를 작성하면 된다.
px-*는 Tailwind CSS에서 양옆의 패딩(padding-left와 padding-right)을 설정하는 클래스이다.
이 코드는 반응형 디자인을 위해 화면 크기에 따라 다른 패딩 값을 적용하고 있다:
데스크톱: 32px
태블릿: 24px
기본(모바일): 16px
desktop:px-[32px]:
데스크톱 화면 크기에서 양옆의 패딩(padding-x)을 32px로 설정.
tablet:px-[24px]:
태블릿 화면 크기에서 양옆의 패딩(padding-x)을 24px로 설정.
px-[16px]:
기본 상태(모바일 등)에서 양옆의 패딩(padding-x)을 16px로 설정.
(보라색으로 표시한 부분간격을 별도로 조절함)
❗layout.js에서 main 태그에 적용된 desktop:px-[32px] tablet:px-[24px] px-[16px] 등의 패딩 스타일이 모든 페이지에 기본적으로 적용되고 있다. 그런데 특정 섹션(예: 고객 후기 섹션)에서 이 패딩을 무시하고 틈 없이 적용하려면, 해당 섹션에 마이너스 마진을 사용하거나 별도의 스타일링을 적용하면 된다. 마이너스 마진을 사용하는것이 간단하다.
- 마이너스 마진 쓰는 법 : -mx-[16px]
<Section
bgColor="bg-gray-50"
className="-mx-[16px] tablet:-mx-[24px] desktop:-mx-[32px]"
>☑️global.css 에서 글씨체 추가, 수정하기
- google font 에서 font 를 import 형식으로 복사해서 global.css 최상단에 붙여넣는다
@import url("https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300..800&display=swap");- body - font-family: "42dot Sans" 처럼 복사해온 폰트 이름을 추가해준다.
body {
background: var(--background);
color: #333333; /* 밝은 검정색으로 변경 */
font-family: "42dot Sans", "Sunflower", "Dongle", sans-serif;
}