이전 시간에 다뤘던 hover, active에 이어 버튼의 se
lected 상태 적용할 인터랙션을 알아볼게요!
그전에 간단하게 오늘 다룰 내용을 좀 알아보도록 할텐데 딱 두가지가 중요합니다!
첫번째는 선택한 상태를 나타내도록 useState ReactHook을 알아야하구요!
물론 useState를 안쓰고도 충분히 가능하긴해요~!
두번째는 CSS 지식인, after before를 활용한 가상 요소 선택자를 알아야합니다!
일단 CSS를 알아가는 과정이니 가상 요소 선택자인 after와 before 위주로 알아볼게요!
before selector라고 검색을 해보면 이렇게 정의를 하고 있습니다!
The ::before selector inserts something before the content of each selected element(s).
정말 간단하죠?? 선택한 요소의 이전에 삽입을 시켜준다네요
(after는 마찬가지로 이후에 삽입을 시켜줘요!)
처음엔 이 말이 정말 뭔소린가 싶었는데 직접 사용해보니 유용하게 쓰이는 곳이 엄청 많았어요!
그러면 인터랙션을 통해 밑줄을 만드는 과정과 버튼위의 점을 찍는 두가지 과정을 해보겠습니다!
먼저 밑줄을 만들어보도록 할까요?!!
// Link.tsx
<a className={cn(s.root)}>{children}</a>
// module.css
.root {
position: relative;
}
.root::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
top: inherit;
left: 0;
bottom: 0px;
background-color: rgba(0, 89, 255);
}
.root:hover::after {
width: 100%;
}위와 같이 적용을 하게 되면 태그에선 이런식으로 ::after라고 해당 element의 이후에 삽입이 됩니다!
만약 ::before로 적용한다면 이렇게 아래에 나오겠죠??
물론 둘 중 어떤것을 해도 상관없어요! 왜냐면 .root에 relative를 걸어놓은 후에 after는 absolute를 통해 root 기준으로 접근할 계획이기 때문이에요!
.root::after를 해석을 해보면,
1) content : '' 로 내용이 없도록,
2) width : 0%, height:2px로 높이는 존재하지만 아직 뭔가는 없는 상태이죠
3) :hover를 통해 커서를 올릴 때, width가 100%가 되어 밑줄이 쫙 그어지게 만들었어요!
쨘! 밑줄이 생기는걸 확인할 수 있습니다!
// Link.tsx
<a className={cn(s.root)}>{children}</a>
// module.css
.root {
position: relative;
}
.root::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
top: inherit;
left: 0;
bottom: 0px;
background-color: rgba(0, 89, 255);
transition: all 0.5s ease-out;
}
.root:hover::after {
width: 100%;
transition: all 0.5s ease-out;
}
그러면 이렇게 끝내면 좀 허전하니 마지막 transition을 통해 밑줄 인터랙션?? 밑줄 charging...? 표현하기 어렵지만 왼쪽에서 오른쪽으로 밑줄이 생성되는 모션을 줘볼께요!
호호 심플하지만 뭔가 있어보이게 할 수 있는 방법입니다!
(영상에 뒤에 흐릿하게 비치는 글씨가 보이나요?!!?!
제가 요새 공부한 glassmorpphism이라는 디자인인데 이것도 추후에 포스팅 할께요~!!)
이렇게 after before를 이용하면 특정 tag를 만들어 고생해서 접근하지 않아도 손쉽게 인터랙션을 접근할 수 있답니다!!
목표는 이게 아니였지만 하다보니 hover, active, selected 만들기(3)까지 가야되게 생겼네요ㅠㅠ
다음시간에 마지막으로 글씨위에 점을 before 를 활용하여 접근할게요!
만약 혼자 할 수 있으면 혼자서도 해보시죠!!!
다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(4) : hover, active, selected 만들기(3), 가상 요소 선택자 after or before
다다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(5) : box-shadow로 버튼 디자인(1)
다다다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(6) : box-shadow로 버튼 디자인(2)