반응형 Problem Solving♡2 버튼 등에 mouseover/mouseout 시 사진이 바뀌는 동작 🔷산리오 홈페이지 카피코딩 중 추가적으로 발생한 문제 마우스 오버 시 변하는 사진!🔸문제 발견산리오 카피코딩을 진행하던 중 place more 버튼의 우측에 있는 화살표가 img 형식으로 mouseover 시 검은 화살표에서 하얀 화살표로 변하는것을 보았다.🔸문제 해결해결을 위해서 CSS를 사용해서 할 수도있지만 JS를 배운사람으로서 번잡하게 CSS로 할게 아니라 JS를 사용하는 것이 맞다고 생각했다. JS의 기능 중 "classList/add()/remove()" 기능을 사용하기로 했다. 기존 HTML 에 검은색 화살표로 이미지가 들어가 있으니 JS로 mouseover 시 검은색 화살표는 display:none; 으로 없애주고 ::after{url(하얀색 화살표)}로 하얀색 화살표 사진이 나타나게 하여.. 2023. 8. 16. 반응형 웹 요소의 가로/세로 길이를 함께 변형하고자 할 때. 🔷요즘 초등학생들 사이에서 인기인 sanrio의 홈페이지를 카피 코딩하였다. 🔸문제 발견 산리오코리아 홈페이지를 카피코딩 하던 중 위 사진 요소를 / 요소로 작업하였고 태그 안에 따로 요소로 넣지 않고 태그에 background:url() 로 각 사진을 넣었다. 확인해보니 실제 홈페이지에서는 태그로 작업을 하였다. 태그에 background:url() 로 작업을 했다보니, 반응형을 만들 때 넓이는 줄어드나 높이는 줄어들지 않는 문제점이 발견되었다. 태그로 했다면 img 는 부모태그의 넓이가 줄어듦에 따라서 img 의 넓이가 줄어들며 높이도 함께 줄어들었을텐데 에 background:url()을 했기 때문에 높이는 줄어들지 않은 것이다. 🔸문제 해결 해당 문제를 해결하기 위해서는 창의 가로길이가 줄어들면 .. 2023. 8. 16. 이전 1 다음 반응형
