SeaPlus

[구현] 1. HTML & CSS 아이콘: 아이온 아이콘(ionicons) 폰트 어썸과 동일하게 CDN을 제공해서 사용법도 간단하고 깔끔한 아이콘도 많다. 일반적으로 어떠한 크기던 얼마든지 변경 가능하고 CSS를 이용해 다양한 효과를 줄 수 있는 게 특징이다. Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io white-space : nowrap white-space는 스페이스와 탭,줄바꿈, 자동 줄 ..

[구현] 1. Card 요소들을 3D 로 구현한다. [transform-style] 3D공간에서 변경된 3차원 좌표를 하위 자식요소에게 전달할 것인지의 여부를 결정하는 속성 flat 하위요소들은 상위요소늬 3D좌표와 상관없이 2D영역에 표시된다. preserve-3d 부모요소의 3D 좌표를 전달받아 3D 형태로 표현된다. 자식요소 중 3D로 표현하고싶은 요소가 있다면 부모요소는 반드시 "preserve-3d" 를 이용해야 한다!! [translate3d] 3d로 표현하기 위해 현재 위치에서 해당 요소를 주어진 x축, y축 , z축 의 거리만큼 이동시킨다. perpective(): 메소드를 사용하여 원근감을 표현가능하다. transform: perspective(500px) translate3d(0, 0,..

[기능 구현] 1. 배경 blur 처리 backdrop-filter:blur(정수px) 를 통해서 배경에 blur 효과를 준다. 2. blur처리를 해제 하는 원형 모양 생성 masking 이란 요소나 이미지의 선택된 부분을 브라우저 화면에 표시하고 나머지는 숨길수 있는 기술이다. 이러한 마스킹은 페이지의 이미지 또는 다른 요소의 일부를 숨기기 위해 PNG이미지, css 그라디언트, svg 요소를 사용하여 수행된다. CSS 그라디언트를 통해 마스킹 할때는 mask-image: 그라디언트 종류(위치값, 그라디언트 시작시작색상, 그라디언트 종료색상); 으로 표현합니다. 이때 black 은 이미지, 요소를 보여주는 색상 투명한 항목은 이미지,요소를 숨기는 색상 입니다. EX) mask-image: radial..