사이먼's 코딩노트

[transform 예제 만들기] 지난번 배운 transform, translate, transition, scale, opacity, rgba을 응용해서 예제를 하나 만들어보자. 예제의 내용은 아래 사진과 같이 이미지 5장을 화면에 놓고 각 이미지 화면에 마우스 커서를 올려놓았을 때 이미지가 흐려지고 이미지가 확대되면서 버튼이 생기는 것이다. [구조 잡기] 가장 먼저 해줄 일은 5개의 이미지가 위치할 수 있도록 구조를 짜는 일이다. 구조 짜는 방법은 복잡하게 생각하지 않아도되고, 앞서 탑바 제작하듯이 틀만 만들어준다고 생각하면 된다. img태그를 이용해 이미지를 한 번에 바로 insert하지 않고 굳이 구조를 짜서 넣어주는 이유는 img태그는 닫히 태그가 없기 때문에 hover를 적용했을 떄의 커스텀이..

[transfrom & translate & transition] 1. transform 엘리먼트를 변형시킬 떄 사용한다. 위치이동이나 회전 또는 크기를 조절할 때 사용하는 css 속성이다. absolute와 같은 position과 transform은 모두 원하는 위치로 옮기는 속성이지만, 둘을 함께 쓴다면 transform이 위로 오는 경우가 있어서 이럴 때는 position으로 통일시켜서 포지셔닝을 하는 것이 좋다. 2. translate transform의 속성값 중 하나이다. 엘리먼트를 X축, Y축, Z축으로 이동할 수 있는 속성이다. X축으로 이동할 때의 형태는 transform: translateX(X값); 이다. Y축으로 이동할 때의 형태는 transform: translateY(Y값); 이..