Interactive card detail 1차 솔루션

html, CSS, Javascript 기초를 공부한 기념으로 

Frontend Mentor의 'Interacitve card details form' 챌린지에 도전했다.

 

결론부터 말하자면 다른 기능은 대체로 어찌저찌 구현했으나 

form validation 기능을 제대로 구현하지 못한 채로 일단 1차로 마무리를 했다.

 

다른 사람들의 솔루션을 보니 리액트를 대다수가 활용한 것 같아

리액트 공부를 먼저 하고 다시 도전해 보기로.

 

만들어야 하는 것은 아래와 같다.

 

---

내 결과물

 

User card details

 

---

어려웠던 것들 정리

 

1. 카드번호에 띄어쓰기 구현

change eventListner를 넣고 띄어쓰기를 삽입하도록 했는데 이렇게 하면 내용을 입력하다가 중단하더라도 띄어쓰기가 삽입돼서 다시 입력을 재개할 때 띄어쓰기를 삭제해줘야 하는 맹점이 있다. 이렇게 푸는 게 아닐 것 같아 다른 사람들의 솔루션을 살펴봐야겠다.

 

2. float 속성 사용하면 밑에 있는 요소들이 딸려 올라가는 문제

아래에 빈 div 태그를 넣고 clear:both를 해서 해결했는데, 검색해 보니 이것이 권장되는 방법은 아니라고 한다. 다음 수정 때 고쳐봐야 겠다.

 

3. active 상태의 input 박스 테두리에 그라데이션 넣기

제일 애를 먹은 것 중 하나였는데 원리부터 파악하려 노력하니 풀렸다. 구글링했을 때 하나같이 background image에 linear-gradient를 넣고

 

background-origin: border-box;
background-clip: content-box, border-box;

이렇게 설정하면 된다고 했는데, 나한테는 자꾸 padding까지 색이 들어가서

 

이렇게 됐고, 이걸 해결하는 데 거의 한시간은 걸린 것 같다.

 

input:focus {
    outline: none;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), 
    linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

 

전체 코드를 보면 이렇게 해서 해결을 했는데, 핵심은 background-clip에 나열된 두 개의 속성이 각각 background-image의 첫번째, 두번째 이미지가 보여지는 방식을 설정하는 것이고 따라서 보라색 linear-gradient는 border-box부터, 흰색의 linear-gradient는 padding-box부터 보여지게 해야 기본으로 투명하게 설정돼 있는 padding에 background-image가 비쳐보이지 않게 할 수 있다는 것이다.

 

이로써 background image 여러 개 사용하기,  background-origin, background-clip의 개념, border-box, padding-box, content-box의 개념까지 익히게 됐으니 좋은 거라고 해야 하나?

(근데 조금만 덜 고생하고 알았으면 좋겠다ㅠㅠㅠ 고생의 양에 비해 수확이 너무 소소한 느낌..ㅋㅋㅋ)

 

리액트를 공부하고 나면 다른 기능들도 잘 구현해서 완성할 수 있기를!!