이 styled component에 관한
소개를 마치기 위해
여러분이 어떻게 styled component로 @media를 다룰 수 있는지
혹은 hover와 같은
pseudo 선택자를 styled components를 활용할 때 사용할 수 있는지
혹은 다음과 같이 중첩된 규칙을 어떻게
styled components를 가지고 설정하는지 살펴보고자 합니다
왜냐하면 보다시피 이 모든 것은 가능합니다
우선 @media와
다음과 같은 중첩 선택자에서 시작합시다
이를 위해 header.jsx 파일에서
이 내장 헤더를
styled components 헤더로 대체합시다
이를 위해 물론 우리는
styled 를 styled component로부터 import 해야 하며
여기서 우리는 같은 파일에
커스텀 헤더를 생성할 수 있습니다 왜냐하면 저는 이것을 오직 그 파일에서만 사용하고
여기 파일과 밀첩하게 연결되어 있기 때문입니다
비록 지금
여기 함수 이름과 충돌할지라도 말입니다
따라서 충돌을 막기 위해 여기 이름을 StyleHeader로 바꾸겠습니다
그리고 나서 헤더를 styled.header를 통해 만들고
그리고 당연히 백틱을 활용합니다
그리고 우리는 다시 이 헤더 스타일을 가지고
백틱 사이로 이동시킬 수 있습니다
따라서 이 스타일로부터 시작하기 위해
왜냐하면 이것들은 헤더에 직접적으로 적용됩니다
저는 이것들을 복사하고 여기에 추가하겠습니다
그리고 이 StyleHeader를 사용하여
styled component와 함께
내장 헤더를 대체하겠습니다
그러나 이를 가지고 당연히 여러분이 재로딩하면
나빠보이지 않습니다
그러나 이것은 제가 아직 여기에 css import를 가지고 있기 때문입니다
이것을 삭제하고
여기 클래스도 삭제하면 깨지는 것을 볼 수 있습니다
이미지는 너무 크고 글자는 올바르지 않고
완전히 깨졌습니다 왜냐하면 css 속성들이
보다시피 아직 설정되어 있는 동안
모든 것은 중앙 정렬 되어있고 예를 들어서 여러분이 볼 수 있듯이
여기를 살펴보면
속성들은 모두 적용되어 있습니다
그러나 그것이 경우라면 여기 다른 규칙들은
당연히 적용되지 않았습니다
왜냐하면 저는 css 파일을 더이상 import하지 않기 때문입니다
이제 우리는 styled component로 이미지 파일을 대체하고
그리고 컴포넌트에 우리의 이미지 스타일을 추가하고
h1 요소에도 똑같이 적용합니다
그렇다면 당연히 괜찮아 보일 것입니다
그러나 다른 대안을 택할 수도 있습니다
여기 있는 모든 css 코드를
이 css 파일 헤더 모듈로부터 복사하여
@media를 포함하고 복사하여 여기에 우리의
styled components 코드에 다음 헤더처럼 추가합니다
이제 이렇게 하면 우리가 마무리 하지 않았기에
아무것도 변하지 않습니다
대신에 헤더를 & 기호로 대체하면
즉 & img를 쓰면
여기 빈 공간으로 인해 분리됩니다
이 & 기호는 styled component에
여기 이 규칙들이 이 헤더 내의
어느 이미지 요소에나 영향을 미친다는 것을 보여줍니다
즉 이 헤더 안에 보관되는 것들 말입니다
그리고 우리는 같은 것을 h1 요소에 대해서도 할 수 있습니다
헤더 대신에 &를 활용합니다
우리는 여기 paragraph를 &p 로 변경하여
이 헤더 내의 어떤 p든 타겟할 수 있습니다
그리고 여기 아래 @media에서
우리는 &를 활용하여 헤더를 대신합니다
따라서 이 @media가 만난다면
이 규칙들이 헤더에 적용됩니다
그리고 @media를 이렇게 작성하는 것은
당연히 작동합니다
그리고 당연히 우리가 이것들을 삭제하고
@media가 적용될 때
다음과 같이 규칙을 추가할 수도 있습니다
그리고 &를 다시 사용하여 h1 요소를 위해
@media가 적용되면 다음과 같은 규칙을 설정합니다
이를 통해 우리가 저장하고 재로딩 한다면
우리의 모든 스타일이 돌아온 것을 볼 수 있습니다
그리고 더 작은 스크린을 시뮬레이트하기 위해
개발자 툴을 열면
여기서도 헤더를 살펴보면
bottom까지의 margin이 2rem인 것을 확인할 수 있습니다
만약 더 크게 만들어서
더 큰 스크린을 보이고자 한다면
여러분은 이 @media로부터
margin-bottom 이 4rem이라는 규칙이
덮어 씌워지는 것을 볼 수 있습니다
그리고 이것은 이 @media 안의 규칙입니다
이것이 바로 children과 사용 기능을 스타일하는
styled components를 사용하는 것이
@media처럼 얼마나 쉬운지를 보여줍니다
보다시피 이것은 표준 css 코드입니다
우리는 이 코드를 바꿀 필요가 없었고
여러분은 각 요소를 styled component로
스타일하기 위해 바꿀 필요가 없습니다
대신에 하나의 래핑 부모 요소를 변환하고
이것과 같이 스타일을 추가하면 됩니다
그리고 이제 pseudo 선택자에 대해서도 비슷합니다
우리가 여기서 button을 원한다고 가정합시다
styled component와 함께 말입니다
이를 위해 AuthInputs에서는
우리는 button 컴포넌트를 다음과 같이 새로 추가하고
styled.button을 활용합니다
그리고 당연히 첫 번째 단계로
여기 우리의 표준 버튼 스타일을
index.css 로부터 가져오고 여기에 다음과 같이 추가합니다
그러나 우리가 이 버튼 위에 마우스를 둘 때도 (hover)
스타일을 적용하기 위해 우리는 & hover를 사용합니다
이제는 빈 공간으로 나눠지지 않습니다
왜냐하면 사이에 빈 공간이 있다면
여러분은 hover 되는 버튼의 children 요소를
목표로 하게 되기 때문입니다
빈 공간 없이
버튼 자체가 hover되어야 합니다
여러분은 hover 스타일을 여기에서 설정할 수 있습니다
이 경우에는 오직
배경 색깔이 변경되어야 합니다
따라서 우리는 이것을 복사하고 여기에 붙여넣기 할 수 있습니다
그리고 이제 우리는 고유 버튼을 사용하여
여기의 내장 버튼을 대체합니다
첫 번째는 이와 같이 유지합니다
왜냐하면 이것은 다른 종류의 버튼입니다
저는 지금 styled component로 이동하고 싶지는 않습니다
여러분의 시간을 아끼기 위해서입니다
그러나 당연히 연습으로 할 수 있습니다
그러나 여기서 두 번째 버튼입니다
여기 className을 삭제하겠습니다
이로써 재로딩하면
이 버튼이 아직 보이고 전처럼 작동하지만
여기에 styled component와 함께
hover 스타일의 버튼이 생성된 것을 볼 수 있습니다