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. 버튼을 만든다 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..

[기능 구현] 이 버튼효과는 보기에는 약간 복잡해 보이지만 가상선택자 after 와 before을 통해서 간단히 만들수 있다. 구체적인 순서는 1. 버튼 구현 a 태그로 버튼모양 구현 2. after, before을 이용해 border의 모양 바꾸기 a::before 가상선택자로 기존의 a 태그보다 x축으로 넓이가 좀더 길고 y축으로 높이가 좀더 짧은 가상요소를 생성한다. a::after 가상선택자로 기존의 a 태그보다 Y축으로 높이가 좀더 길고 x축으로 넓이가 좀더 짧은 가상요소를 생성한다. 3. transition과 transform 활용 -transform의 scale을 줄이는 효과 를 적용하고 transition으로 부드럽게 사라지도록 한다. after요소는 x축 넓이가 커서 결과적으로 borde..

[구현 효과] 360도 회전하는 원형 모양의 요소 3개를 생성한다. 약간 찌그러진 원형의 모양은 Fancy Border Radius Generator 라는 사이트를 이용해 쉽게 구현할 수 있다. [ https://9elements.github.io/fancy-border-radius/#49.69.55.31--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io [HTML] Loading... [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-conten..

[구성효과] 1. text 색상이 #000 -> #fff로 바뀐다. 2. 마우스가 올라갈 시 버튼 배경의 painting 효과가 나타난다. 두개의 효과 다 transition 을 사용해 구현할수 있고, painting 효과는 넓이가 0%->100% 로 변환 하게 하면 된다. painting 효과는 img 파일. [HTML] Read More Read More [css] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans..