이미지 유형2 웹사이트 만들기/ImageType 03 사이트 만들기 _ 이미지 유형03 이번 시간은 이미지 유형 세번째 시간입니다. 5개의 이미지로 구성되어 있으며 마우스 오버시 아이콘과 내용이 출력되게 구성해 보겠습니다. 여태까지는 flex를 사용했지만 이번구조는 flex를 사용하게 되면 2-5번째 이미지를 한 박스로 묶어서 작업하다보니 추후에 불편할 수 있으므로 이번엔 grid를 이용해서 레이아웃을 작업할게요! 앞서 말씀드렸듯 이번 구조는 gird를 이용해서 작업했습니다. 이번 구조는 와이드웹구조라서 기존에 사용하던 1160px의 구조로는 구현할 수 없습니다. 그래서 사용한게 다음과 같은 속성값입니다. .container-fluid{ width: 100%; padding: 0 100px; box-sizing: border-box; } 와이드 웹이다보니 .. 2022. 8. 21. 웹사이트 만들기/ImageType 02 사이트 만들기 _ 이미지 유형02 기존 이미지유형에서 한단계 더 발전한 이미지 유형02에 대해 공부해보겠습니다. 레이아웃이 3개로 늘었고 마우스 오버했을때 효과를 부여해보겠습니다. 이미지 유형01번처럼 카드타입유형02번의 코드를 활용해서 만들어 봅시다. transform: scale(1.05); 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성입니다. * scale() : x축 or y축으로 확대/축소 * rotate() : 지정 요소 회전 * translate() : 요소 x축 or y축으로 이동 * skew() : x축 or y축 기울이기 transition: all 0.6s ease-in; 속성을 서서히 변화시키는 속성입니다. transition: property timing-function.. 2022. 8. 17. 이전 1 다음 반응형
