Web/인프런
-
아코디언 갤러리 html, css 코드 소스Web/인프런 2022. 1. 20. 21:02
See the Pen 아코디언 갤러리 by seohyeon baek (@100seo) on CodePen. 미리보기에는 이미지 적용이 안되어서 하얀 배경으로 보입니다. 아래 파일을 저장한 뒤 여시면 정상적으로 이미지가 보입니다. *적용예시 1. 개인 혹은 회사 포트폴리오 카테고리 프리뷰 페이지 회사소개-사업분야-갤러리-오시는길-상담문의 2. 제품판매 사이트 카테고리 프리뷰 페이지 ring-necklace-bracelet-earring-contact 3. 카드뉴스 타이틀 페이지 최근글1-최근글2-최근글3-최근글4-최근글5 *코드 관련 1. 이 코드는 코딩웍스(https://www.youtube.com/codingworks)님의 인프런 HTML+CSS+JS 퍼블리싱 강의 예제를 이용해 제작하였습니다. 원 코..
-
@key frame 보더 회전 애니메이션Web/인프런 2022. 1. 13. 17:47
See the Pen radius rotate by seohyeon baek (@100seo) on CodePen. 기본 html 구문 불러오기 Heading Text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel accusantium voluptate molestiae, dolor ullam est laboriosam mollitia voluptatem. Quibusdam beatae dolore, explicabo sunt perferendis in est obcaecati? Earum, porro maiores! Read More Heading Text Lorem ipsum dolor, sit amet consectetur adipis..
-
@keyframe 도형 로딩 애니메이션Web/인프런 2022. 1. 7. 21:34
See the Pen Untitled by seohyeon baek (@100seo) on CodePen. 기본 html 구문 불러오기 css 작업 /*로딩화면이므로 정중앙 배치*/ body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .loading{ /*border: 1px solid red; */ width: 30px; height: 30px; position: relative; } .loading span{ position: absolute; width: 10px; height: 10px; background-color: red; /*loading이라는 이름을 가진 애니메이션을 n초만큼 무한반복 재생시..