(https://codepen.io/bhadupranjal/pen/vYLZYqQ 의 디자인을 참고하여 만들었다.)

HTML, CSS를 '김버그'님의 강의를 들으면서 배우고 연습했다.
배우는 중간에도 다른 사람의 디자인만 참고해 코드를 짜보려고 시도했지만, 그 당시에는 아는 것이 별로 없었기 때문에 끝까지 완성할 수가 없었다.

아직도 배울 게 많지만, 이제는 직접 부딪히며 배워보고자 작업해 볼 디자인부터 찾아보았다.
codepen에 들어가보니 눈에 띄는 디자인들이 많았다.

그 중, 비교적 간단해보이면서도 animation을 활용할 수 있는 Glowing Button을 선택했다.

Learning Point

Bootstrap에서 Grid System만 추출해서 사용하기

처음에는 Bootstrap에서 전체 링크를 다 복사해서 활용하려고 했다. 그런데, Bootstrap에 기본적으로 적용되어 있는 style들이 너무 많았고, 아무리 class를 주어도 내가 작성한 style이 적용되지 않았다.
도무지 해결책이 떠오르지 않아 김버그님께 질문을 드렸다. 그러자, 아래와 같이 답변을 주셨다.

그래서 제일 현명하다고 추천해주신 1번 방법, Grid System만 사용하기로 했다.
Grid System만 적용하자, 내가 애를 먹던 style 부분이 바로 해결되었다.

.btn .green과 .btn.green의 차이

아래는 html 코드이다.

모든 버튼에 적용되는 공통의 특성이 있었기 때문에 btn이라는 class를 모두 적용했고, 세 버튼의 색만 다른 것이므로 각각의 색에 맞게 green, pink, blue의 class를 각각 적용했다.

CSS에서 'btn green' class에 style을 주고자, .btn .green을 선택자로 사용했는데 style이 하나도 적용되지 않았다.

잘못 적은 부분이 하나도 없는 것 같은데, 왜 안될까 계속 만지작거리다 .btn .green으로 적은 선택자 부분에 hover를 하니 문제점이 발견되었다. .btn .green은 btn class의 자식인 green class를 선택한 구조라는 걸 이미지로 보여줬다.

btn이자 green인 class를 선택하려면 .btn과 .green을 붙여 써야 같은 level이라는 것을 간과한 채 코드를 작성한 것이다.

지금 생각해보면 어이 없는 실수이긴 하지만, 선택자끼리 붙여써야 한다는 걸 찾아내지 못했다면, 지금까지 왜 안되는지 모르고 있었을 것이다.

앞으로 다시는 선택자와 관련된 실수는 안할 것 같아 오히려 다행이기도 하다.

Bootstrap - Button은 Flex를 적용할 수 없다?

처음에는 glowing button의 영역으로 anchor 대신 button을 사용하고자 했었다. Bootstrap의 row와 col은 기본적으로 display가 flex니까 button 3개를 감싸던 row에 justify-content-center를 붙여주었다. 그런데 버튼이 중앙 정렬되지 않았다.

이건 또 왜일까 싶어, search를 해보니 Bootstrap에서 inline-block은 중앙 정렬을 하고 싶으면 text-center를 사용해야 한다는 것이었다.

내가 원하는 대로 스타일이 적용되지 않는 것은 물론 짜증이 나지만, 이를 통해 나는 새로운 지식을 습득할 수 있었다. 그래서 이제는 마음대로 되지 않는다고 해서 무조건적으로 좌절하기보다는 '내가 배울 게 또 생기겠구나'하고 마음을 먹을까 한다.

linear-gradient, transparent

glowing button을 감싸는 테두리에 animation을 적용했는데, codepen에서 본 것과 같이 테두리가 스르륵 사라지지 않았다.

그래서, glowing button을 만든 사람은 어떤 기능을 사용했길래 그게 가능했을까 하고 찾아보니 linear-gradient를 사용하였다.

linear-gradient는 직선에 그라데이션 효과를 줄 수 있는, 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 쓰는 기능이다.

나는 테두리 animation이 진행되면서 스르륵(투명해지면서) 사라질 수 있게 linear-gradient에 transparent라는 속성을 주었다.

What I felt

처음이라 어려운 점도 있었지만, 어려움을 해결하는 과정에서 분명 내가 성장할 수 있을 것이라 믿고 앞으로도 다양하게 도전해보고자 한다.

(작성한 코드는 아래 github에서 확인하실 수 있습니다.)
https://github.com/ksmself/Practice/tree/master/glowing-button