03 시작하기

03-1 화면구성은 Tailwind CSS 으로

 

인스타그램 클론코딩 시작에 앞서 Tailwind CSS에 대해서 간략하게 살펴보겠습니다. Tailwind CSS 공식 홈페이지에서는 다음과 같이 소개합니다.

Rapidly build modern websites without ever leaving your HTML.

'HTML안에서 빠르게 빌드 하는 모던 웹사이트'라는 문구인데요. 말 그대로 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표라고 할 수 있습니다. 이것을 실현하기 위한 기법이 utility-first입니다. 미리 구현된 CSS를 사용하는 클래스에 추가하면서 사용할 수 있습니다. 

2022년 카카오 엔터테인먼트를 비롯한 여러 기업들이 Tailwind를 도입했다고 발표한 바 있습니다.

어떠한 점이 만족도를 높게 할까요?

1. 오직 HTML 문서만 보면 된다. 공식 문서도 그렇게 만들어져 있다.
2. 클래스 이름을 고민할 필요가 없고, 현업에 있어서도 문제가 없다.
3. 유지 보수에 용이하다.

기본 예제 다루기  

 

tailwind 공식 홈페이지의 기본 예제로 설명드리겠습니다.

(1) Sizing

<div className="w-96 bg-blue-100 shadow rounded">

클래스를 정의할 때 리액트에서는 className으로 정의합니다. ( HTML에서는 class로 정의합니다.)

 

w-96 (0.25rem * 96) width를 설정할 수 있습니다.

rounded 화면에 보시면 끝부분이 라운드 되어 있습니다.

shadow 그림자도 넣을 수 있습니다.

 

bg-blue-100 칼라도 지정할 수 있습니다. 100이라는 숫자는 커질 수로 진행 집니다. 칼라 예제에서 다시 설명하겠습니다.

 

이렇게 필요한 부분을 하나씩 추가하면 화면이 바로 근사하게 만들 수 있습니다.

w-2/4 w-1/4 이렇게 분수로도 width를 지정할 수 있어요

 

상위 Div에 space-y-4 부분은 y 축으로 4만큼 간격을 설정했습니다. 숫자가 커지면 간격을 커집니다.  space-x-4 는 x축으로 간격을 설정합니다.

 

(2) Colors 

 

칼라와 농도도 다양하게 지원합니다.

className="bg-blue-50" Background 칼라도 지정하고 뒷부분의 숫자가 커질수록 농도가 높아집니다.

다양한 칼라를 지원합니다.

slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald

teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

제일 윗부분 Div에 className="grid grid-cols-10 gap-2" grid로 칼럼을 10개로 간격은 2만큼 설정했습니다. 이렇게 필요한 부분을 정의만 하면 설정이 됩니다. 몇 가지는 외워두는 것이 사용하실 때 편리합니다.

 

(3) Typography

 

 

Typography는 font-sans, font-serif, font-mono 3가지 종류가 있고, 폰트 사이즈는

text-xs, text-sm, text-base, text-lg, text-xl 다양하게 준비되어 있습니다.

 

(4) Shadows

 

 

Shadows 종류는 shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl 이렇게 준비되어 있습니다.  

px-2 : padding x축으로 2 

py-2  : padding y축으로 2 

p-2 :  x,y 로 2만큼 

 

(5) Margin, Padding 속성의 차이점

 

margin, padding은 여백 기준이 많이들 헤갈려 하셔서 따로 정리하였습니다.  margin은 Object와의 외부여백, Padding은 Object의 내부여백을 의미합니다. 

[출처 : tistory 코딩팩토리]

(6) Flex : 1차으로 수평,수직 중 하나의 방향

 

flex (=flew-row), flex-col : 1차원으로 수평,수직 중 하나의 방향으로 지정

flex-wrap  flew-row로 한줄에 넘치면 아래로 표시 

flex-1  한 row에서 동일한 간격을 주고 싶을 때 

gap-6  간격 띄우기, 상위 Div에서 정의

flex justify-between 동일한 간격으로 

flex justify-center 센터로 

화면으로 정리했습니다. 

 

(7) 반응형페이지 

 

모바일페이지나 PC페이지의 화면 사이즈에 맞추어 반응형 페이지를 만들고 싶을때 사용합니다. 

sm, md, lg, xl, 2xl, dark, landscape:hidden 등이 있습니다. 

 

[https://tailwindcss.com/docs/screens 참고]

가장 작은 사이즈는 sm입니다. 모바일 사이즈입니다.  커스터마이징으로 px를 변경가능합니다. 우리는 변경하지 않고, 위와 같은 사이즈로 작업을 진행합니다. 

인스타그램 화면을 보시면 모바일화면과 PC화면의 헤더 내용이 다른걸 보실 수 있습니다. 

 

sm, md, lg, xl, 2xl 사용해서 사이즈별로 반응형을 구현할 수 있습니다. 인스타그램 화면구성시에 좀 더 다각도로 다루겠습니다.