Front-end Developer/CSS (6) 썸네일형 리스트형 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-al.. HTML, CSS 사용하여 UICARD 만들기 📌 HTML CSS 사용해서 UI CARD 만들기 DOCTYPE html> CardUI T E A V E L Mountains Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, eos deleniti. Praesentium officia reiciendis eius, provident ratione Read more TEAVEL City Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, eos deleniti. Praesentium officia reiciendis eius, provident ratione Read more TEAVEL Coast Lore.. HTML, CSS 사용하여 프로필 만들기(3) 3번째 프로필 카드 만들기 오늘도 핀터레스트에서 이미지를 찾아서 비슷하게 만들기 시작 당일에 배운 걸 까먹지않기위해 되도록이면 배운걸 사용할 수 있는 이미지를 선택했다. [background, opacity, display:flex 등] HTML코드 DOCTYPE html> profile_card2 Dear JJangu Web Developer CSS코드 * { margin: 0px; padding: 0; box-sizing: border-box; } body { } .main-box { background-image: url(./석양\ 일러스트\ ai\ 무료다운로드\ free\ sunset\ image\ download\ -\ \ Urbanbrush.jfif); height: 100vh; /* 전체 덮.. 이전 1 2 다음
