[Next.js] Page Router - UI 구현하기

백엔드가 없는데 데이터가 필요할 때

데이터 리스트

src/mock 디렉터리를 생성한 뒤 json 파일에 임시 데이터를 생성한다.

books.json

[
  {
    "id": 1,
    "title": "코딩 마법사",
    "subTitle": "초보자를 위한 프로그래밍 입문",
    "description": "이 책은 코딩을 처음 접하는 사람들을 위한 쉬운 가이드입니다. 기본 개념부터 실전 예제까지 단계별로 배울 수 있습니다.",
    "author": "김코더",
    "publisher": "코드북스",
    "coverImgUrl": "https://example.com/image1.jpg"
  },
  {
    "id": 2,
    "title": "데이터의 비밀",
    "subTitle": "빅데이터 시대를 살아가는 법",
    "description": "데이터의 중요성과 활용 방법을 알기 쉽게 설명한 책입니다. 데이터를 효과적으로 분석하고 활용하는 방법을 배울 수 있습니다.",
    "author": "박데이터",
    "publisher": "지식나무",
    "coverImgUrl": "https://example.com/image2.jpg"
  },
  {
    "id": 3,
    "title": "알고리즘 탐험",
    "subTitle": "문제 해결을 위한 알고리즘의 세계",
    "description": "알고리즘의 기본 개념부터 응용까지 다루며, 다양한 예제와 함께 문제 해결 능력을 키울 수 있도록 도와줍니다.",
    "author": "이알고",
    "publisher": "프로그래밍월드",
    "coverImgUrl": "https://example.com/image3.jpg"
  }
]

데이터 한 개

작업중인 .tsx파일 내부에 임시로 mockData 객체를 만들어서 사용한다.

const mockData = {
  id: 1,
  title: "책 제목",
  subTitle: "엄청나게 대단한 베스트셀러 책",
  description: "책 설명입니다",
  author: "김작가",
  publisher: "책나무트리",
  coverImgUrl:
    "https://url.jpg",
};

export default function Page() {
  const { id, title, subTitle, description, author, publisher, coverImgUrl } =
    mockData;

  return (
    <div>
      ...
    </div>
  );
}

---

CSS

CSS 속성

✨ display

요소가 화면에서 어떻게 배치될지 결정

block : 블록 요소(한 줄 전체 차지)
inline : 인라인 요소(콘텐츠 크기만큼 차지)
inline-block : 인라인 요소처럼 배치되지만 크기 조절 가능
flex : 플렉스 컨테이너로 변환 (자식 요소 정렬 가능)
grid : CSS 그리드 시스템 사용 가능
none : 요소를 화면에서 숨김 (공간도 차지하지 않음)

✨ position

요소의 위치를 지정하는 방법을 결정

static : 기본값, 문서 흐름에 따라 배치됨
relative : 원래 위치를 기준으로 이동 가능
absolute : 부모 중 position: relative를 가진 요소를 기준으로 위치 지정
fixed : 뷰포트를 기준으로 고정 (스크롤해도 이동하지 않음)
sticky : 특정 스크롤 위치에서 고정됨 (스크롤이 일정 지점까지 내려오면 fixed처럼 동작)

✨ 여백

margin : 요소의 바깥쪽 여백
padding : 요소 안쪽 여백
gap : flex, grid 컨테이너에서 자식 요소 간 간격

✨ 높이/너비

height : 요소의 높이를 지정
max-height : 최대 높이를 지정 (내용이 넘칠 경우 제한)
width : 요소의 너비 지정
min-width : 요소의 최소 너비 지정

✨ background

background-position : 배경 이미지의 위치 (center, top left, 50% 50% ..)
background-repeat : 배경 이미지 반복 여부 (repeat, no-repeat, repeat-x, repeat-y ..)
background-size : 배경 이미지 크기 (cover, contain, 100px 200px, auto ..)

가상 요소 (Pseudo-elements)

✨ ::before

요소의 앞쪽(내용이 시작되기 전)에 가상 콘텐츠 추가

✨ ::after

요소의 뒤쪽(내용이 끝난 후 - 닫는 태그 이후)에 가상 콘텐츠 추가

✨ ::first-letter

첫 번째 문자(첫 글자)에 스타일 적용

✨ ::first-line

첫 번째 줄에 스타일 적용

✨ ::selection

사용자가 텍스트를 드래그하여 선택했을 때 스타일을 지정

✨ ::placeholder

<input> 또는 <textarea>의 placeholder의 스타일을 지정

✨ ::marker

목록 요소(<ul>, <ol>)의 불릿(●, ○) 또는 번호(1, 2, 3)에 스타일을 적용

✨ ::backdrop

<dialog> 요소(모달 창)의 배경 스타일

절대 단위

화면 크기와 관계없이 고정된 크기를 가지는 단위

단위	설명	1인치(1in) 기준
px	픽셀 (화면의 한 점)	화면 해상도에 따라 다름
cm	센티미터	1in = 2.54cm
mm	밀리미터	1cm = 10mm
in	인치	1in = 2.54cm
pt	포인트 (인쇄 단위)	1pt = 1/72in
pc	파이카 (인쇄 단위)	1pc = 12pt

절대 단위는 인쇄용 스타일에서 주로 사용되며, 웹에서는 px이 가장 많이 사용된다.

상대 단위

부모 요소 또는 뷰포트 크기에 따라 유동적으로 크기가 변하는 단위

✅ 글꼴 기반 단위

단위	설명
em	부모 요소의 글꼴 크기를 기준으로 비율 지정 (ex. 2em → 부모 크기의 2배)
rem	루트 요소 (html)의 글꼴 크기를 기준으로 비율 지정 (ex. 1rem → 기본 font-size 크기)
ex	현재 글꼴의 x-height (소문자 x의 높이)
ch	현재 글꼴의 숫자 0의 너비

rem은 전체 레이아웃에서 일관된 크기를 유지하기 좋아서 추천된다.

html { font-size: 16px; }
p { font-size: 2rem; } /* 16px × 2 = 32px */

✅ 뷰포트 기반 단위

단위	설명
vw	뷰포트 너비의 1% (ex. 50vw → 화면 너비의 50%)
vh	뷰포트 높이의 1% (ex. 100vh → 화면 전체 높이)
vmin	vw와 vh 중 작은 값을 기준 (ex. 가로 화면에서는 vh, 세로 화면에서는 vw)
vmax	vw와 vh 중 큰 값을 기준

반응형 웹에서는 vw, vh를 활용하면 유용하다.

div {
  width: 50vw; /* 화면 너비의 50% */
  height: 100vh; /* 화면 높이의 100% */
}

✅ 비율 단위

단위	설명
%	부모 요소의 크기를 기준으로 비율 지정

.parent {
  width: 200px;
  height: 200px;
}
.child {
  width: 50%; /* 부모 요소의 50% */
  height: 50%;
}

✅ CSS Grid & Flexbox 전용 단위

단위	설명
fr	Flex/Grid에서 가용 가능한 공간을 비율로 분배

grid-template-columns에서 컬럼을 균등하게 나눌 때 유용하다.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 비율로 나눔 */
}