이번 시간에는 형식 작업을 하겠습니다
새 프로젝트 파일로 돌아가겠습니다
여기 모든 걸 감싸고 있는 이 디브(div)에
35rem의 너비를 줍니다
테일윈드를 사용하여 맞춤값을 설정할 수 있습니다
이 경우 맞춤 너비는
테일윈드가 공급하는 특별한 구문(syntax)인데
클래스 이름에 원하는 값을
포함시킬 수 있습니다
그러면 테일윈드가 알아서
이 클래스를 생성하여 줍니다.
테일윈드에 내장되지 않은
특정 값을 설정할 때
유용하게 사용할 수 있습니다
추가로 위쪽 여백으로 16을 추가하여
메뉴가 다 조금씩 내려와서
사이드바의 제목과
똑같은 높이에 오게 하겠습니다
이제 프로젝트 컴포넌트에 있는
이 내용의 형식도 맞춰야 합니다
여기서는 메뉴(menu)부터 시작하겠습니다
클래스 이름을 추가하여
Flexbox를 활성화합니다
items-center을 추가하여 이 요소들이
세로 축을 중심으로 하게 합니다
justify-end를 추가하면 이 부분을
가로축의 끝으로 밀 수 있습니다
즉 오른쪽 맨 끝이 되겠습니다
이 요소들 사이에 간격(gap)을 추가하고
1 rem의 세로 여백을
my-4를 작성해서 추가합니다
그렇게 하면 이 버튼이 이쪽으로 오게 됩니다
이제 해야 할 작업은
이 버튼들을 실제 버튼처럼 보이게 만드는 것입니다
첫 번째 버튼부터 시작하여
취소 버튼의 클래스 이름
text-stone-800으로 해서 짙은 회색 글자를 만듭니다
그리고 롤오버(hover) 스타일로는
더 진한 회색으로 만듭니다
거의 검정색에 가까운 색입니다
그렇게 했을 때 이 버튼이 많이 변하진 않았습니다
이 두 번째 버튼은
다른 형식을 주겠습니다
첫 번째 버튼은 좀 더 납작하고
덜 눈에 띄는 버튼이어야 합니다
프로젝트를 만들다가 취소시키는 버튼이기 때문입니다
하지만 저장 버튼은 조금 더 확실해야 합니다
그렇다면 여기에도
몇가지 클래스를 추가하겠습니다
먼저 배경색을
짙은 회색으로 추가합니다
글자 색은 text-stone-50으로
거의 하얀색에 가까운 색입니다
롤오버했을 때 배경색이 더 진한 회색으로
바뀌도록 하겠습니다
첫 번째 버튼의 글자색과 똑같은 색으로 설정합니다
추가로
위치는 크게 상관 없지만
양 옆으로 여백을 추가할 수도 있습니다
위 아래도 마찬가지입니다
버튼 모서리도 둥글게 만들어 줍니다
마지막에 봤을 때 두 번째 버튼에 추가된
클래스는 다음과 같습니다
이대로 저장하겠습니다.
여기 버튼이 생겼고, 롤오버 효과도 잘 나옵니다
다음으로는 이 입력값들을 작업해보겠습니다
입력값 작업을 위해
입력 파일(Input.jsx)로 가겠습니다
거기서 문단(p)부터 시작하겠습니다
이 문단에 flex 클래스를 또 추가하여
Flexbox를 쓸 수 있게 합니다
여기서 꼭 필요한 작업은 flexbox가 요소들을
세로로 정렬시킬수 있도록 flex-col을 추가하는 것입니다
위 아래로 간격과 여백을 조금 줍니다
그리고 여기 라벨에도 몇 가지 클래스가 필요합니다
예를들어 글자를 더 작게 만들어 봅시다
Text-sm 클래스를 사용하면
글자 크기가 작아집니다
글자를 굵게 하고 모두 대문자로 만들고
색도 바꾸겠습니다
중간 짙은 회색 정도로 하겠습니다
이걸 저장하면 라벨이 이렇게 보이게 됩니다
아래쪽 입력 창이 잘 보이지 않기 때문에
여기에도 형식을 추가하겠습니다
문자 영역(textarea)에
w-full을 추가하여
사용 가능한 가로 너비를 다 차지하게 하고
모든 방향으로 0.25rem의 패딩(padding)이 들어가게
p-1 클래스를 사용하겠습니다
밑에 2픽셀 두께의 경계선을 위해
border-b-2를 사용합니다
둥근 모서라를 더하고, 선의 색은 stone-300으로
border-stone-300를 추가합니다
추가로 배경색은
bg-stone-200으로
문자색은 text-stone-600 으로 하겠습니다
마지막으로 입력 창에서 입력 중일 때
다른 형식을 추가하겠습니다
예를들어 이 기본 테두리를 비활성화하려면
focus outline-none을 사용하면 됩니다
또 입력 중일 때 테두리 색을 바꾸도록 하겠습니다
Focus: border-stone-600를 사용하겠습니다
이제 문자 영역에 많은 클래스가 추가되어
입력창이 이렇게 보여집니다
제 눈엔 꽤 괜찮아 보입니다
이제 똑같은 클래스를 입력값에 적용시키겠습니다
이 문자열을
상수에 저장하겠습니다
Classes 라는 이름으로 하겠습니다
그리고 문자 영역에 classes를 지정해주고
똑같이 입력값에도 지정합니다
그러면 이게 완성된 입력 컴포넌트입니다
모든 클래스들이
문자 영역과 입력값에 추가되었습니다
이제 저장해봅시다
꽤 괜찮아 보입니다
이제 다음 순서로는
프로젝트 버튼을 클릭했을 때
창을 열리게 하는것이고
버튼을 클릭했을 때에
대체 내용을 띄우도록 하겠습니다
그리고 사용자가 입력한 값을 가져와서
실제로 새로운 프로젝트를 생성하도록 하겠습니다
다음 시간에는 대체 내용(fallback)부터 시작하겠습니다