SeaPlus

[구현] 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미한다. - SVG태그는 SVG그래픽을 담기 위한 요소이다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있다. - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그이다. 2. SVG의 stroke 속성 - stroke : 선색 속성 - stroke-width : 선 굵기 속성 - stroke-linecap : 선의 양쪽 끝 모양 속성 - stroke-dasharray : 점선처리 속성 ( 홀수번째 적은..

[구현] 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는 스페이스와 탭,줄바꿈, 자동 줄 ..

[구현] 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..