반응형 Site 만들기/Image 유형3 이미지 유형03 사이트 만들기 : 이미지 유형3 이번 유형은 hover기능이 들어간 이미지 유형으로, 이미지 하단에서 블러 처리가 된 박스가 올라옴과 동시에 이미지 우측에서 관련 sns로 이동하는 아이콘이 나오도록 제작되었습니다. 이번에는 flex기능이 아닌 grid기능을 사용하여 이미지 위치를 조정하였습니다. HTML 5개의 article로 태그를 구성하였으며, 첫 번째 이미지는 background로 삽입하여 주석처리 해주었습니다. 화려한 색감 색감이 화려한 사진들을 모아봤습니다. 오래보면 눈이 피로해질 수 있으니 주의하세요! Colorful 색감이 화려한 사진들을 모아봤습니다. 오래보면 눈이 피로해질 수 있으니 주의하세요! 페이지이동 페이지이동 페이지이동 페이지이동 페이지이동 Colorful 색감이 화려한 사진들을 .. 2022. 8. 20. 이미지 유형02 사이트 만들기 : 이미지 유형2 3개의 마우스오버 설정이 적용된 이미지 유형입니다. HTML 3개의 article 영역과, 이미지 유형 1번과 다르게 html에 직접적으로 img태그를 넣어 이미지를 삽입하였습니다. 고슴도치 고슴도치의 가시는 주인도 찌를 수 있으니 항상 조심해야해요! 고슴도치 1기 동동일 자세히 보기 고슴도치 2기 동동이 자세히 보기 고슴도치 3기 동동삼 자세히 보기 CSS 이번 이미지 유형은 마우스 오버 효과를 넣어 이미지 위에 마우스를 올려놓으면, 이미지 설명과 자세히 보기 텍스트가 안으로 천천히 나타나도록 설정하였습니다. 이미지 또한, 마우스 오버시 천천히 확대되도록 transform, transition 속성을 사용하여 설정하였습니다. 텍스트 박스에 blur 효과를 주어 좀 더 감.. 2022. 8. 17. 이미지 유형01 사이트 만들기 : 이미지 유형1 카드 유형1번과 비슷한 유형으로, 이번엔 이미지 내부에 텍스트와 버튼이 위치하도록 하였습니다. HTML 2개의 article 영역과 모두를 포함하는 container로 기준을 잡아주었습니다. 온라인 강의 온라인 강의는 상황에 따라 매우 효율적인 방법입니다. 온라인 강의 인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다. 자세히 보기 온라인 강의 인터넷을 이용하여 교육자가 진행하는 사이버 원격 수업이다. 온라인 강의 혹은 사이버 강의이라고도 하며, 줄여서 인강, 싸강이라고 한다. 자세히 보기 CSS 이번 유형은 html에 img태그를 사용하지않고, css에서 background: url을 사.. 2022. 8. 17. 이전 1 다음 반응형
