Giant Danio Fish
본문 바로가기

CodingKing168

CSS 애니메이션 - 3D cube CSS 애니메이션 연습하기 큐브를 만들어서 3d효과로 입체적으로 만들어보겠습니다. 결과 See the Pen 3D cube by younghwan12 (@younghwan12) on CodePen. HTML 정육면체를 만들기 위해서 div박스를 6개 만들어줍니다. 북극꼼 CSS 배경색을 넣고 z축까지 위치를 설정해서 정육면체를 만들어줍니다. 그리고 각각의 면에 애니메이션을 각각 줘서 위 아래로 커졌다가 작아지는 애니메이션을 만들어줍니다. body { background-color: gray; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: rel.. 2022. 9. 22.
마우스 이펙트 - 이미지 효과 마우스 효과 마우스 이펙트 - 이미지 효과 가운데 이미지를 하나 더 넣어서 마우스 움직일때 가운데 이미지만 조금 움직여 이질감(?)이 느껴지는 효과를 넣어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 커서 한개와, 가운데 이미지를 넣을것이므로 figure태그를 만들어줍니다. 소스 보기 The present and the future are somehow connected. 현재와 미래는 어떻게든 연결되어 있다. CSS 작성 이미지를 정가운데에 만들어줍니다. 소스 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; fle.. 2022. 9. 22.
마우스 이펙트 - 조명 효과 마우스 효과 마우스 이펙트 - 조명 효과 오늘은 배경을 어둡게 만들고 마우스에 디자인을해서 마우스 영역이 조명이 들어가서 밝은 이미지가 나오는듯한 조명효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 커서는 한개만 만들것이므로 하나 만들어줍니다. 소스 보기 There is no masterpiece made by a lazy artist. 게으른 예술가가 만든 명작은 없다. CSS 작성 배경을 평소보다 좀더 어둡게 하고 마우스 커서에 이미지를 넣고 전체사이즈와 맞게 사이즈를 맞추고 고정시킨뒤 zindex 값을 -1을 넣어 보이지 않게 설정후 마우스를 돋보기 모양처럼 만들게 해서 그영역만 이미지가 보이게 합니다. 소스 보기 body::after { background: rgba.. 2022. 9. 22.
CSS 애니메이션 - (기름에튀기는 글자 CSS 애니메이션 연습하기 글씨가 통통 튀는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen bouncing_text by younghwan12 (@younghwan12) on CodePen. HTML 제목 h1태그에 span태그를 각각 세개 넣어줍니다. 북 극 꼼 CSS 각 글자들의 딜레이를 줘서 순서를 다르게 하고, 바닥에 text-shadow로 그림자를 줍니다 html,body { width: 100%; height: 100%; background: linear-gradient(120deg, gray 25%, gold 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 .. 2022. 9. 21.
CSS 애니메이션 - 마우스 오버효과(3D첨가) CSS 애니메이션 연습하기 마우스 오버 효과에 3D를 간단하게 첨가해서 멋진 애니메이션 효과를 만들어 보겠습니다. 결과 See the Pen MouseHoverEffect by younghwan12 (@younghwan12) on CodePen. HTML 사진4장을 각각 두장씩 한 태그로 묶어서 만들어줍니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS 사진 두장을 앞뒤로 겹치고 뒤집었을때 뒷면을 안보이게 설정합니다. @font-face { font-family: 'LocusSangsang'; font-we.. 2022. 9. 20.
패럴랙스 이펙트 - 이질감 효과 패럴랙스 효과 패럴랙스 이펙트 - 이질감 효과 사진이나 글씨를 고정시키지 않고 스크롤 위치값에 따라서 위치가 살짝 변해 이질감을 주는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들고 보기 편하게 하기 위해서 스크롤 탑값을 보여주는 태그를 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section.. 2022. 9. 20.
CSS 애니메이션 - 꿀렁이는 원 CSS 애니메이션 연습하기 원이 꿀렁이는 애니메이션을 만들어보겠습니다. 결과 See the Pen Wave Animation by younghwan12 (@younghwan12) on CodePen. HTML(PUG) PUG를 사용했습니다. HTML로 보고싶으시다면 코드팬에서 컴파일 해보시기 바랍니다. div.circle-wrap -for (var x = 1; x 2022. 9. 19.
SCSS 설치와 기본 세팅 [VSCode] SCSS 설치 및 기본 세팅 안녕하세요 오늘은 평소 사용하던 CSS가 아닌 SCSS를 설치후 기본 세팅에 대해서 알려드리겠습니다. 1. VSCode 확장 프로그램에 들어가서 Sass를 검색후 설치해 줍니다. 2. VSCode 확장 프로그램에 들어가서 Live Sass Compiler도 검색후 설치해 줍니다. 3. 아래쪽을 보셔서 Watch Sass가 나온다면 설치가 잘 된겁니다! 4. SCSS파일로 만드셔서 작성하시면 끝! VSCode는 SCSS를 사용 할수 없기 때문에 CSS로 컴파일 하신 후 사용하셔야한다는점! SCSS파일을 저장하면 자동으로 CSS파일로 컴파일 할 수 있는 방법도 있습니다!. 1. F1을 누른 후 Preferences:open user settings(JSON) 을 .. 2022. 9. 19.
슬라이드 이펙트 - 이미지 슬라이드(버튼) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 버튼과 배경사진 바뀌는 사진을 만들어줍니다. 소스 보기 prev next CSS 작성 CSS는 이전 예제와 크게 바뀐거 없이 버튼만 만들어줍니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slid.. 2022. 9. 18.
마우스 이펙트 - 마우스 따라다니기(GSAP) 마우스 효과 마우스 이펙트 - 마우스 따라다니기(GSAP) 오늘은 GSAP를 사용해서 마우스 커서를 부드럽게 따라다니는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 원 두개가 따라다니게 만들것이므로 커서1,커서2를 만들어주고 글이 나올 박스를 하나 만들어줍니다. 소스 보기 There is no masterpiece made by a lazy artist. 게으른 예술가가 만든 명작은 없다. CSS 작성 커서를 없앤 후 따라다닐 원을 만들어줍니다. 그리고 active1,2,3이 붙었을 때 변하는 모양을 디자인 해줍니다. 소스 보기 /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-.. 2022. 9. 18.
패럴랙스 이펙트 - 나타나기 패럴랙스 효과 패럴랙스 이펙트 - 나타나기 이번에는 사진들이 평소에 보이지 않다가, 화면을 스크롤해서 가운데쯤 나타났을때 사진이 나타나는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 메뉴바를 지워주고 각각의 섹션들만 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머니에 있는.. 2022. 9. 18.
MySQL Basic MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MySQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. https://www.mamp.info/en/downloads/ MySQL 실행 윈도우 : cd .. 2022. 9. 14.
마우스 이펙트 - 마우스 따라다니기 마우스 효과 마우스 이펙트 - 마우스 따라다니기 마우스 커서를 따라다니는 마우스에 효과주는법을 배워보도록 합시다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 배경에 사진을 넣도록 배경과, 글씨들 중간중간 중요한 단어들을 span으로 처리했습니다. 좌측 아래에 마우스커서의 위치를 나타내는 메서드들을 작성할 박스를 만들어줍니다. 소스 보기 I haven't failed. I've discovered 10,000 ways that don't work. 나는 실패한 게 아니다. 나는 잘 되지 않는 방법 1만 가지를 발견한 것이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px sc.. 2022. 9. 12.
사이트 만들기 - 실전 유형01 사이트 만들기 실전 연습 사이트 Figma HTML 보기 소스 보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 alcohol journalist WHISKEY SITE WORLD BEER BANNER FOOD Log in 슬라이드 영역 alcohol variety of drinks 세상에 아주 다양한 술들이 있습니다. 지금 만나러 가시죠 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 WHISKEY 평소에 흔히 볼수있는 위스키 리스트입니다. JACKDANIELS 잭다니엘 블랙라벨입니다. 도수는 40도 최소 4년 숙성한 위스키로서, 콜라를 섞어 잭콕으로.. 2022. 9. 12.
패럴랙스 이펙트 - 숨김 메뉴 패럴랙스 효과 패럴랙스 이펙트 - 숨김 메뉴 평소에 메뉴바가 숨겨져 있다가, 아래쪽으로 진행할 때는 숨겨져 있고, 스크롤을 위로 올렸을때 메뉴가 나타나도록 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 상단의 메뉴바와, 맨 밑 가운데 top버튼(누르면 맨 위 상단으로 올라가는 버튼) 섹션으로 구조를 만들었습니다. 소스 보기 Top 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7.. 2022. 9. 11.
패럴랙스 이펙트 - 사이드 메뉴 패럴랙스 효과 패럴랙스 이펙트 - 사이드 메뉴 이번에는 메뉴바를 오른쪽 사이드에 두고 반응형 효과를 주어서 이쁜 사이드 메뉴를 만들어 보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 구조는 예제1번과 같고, 상단에 있던 메뉴바를 사이드 메뉴로 만들었습니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈.. 2022. 9. 8.
CSS 애니메이션 - 걷기 애니메이션 CSS 애니메이션 연습하기 오늘은 걸어가는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen walkingAnimation by younghwan12 (@younghwan12) on CodePen. HTML 버튼을 두개 만들어줍니다. & Start Stop CSS 사진을 쭉 가로로 길게 만들어주고 800px씩 우에서 좌로 이동하는거로 만들어줍니다. .step { height: 700px; background: #43dcf6; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; left: 50%; top:.. 2022. 9. 7.
CSS - 애니메이션의 모든것 animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7.
CSS(SVG) 애니메이션 - 글씨 효과 SVG 애니메이션 연습하기 SVG를 이용해 애니메이션 글씨 효과를 연습해보겠습니다 결과 See the Pen Text Animation by younghwan12 (@younghwan12) on CodePen. HTML svg에 박스 크기를1320 300으로 지정해주고, x, y 50프로 middle을 이용해 가운데로 맞춰주고 y축을 따라 40px씩 따라주게 갑니다. 김치치즈스마일 CSS 0퍼 70퍼 80퍼 100퍼로 나누어준뒤 선을따라 그려지면서 글씨 틀을 잡은뒤 마지막에 테두리가 사라지면서 나타나고 안에 색이 차는 애니메이션을 만들어줍니다. @font-face { font-family: 'OKDdung'; font-weight: normal; font-style: normal; src: url('ht.. 2022. 9. 7.
SVG - 알아보기 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) 소스보기 원형(circle, ell.. 2022. 9. 7.
패럴랙스 이펙트 - 메뉴 이동 패럴랙스 효과 패럴랙스 이펙트 - 메뉴 이동 오늘은 메뉴바를 누르면 해당 구역으로 이동하고, offsetTop값을 이용해 해당 영역에 가면 메뉴에 불이 들어오는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 HTML 구조는 예제1번을 나타내는 설명 nav와, 사진과 설명이 나오는 parallax__cont, offset메뉴바가 나오는 parallax__info 세개로 구성하였습니다. 소스 보기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 .. 2022. 9. 6.
사이트 만들기 - 푸터 유형 사이트 만들기 슬라이드 유형01 Figma HTML 작성 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨텍트 유형02 푸터 이메일 유형03 2022 LeeYounghwan. Portfolio is Power All rights reserved. CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/Ne.. 2022. 9. 5.
사이트 만들기 - 배너 유형 사이트 만들기 배너 유형01 Figma HTML 작성 배너 영역 블로거 이영환 더 다양한 정보는 블로그를 통해 제공하고 있습니다. https://younghwan112.tistory.com/ 배너 유형01 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .blind{ position:absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden } /* 이미지 대체(ir) */ .ir { display: block; overflow: hidden; font-size: 0; line-h.. 2022. 9. 5.
사이트 만들기 - 슬라이드 유형 사이트 만들기 슬라이드 유형01 Figma HTML 작성 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 작성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } .blind{ position:absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; over.. 2022. 9. 5.
mouseenter 과 mouseover 의 차이점 mouseenter 과 mouseover 메서드의 차이 안녕하세요 오늘은 mouseenter 과 mouseover 메서드의 차이점을 알려드리겠습니다. mouseover 와 mouseenter 둘 모두 이벤트 메서드 addEventListener에서 사용하는데요, 둘 모두 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다 라는 공통점을 가지고있는데요, 차이점이란 mouseover은 버블링 효과를 가진다는 점입니다. 버블링 효과에 대해선 아래쪽 예시를 통해 쉽게 알려드리겠습니다. 예시 See the Pen mouseover by younghwan12 (@younghwan12) on CodePen. mouseenter 요소에 마우스 포인터가 진입하면 발생합니다. 오로지 자기 자신에게 .. 2022. 9. 5.
Prettier 적용 하기 (이렇게 설치하세요!) [VSCode] Prettier 적용 방법 안녕하세요 오늘은 코드를 자동적으로 정렬 해주는 VSCode Extensions중 하나인 Prettier 적용하는 방법을 알려드리겠습니다. 1. VSCode 확장 프로그램에 들어가서 Prettier을 깔아줍니다. 2. 설정(Manage -> Settings)에 들어가서 'editor format on save' 검색 후, 체크를 해줍니다. 3. F1을 누른 후 Preferences:open user settings(JSON) 을 찾아준 후 4. editor.formatOnSave이 true인지 확인해보시면 됩니다. (아니라면 true로 바꿔줍니다.) 5. 완성 ps. 만약 4번까지 하셨는데 저장했을 때 자동적으로 줄 정리가 되지 않으신다면, 아래 코드를 추가해서.. 2022. 9. 5.
jQuery - 스타일 메서드 jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드에 대해서 알려드리겠습니다. CSS() 메서드 메서드 종류 설명 width() 요소의 가로 길이를 취득, 변경할 수 있습니다. innerWidth() padding이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth() border와 margin이 적용된 요소의 가로 길이를 취득, 변경할 수 있습니다. outerWidth()는 요소의 width 값 + 좌,우 border 값 outerWidth(true)는 요소의 width값 + 좌,우 margin 값 height() 요소의 높이를 취득 변경할 수 있습니다. innerHeight() padding이 적용된 요소의 높이를 취득, 변경할 수 있습니다. outerHeight.. 2022. 9. 3.
jQuery - 속성 메서드 jQuery 속성 관련 메서드 jQuery 속성 관련 메서드에 대해 알려드리겠습니다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성 return attribute(속성) .. 2022. 9. 3.
jQuery - 클래스 메서드 jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드에 대해서 알려드리겠습니다. addClass() 메서드 요소에 class속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className){ // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class속성 return class 속성 // 각 div에 속성을 추가합니다. }); .... 내용1 내용2 내용3 예시 addClass() 메서드를 이용해 간단한 예시로 보여드리겠습니다. 결과 See the Pen jQuery_class by younghwan12 (@younghwan12) o.. 2022. 9. 3.
CSS 애니메이션 연습하기 03 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 공이 움직이며 잔상이 남기는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen bouncing_ball by younghwan12 (@younghwan12) on CodePen HTML HTML에 wrapper라는 태그를 5개 만들고 그안에 div 태그를 만들어줍니다. CSS 배경색을 넣은뒤 5개의 원을 각자 위치를 잡아주고 애니메이션효과를 주면서 공이 점점 작아지며 흐릿해지게 만들어 잔상처럼 보여주게 만들어줍니다. * { box-sizing:border-box; } body { background: linear-gradient(to top, yellowgreen 0%, pink 100%); width: 100vw; hei.. 2022. 9. 2.

광고 준비중입니다