HTML, CSS 사용하여 UICARD 만들기 (2)

📚 Animation 추가 적용하기

지난번에 만든 Uicard.html에 animation을 추가해 보면 어떨까 해서 추가를 하면서 

화면을 확대했는데. 지난번에 보지 못한 것들이 많이 보여서 수정을 하기로 했다.

 

발견된 문제점

1. 화면을 확대하면  text 및 버튼이 text박스 밖으로 넘친다. 2. 화면을 확대하면 화면 하단에 주황색 단선이 생긴다.

 

문제가 많은 사이트 하나씩 뜯어고쳐보기

 

📌 text 및 버튼 

 

화면 확대 시 화면이 난리 났다.. 

해결방법 : width btn 크기를 rem 설정을 %로 변경했다.

width: 8rem;  /변경 전

width: 70%; / 변경후

텍스트를 보면 Mountains text는 word-break: break-all 해결완료

word-break: break-all ; / p태그에 적용

 

📌 word-break 

[normal (defualt), break-all]

단어의 줄 바꿈을 제어하는 데 사용된다.

normal : 단어는 줄 바꿈 시점에 따라 바뀐다.

break-all : 단어가 상자의 가장자리에서 끊어질 수 있도록 한다.

 

📌 background: linear-gradient 문제

 

이 문제는 나를 미치게 만들었다.

온갖 코드를 만져도 안된다.

배경에 분명 background: linear-gradient (색상, 색상) 넣었는데 적용이 안된다..

진짜 모든 태그에 다 집어넣어도 어떻게 안 돼서 미쳐버리는 줄 알았다.

Chat gpt에 물어봤는데 내가 질문을 잘못한 건지 똑같은 대답만 돌아온다.

그렇게 미쳐가던 찰나.. 정신을 차리고 background:linear-gradient를 폭풍검색해서 

문서를 다시 읽고 블로그를 참고했다. 

근데 글을 자세하게 다시 읽어보니 방향을 설정하면 될 거 같은 느낌이 들었다. 

바로 코드에 적용해 봤다..

 

 

 

background: linear-gradient(#f9814d, #f8574d);      /변경전

 

background: linear-gradient(to right, #f9814d, #f8574d);         /변경후

 

---

 

 

 

해결완료..

 

 

---

 

조금바뀐 UIcard.html

추가한 내용

1. 이미지에 hover 하면 scale 1.2배 증가 2. 상단에 Travel information animation 추가하여 keyframes 적용

---

화살표는 나중에 javascript 배우게 되면 기능을 조금 더 추가하도록 해보겠다.

빨리 끝낼 생각으로 시작했다 그런데 많은 문제들이 발견되어서 고쳐나가는데 시간이 많이 소비됐다.

하지만, 깔끔한 사이트를  만들어보고 싶어서 끝까지 포기하지 않고 하나씩 고쳐나갔다.

그래도 막상 결과물을 보니 뿌듯하긴 하다. ㅎㅎ..

누군가는 쉬워 보여서 호들갑으로 보이겠지만 코딩 완전 쌩초보인 나에겐 매우 힘들었다..😭

아직 배워야 할게 아주 매우 많이 남아있지만 포기하지 말고 끝까지 노력해 보자