SITE/Image Type3 웹사이트 만들기/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. 웹사이트 만들기/ImageType 01 사이트 만들기 _ 이미지 유형01 이번엔 새로운 유형인 이미지 유형에 대해 알아보겠습니다. 기존에 했었던 카드타입과 굉장히 유사했던 부분이라 어렵지 않게 따라하실 수 있을거에요. 기존 카드타입01번과 레이아웃은 크게 다르지 않으므로 카드타입01번의 코드를 조금 활용해서 작업했습니다. background: url(이미지경로) no-repeat center; 이미지 위에 글씨를 나타내기 위해서는 여태까지 position을 이용했었는데요. 이번에 새롭게 등장한 이녀석은 배경 자체에 그림을 입히는 방법입니다. no-repeat과 center는 선택사항이고, url()안에 이미지경로만 입력해주면 원하는 그림을 단색배경대신 사용할 수 있습니다. * no-repeat: background-repeat속성에 해당하는 .. 2022. 8. 17. 이전 1 다음 반응형
