[React]뽀모도로 타이머 개발 3일차 - 타이틀 화면(2)

타이틀 화면 마무리 - 제목, 설정, 버튼 추가

오늘은 뽀모도로 타이머 타이틀 화면 개발을 마무리 짓겠습니다.

제목 영역 추가하기

제목은 간단합니다. 전체 제목이므로 h1태그 안에 추가해 줍니다. 만약 여러가지 주제가 있어서 소제목이 있다면 h2, h3 등 으로 1단계당 숫자를 +1씩 올리시면 됩니다.

<h1 className="text-center text-5xl lg:text-7xl font-bold mb-5">
  Pomodoro Timer
</h1>

TailwindCSS를 이용해 클래스명을 추가하여 모양을 만들어 줍니다.

• text-center : 글자를 가운데로 정렬합니다
• text-5xl : 글자 크기를 정합니다. 5xl이면 기본값이 48px 입니다.
• lg:text-7xl : 앞의 'lg'는 화면 너비에 따라 반응형으로 우선 적용되는 css 입니다. lg의 경우 화면 너비가 1024px 이상일 경우 적용한다는 뜻으로, 화면 너비가 1024px보다 작으면 text-5xl을, 크면 text-7xl을 적용시킵니다. 7xl의 기본값은 72px 입니다.
• font-bold : 글씨를 굵은 글씨로 표시합니다.
• mb-5 : margin(여백)을 bottom(아래)에 추가합니다. 특별한 단위 없이 숫자만 있는 경우는 기본값으로 1당 4px 이며 mb-5는 아래 여백을 20px만큼 추가한다는 의미입니다.

자세한 내용은 TailwindCSS 공식 홈페이지를 참고하세요.

공식 홈페이지로 이동

설정 영역 추가하기 

설정 영역을 추가하겠습니다. 구분하기 쉽도록 배경색을 추가하였습니다

<div className="grid grid-cols-1 lg:grid-cols-3 py-4 text-xl bg-red-50 text-black gap-y-4">
{/* 설정 영역 추가 */}
</div>

• grid : display를 grid로 설정합니다.
• grid-cols-1 : 가로 영역을 몇 분할로 표시할 지를 설정합니다. 1로 설정할 경우 div를 세로로 분할합니다.
• lg:grid-cols-3 : 화면이 1024px 이상일 경우 영역을 3분할로 지정합니다. 말로 설명이 어려우니 아래 화면을 참고해 주세요

Grid 영역 분할 기능

• py-4 : padding을 세로(y축)로 추가합니다. 아래 위로 각각 16px씩의 padding(내부 여백)이 추가됩니다
• text-xl : 글자 크기를 지정합니다. xl은 20px입니다
• bg-red-50 : 영역에 배경색을 추가합니다. 흰색에 가깝지만 약간 붉은 빛이 나도록 지정했습니다.
• text-black : 글씨 색상을 검정으로 지정합니다. 부모 요소에서 글씨색을 하얀색으로 지정했기 때문에, 여기서 글씨 색을 검정으로 지정하지 않으면 흰색으로 표시됩니다.
• gap-y-4 : 자식요소들의 세로 여백을 지정합니다. 마찬가지로 아래 화면을 참고해 주세요.

Gap 지정

시작버튼과 안내문구

아래에는 버튼과 안내문구를 추가합니다.

<button
  className="hover:bg-opacity-30 hover:bg-white w-full p-4 border-2 border-white rounded-full text-xl lg:text-5xl mt-5"
>
  START
</button>
<p className="mt-10 text-center">
  시간 설정이 완료되었으면 <br className="lg:hidden" />
  START를 눌러주세요
</p>

 

• hover:~ : 해당 영역에 마우스를 올릴 때에만 적용됩니다. 이 버튼의 경우 마우스를 올리면 투명도가 적용이 된 흰색으로 버튼 색이 바뀝니다.
• rounded-full : 영역의 외곽을 둥글게 해줍니다.  sm, md lg 등 둥근 정도를 정할 수 있으며, full로 하면 양 끝이 반원 형태가 됩니다.

시작 및 설정 화면

타이틀 화면이 완료되었습니다. 다음엔 타이머 화면과 기능을 추가해 보겠습니다.