chatGPT가 생각하는 아름다운 CSS 버튼 스타일 (feat. before/after 가상 요소)

 

chatGPT가 생각하는 아름다운 CSS 버튼 스타일

이번 포스트는 chatGPT가 생각하는 아름다운 버튼 스타일에 대해서 작성해 보고자 한다.
처음 포스트를 작성한 뒤로 포스트를 작성할 수가 없었는데...
이유는... chatGPT가 학습한 것이 점점 더 많아지기 시작해서인 것인지는 몰라도
처음 시도할 때는 '가장 아름다운 CSS를 작성해 줘'라고 하면 무작위로 무언가 만들어 줬는데
요즘은 무작위라기보다는 "아름다운 CSS 코드는 간결하고, 가독성이 좋으며, 쉽게 유지 관리할 수 있는 코드"라면서 아주 기본적인 코드만 작성해 준다.
몇 주 전까지만 해도 아름다운 버튼/아름다운 GRID 스타일/아름다운 애니메이션 등등 뭔가 무작위로 생성해 줬는데 요즘은 통 마음에 드는 걸 출력해 주지 않는다.

그래서 이번에는 요구하는 바를 명확하게 제시해 줘서 결과를 리뷰해 보았다.

Question

너가 생각했을 때 가장 아름다운 애니메이션이 동작하는 버튼 CSS 코드를 작성해줘

Answer

아름다운 애니메이션 버튼은 사용자 경험을 향상시키는 동시에 시각적으로 매력적이어야 합니다. 다음은 간결하고 아름다운 애니메이션이 동작하는 버튼 CSS 코드 예시입니다.

이번 포스트는 JSFiddle을 사용해서 미리보기를 작성했다.
이전 포스트는 티스토리의 HTML 편집기로 따로 작성을 했는데,
티스토리의 모바일 앱이나 카카오톡으로 접속하면 HTML이 깨지는 것을 확인 했다...
앞으로는 JSFiddle을 사용해서 포스팅할 계획이다. 이전 포스트도 시간 내서 나중에 수정해야겠다.

chatGPT에게 이번에는 아름다운 애니메이션 효과를 가진 버튼 CSS 코드를 작성해달라고 해보았다.
살짝 둥근 파란색의 버튼을 만들어 주었다.
버튼에 hover를 하는 경우 scale이 1.05로 살짝 확대시키면서 background-color를 변경한다.
배경색과 크기가 변경될 때는 transition을 통해 부드럽게 전환되게 해주었다.

사실 여기까지는 버튼의 효과를 줄 때 가장 많이 사용하는 방법이면서 가장 기본적이긴 하다.
근데 눈에 띄는 점은 postion을 absolute, scale을 0으로 준 ::before이다.

버튼을 hover 할 때 버튼의 정중앙에서부터 ::before의 동그란 모양이 커지는 것을 확인할 수 있다.
chatGPT가 지정한 색상이 사실 눈에 잘 띄는 색상은 아니지만 살짝 디테일을 신경 쓴 듯한 애니메이션 효과이다.

우선 before와 after의 존재와 사용법 자체는 알고는 있었지만,
이번 포스트를 작성하면서 간단하게 무엇인지 알아보는 시간을 가져보고자 한다.

CSS의 ::before와 ::after (가상 요소 : pseudo-elements)

선택한 요소의 내용(content)의 앞이나 뒤에 내용을 삽입하는 데 사용된다.
이 가상 요소들은 HTML 코드에 실제로 존재하지 않지만, CSS를 통해 생성되어 페이지에 표시된다.
이는 CSS를 통해 페이지의 레이아웃과 디자인을 보다 효율적으로 구현할 수 있게 하기 위함이며, 이를 통해 HTML 구조를 유지하면서, 추가적인 요소를 쉽게 적용할 수 있다.

단, 가상 요소의 내용을 동적으로 변경하기가 어렵다.
JavaScript를 사용해도 직접 접근할 수 없기 때문에(DOM의 요소가 아니기 때문),
부모 요소의 속성을 변경하는 방식으로 간접적으로 조작해야한다.

사실 개인적으론 before와 after를 많이 사용해 본 경험은 없어서 자세하게는 몰랐다.
여태 봐온 모든 강의에서도 사실 사용하는 걸 잘 보진 못했 던 것 같다. 하지만 이번 기회를 통해 before와 after의 대략적인 사용처와 JS를 사용해 동적으로 변경하기 어렵다는 사실을 알게 됐다.
나중에 기회가 된다면 한번 before와 after를 활용해서 스타일링을 해봐야겠다.

chatGPT가 만들어준 버튼 스타일을 통해 가상 요소에 대해 공부해 보는 시간을 가졌는데,
문득 저 스타일을 조금 변경해서 다른 걸 할 수 있지 않을까 싶어서 살짝 바꿔보고자 한다.
배경색이 변경되는 것이 아니라 before가 커지면서 button의 배경을 아예 덮어버리면 다른 느낌의 버튼 애니메이션이 만들어지지 않을까 싶어서 해보았다.

chatGPT가 만들어준 버튼 스타일에서 우선 버튼이 확대되는 부분은 제거했다.
그리고 button class에 width와 height를 주고 a 태그 안에 들어가는 텍스트는 div로 감싸주고 이 div도 absolute로 지정 및 버튼 가운데에 위치하게 해주었다.
before의 경우 버튼에 hover 했을 때 scale이 0에서 2로 변경하는 것은 그대로 두고 배경색을 파란색과 대비되는 주황색으로 변경해 보았다.
이렇게 해서 before가 커지면서 버튼의 배경을 꽉 채우는 효과를 만들어 보았다.

단순한 스타일이지만 그래도 나름 느낌 있는(?) 효과를 만들어 본 것 같다.