그러나 우리가 테일윈드의
장점과 단점에 대해 살펴보기 전에
자주 마주하는 중요한 스타일링 문제를 먼저
살펴봅시다
만약 여러분이 서로 다른 스크린 사이즈를 위한
다른 스타일을 필요로 하거나
혹은 pseudo 선택자를 우리가 여기 hover 스타일을 위해
버튼을 추가한 것처럼 스타일하고 싶다면 어떻게 해야 할까요?
일단 @media부터 시작합시다
당연히 테일윈드를 이것을 위한 솔루션을 가지고 있습니다
공식 문서에서
responsive design 아래
여러분은 특정 스크린의 너비일 때만
적용하는 유틸리티 클래스에
추가할 수 있는 특정 접두사들이 있음을 배울 것입니다
예를 들어서 여러분이 md:을
width class 앞에 추가한다면
최소 너비와 관해서
적어도 중간 사이즈의 스크린일 때
이 width 클래스가 적용됩니다
따라서 여기 애플리케이션에 사용되었듯이
헤더와 h1 요소를 위한
특별한 스타일이 있습니다
Header.jsx로 돌아가서 예를 들어
이 헤더에 md : 으로 접두사를 추가하여
중간 크기의 화면 이상에서만
이 큰 여백이 있는지 확인할 수 있습니다
그리고 이제 이 아래
2 rem 의 margin bottom의 기본 여백을 설정할 수 있습니다
이제 이것은 항상 적용되고
우리가 더 큰 화면을 갖는 대신에
적용될 것입니다
그리고 여기 h1 요소에 대해서도 똑같이 적용될 수 있습니다
중간 크기의 화면 이상이면
이 큰 텍스트를 사용할 수 있습니다
그렇지 않다면 우리는 text-xl 유틸리티 클래스를 적용할 수 있습니다
이것은 여전히 큰 텍스트를 설정하지만
text-4xl 만큼 크지는 않습니다
따라서 이렇게 저장하면 이전과 정확히 같아 보이지만
화면을 축소하게 되면
텍스트가 작아지고 헤어 아래의 여백도
큰 화면보다 작아집니다
이제 hover 스타일에 대해서는 어떻게 할까요?
이 경우에는 이 버튼으로 돌아가 봅시다
그리고 물론 여기에서 현재
styled component를 사용하고 있는데
이는 더 이상 제가 사용하고 싶지 않은 것 중 하나입니다
따라서 저는 실제로 이 파일을 지우고
여기에서 button 컴포넌트 함수를 export 할 것입니다
여기에서는 표준 Button을 반환하고
children 속성을 사용하여
제 버튼을 여기에 넣을 내용으로 래핑할 수 있도록 하겠습니다
그리고 나머지 속성은
여기에서 수집하고
간단히 이 버튼에 전달하겠습니다
그러나 물론 우리는 아직 테일윈드를 사용하지 않았습니다
대신에 이제 여기에 클래스 이름을 다시 추가하고
여기에 원하는 모든 클래스를 추가할 수 있습니다
그리고 이 버튼의 경우
왼쪽과 오른쪽에 패딩을 추가하려고 합니다
이는 여기에서 px 클래스를 사용하여 설정할 수 있고
px-4 로 1 rem일 것입니다
그런 후에 위와 아래로 패딩을 추가하려고 합니다
이는 py-2로 0.5rem이 될 것입니다
저는 여기서 세미 볼드 폰트를 원하고
대문자여야 한다고 가정합니다
또한 버튼에 둥근 모서리를 추가하려면
여기 오른쪽에 보이는 것처럼
테두리의 반경을 제어하는
다른 rounded 클래스 중 하나
하나를 추가하겠습니다
그리고 저는 텍스트 색상을
text-tone-900으로 설정할 것입니다 이것은 어두운 회색입니다
배경 색상은 bg-amber-400으로 설정하여서 노란색과 오렌지 빛의 색상을 설정할 것입니다
그리고 이 버튼 위에
마우스를 올렸을 때 다른 스타일이
적용되도록 하려면 이 버튼이
hover 상태일 때만
적용되어야 하는
유틸리티 클래스 앞에 hover: 를 추가하겠습니다
따라서 우리가 그 버튼 위에 머물 때 말입니다
따라서 마치 우리가 md 및 다른 화면 크기 클래스를 활용하여
특정 화면 크기에서만
특정 유틸리티 클래스를 추가할 수 있는 것처럼
여기에서는 hover :또는 focus :을 활용하여
특정 상태에서만
특정 유틸리티 클래스를 적용할 수 있습니다
이 경우는 버튼 위에 마우스를 올리는 경우입니다
그런 다음 여기에 배경 색상으로
bg-amber-500을 추가할 수 있습니다
예를 들어서 이 버튼 위에
마우스를 올리면 더 어두운 배경 색상을 사용하도록 할 수 있습니다
이렇게 하면 꽤 긴 클래스의 리스트가 생기지만
이렇게 저장하면 일반적인 배경 색상이
현재 입력 영역에 배경이 없어서
조금 어렵게 보일 수 있습니다
그러나 이 버튼 위로 마우스를 올리면
확실히 변경되는 것을 볼 수 있습니다