SeaPlus

[구현] ul태그 내부에 ul태그를 다시 구현하고 또 ul 태그를 넣는 기초적인 drop down 메뉴 구현 방법이다. 다만 주의할 점은 ul에 포인터가 안 올라가는 위치에 li 리스트가 있다면 dropdown box는 사라져 버린다. 때문에 margin-top으로 위치를 조정하더라도 ul리스트와 li리스트가 겹쳐있어야 한다. 아이콘: Font Awesome (폰트 어썸) Font Awesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 참고: https://www.youtube.com/watch..

[구현] 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. 배경의 원형 모양은 "가상선택자" 를 이용해 구현 circle 요소를 만든뒤 "circle::before" 일때 원형 모양 "circle:hover:before" 일때 card 모양 으로 구현 /* 원형 effect를 적용하기 위한 요소 */ .card .circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; } .card .circle::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #d83133; /* 원형모양 */ ..

[구현] 1. HTML & CSS clip-path 와 hover effect를 적용할 카드를 마크업 하고 css로 스타일링을 한다. 2. clip-path .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9bdc28; clip-path: circle(160px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(310px at 80% -20%); } 요소의 모양을 clip-path를 통해 평상시는 circle(160p..

[구현] 반짝 거리는 효과는 언뜻 보기에 복잡해 보이지만 가상선택자로 가상의 요소를 만들면 쉽게 구현 할수 있다. 1. 버튼을 만든다 2. before 가상 선택자를 사용해 흰색의 그라데이션 가상요소를 생성한다. 3. 가상요소의 위치를 왼쪽 -> 오른쪽으로 이동시킨다. [HTML] shine Button shine Button [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } a { position: relative; padding: 15px 30px..

[HTML] Button [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #000; } a { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; background: linear-gradient(90deg, #03a9f4, #f441f4, #ffeb3b, #03a9f4); /* 배경사이즈를 x축, y축으로 4배 늘린다. */ background-size: 400%; color: #fff; border-radius: 30px; text-align: ce..

[구현] 1. HTML, CSS 로 시간값을 넣을 시계틀 을 생성한다. 2. 시계요소의 반사 효과는 -webkit-box-reflect를 사용해서 구현한다. -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); 3. 시간, 분 , 초 는 new Date() 함수와 setInterval()함수를 통해 구현한다. function clock() { // 시,분,초 선택자 변수 생성 var hours = document.getElementById("hour"); var minutes = document.getElementById("minutes"); var seconds = document.getElementById("seconds"); //n..

[구현] 크게 4개의 영역으로 구분한뒤에 구현 할 수 있다. [HTML] Instagram [css] @import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;500;600;700;800;900&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Bitter", serif; } /* 가운데 정렬을 위함 */ .display-center { display: flex; justify-content: center; align-items: center; } .container { width: 100%; height: 100vh; backgroun..

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

[구현] 1. 물방울의 모양 표현 물방울 구현을 위한 border-radius 모양이 복잡해 보이는데 이는 Fancy border radius generator 사이트를 통해 간단히 만들 수 있다. [ https://9elements.github.io/fancy-border-radius/#68.50.36.24--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 2. 물방울 질감 표현 물방울 질감은 box-shadow를 이용해 표현한다. inset 은 그림자를 요소 내부에 만들때 쓰는 명령어 인데 이를 이용해 물방울 질감을 표현할수 있을 만큼 box-shad..