이번 시간에는 이 앱의 형식을 더하겠습니다
여기 앱 컴포넌트에서 시작하여
이곳에 CSS 클래스를 추가합니다
그리고 여기에
테일윈드 CSS가 제공하는 h-screen이라는 클래스를 추가하겠습니다
이 클래스는
이 부분이 화면 세로길이를 전부 차지해서
나중에 봤을때 사이드바도
주어진 높이를 다 채울 수 있게 됩니다
추가로 margin,즉 여백 영역도도 위 아래로
수직의 축을 따라서
2rem 추가하겠습니다.
my-8 클래스를 추가하면 됩니다
그렇게 하여 이 쪽
프로젝트 사이드바 파일로 돌아오겠습니다
이쪽 aside 요소에도
여러 클래스를 추가하여
사이드바에 형식을 더하겠습니다
예를 들면 사용 가능한 너비 중
1/3의 너비를 주겠습니다
이것 또한 테일윈드가 제공하는 클래스입니다
사용 가능한 너비 중 1/3이 너비로 설정됩니다
또 양 옆으로 패딩(padding) 속성을 더하기 위해
px-8 클래스를 사용하고
위 아래 패딩은 py-16 을 사용합니다
배경 색으로는
bg-stone-900으로 어두운 회색을 사용합니다
사이드바의 글자가 잘 보일 수 있게
글자 색을 text-stone-50 로 설정합니다
아주 밝은 회색, 거의 하얀색입니다
또 필요한 내용은
사이즈가 큰 스크린에서 1/3 너비를 사용하면
사이드바가 너무 커질 수 있기 때문에
md 프리픽스(prefix)를 사용하여
큰 화면에만 적용되는 규칙을 만들겠습니다
w-72 규칙을 사용하여 너비를 18rem으로 설정하겠습니다
마지막으로 둥근 모서리를
오른쪽에만 추가합니다
이렇게 rounded-r-xl 클래스를 사용하면 됩니다
이것으로 상단 오른쪽 테두리와
아래쪽 테두리 반경을 설정했습니다
이제 저장을 하면
사이드바가 이런식으로 보입니다
아직 세로 높이를 모두 사용하지 않지만
곧 수정할 내용입니다
이제 사이드바로 돌아가서
H2 태그도 형식을 편집해 주겠습니다
예를 들어 밑부분에 여백을 만들겠습니다
font-bold로 글자를 굵게 만들고
대문자 클래스를 추가하여
모든 철자가 대문자로 나오게 합니다
그리고 물론
큰 스크린이므로 글자 크기를 키우겠습니다
마지막으로
다른 연한 갈색으로 색을 바꿉니다
이 코드들을 추가하면
제목이 이렇게 보입니다
이제 버튼에도 클래스를 추가하겠습니다
패딩을 양옆으로는 물론
위아래로도 설정하겠습니다
즉 세로 축을 따르는 것입니다
text-xs를 사용하여 글자를 더 작게 만듭니다
하지만 더 큰 화면에서는
기본 글자 크기를 적용하기 위해
text-base 클래스에 md: 프리픽스를 사용합니다
이 버튼도 모서리를 둥글게 하기 위하여
rounded-md 클래스를 추가합니다
배경색은
bg-stone-700 으로
글자색은 text-stone-400 으로 설정합니다
또 이 버튼 위로 마우스를 올렸을 때
변화가 있도록 하겠습니다
stone-600 의 배경색을 주고 프리픽스로
hover: 라는 클래스를 사용하여
마우스가 위로 왔을 때만 적용되게 하겠습니다
글자색도 text-stone-100 으로 바꾸어서
커서가 위로 왔을때 변하게 하겠습니다
이제 이 버튼에 클래스가 많아졌습니다
버튼의 경우는
테일윈드 CSS 클래스가 가장 많이 들어가는 요소입니다
이제 작업이 끝났으니 확인해 보면
여기 아주 멋진 버튼이 생겼습니다
이제 기본적인 사이드바와
버튼을 만들었으니
다음으로는 이 버튼을
클릭할 수 있고
또 새로운 창이 열릴 수 있도록 하겠습니다
새 창을 열어서 새 프로젝트 상세정보를 추가할 수 있는
컴포넌트가 보여지도록 하겠습니다