본문 바로가기

개발자182

애니메이션 속성 정리 / 예제 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 애니메.. 2022. 9. 8.
SVG 텍스트 애니메이션 SVG 텍스트 애니메이션 SVG 텍스트에 stroke효과와 애니메이션 효과를 입혀서 예쁘게 만들어보겠습니다. 01. HTML { kimdaewonn } 02. CSS { @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.w.. 2022. 9. 8.
Walking 애니메이션 Walking 애니메이션 걷는 애니메이션을 만들어보겠습니다. 01. 포토샵 포토샵을 이용해 프레임을 나눠서 저장해줍니다. 02. 완성본 step과 stop을 이용해 걸어가는 애니메이션을 완성해줍니다. See the Pen Untitled by kimdaewonn (@kimdaewonn) on CodePen. 2022. 9. 7.
SVG Intro SVG intro SVG 에 대해 알아보는 첫번째 시간입니다. 01. SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. ● 인터넷 익스플로러9 버전 이상부터 지원됩니다. ● XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. ● 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. ● DOM 단위로 컨트롤이 가능하지만 문서 복잡.. 2022. 9. 7.
Parallax Effect 01 패럴랙스 이펙트 01 이번 시간에는 페럴랙스 이펙트에 대해 알아보겠습니다. 패럴랙스 이펙트 01 스크롤을 내리면 scrollTop의 값이 나오고 section별로 offset의 좌표값이 나타나 있습니다. 메뉴를 누르면 부드럽게 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이전과 중복되는 모달박스 코드는 생략하였습니다. { Javascript parallax Effect01 패럴렉스 이펙트 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라 03 section3 승리하면 조금 배울 수 있고 패배하면 모든 것을 배울 수 있다 04 se.. 2022. 9. 6.
슬라이드 유형 01 사이트 만들기 : 슬라이드 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 슬라이드 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 슬라이드 영역 ANIMAL 동물의 왕국 동물의 왕국입니다 자세히 보기 정보 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 } 03. CSS 맞춰놓은 틀에 CSS를 예쁘게 입혀줍니다. { .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background.. 2022. 9. 6.
배너 유형 01 사이트 만들기 : 배너 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 배너 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 배너 영역 동물의 왕국 더 다양한 정보는 유튜브를 통해 제공하고잇습니다. youtube.com 배너 유형01 } 03. CSS 맞춰놓은 틀에 CSS를 예쁘게 입혀줍니다. { .banner__inner { background-image: url(img/banner_bg01.jpg); background-repeat: no-repeat; background-positio.. 2022. 9. 6.
푸터 유형 01 사이트 만들기 : 푸터 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 푸터 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 .. 2022. 9. 6.
Mouse Effect 01 마우스 이펙트 이번 시간에는 마우스 이펙트 대해 알아보겠습니다. 마우스 이펙트 01 동그란 공이 마우스를 따라 다닙니다. 마우스 움직임에 따라 좌표값이 실시간으로 변하며, 특정 위치에 갔을때 여러가지 transform 효과를 줍니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { I determine a future all by myself. 내 미래는 전적으로 나 스스로 만든다. clientX : 0pxpx clientY : 0pxpx offsetX : 0pxpx offsetY : 0pxpx pageX : 0pxpx pageY : 0pxpx screenX : 0pxpx screenY : 0pxpx } 02. CSS 코드 { .mouse__wrap { width: 100%; height: 1.. 2022. 9. 6.
mouseenter / movesover의 차이점 mouseenter / movesover 오늘은 mouseenter / movesover의 차이점에 대해 알아보는 시간을 가지도록 하겠습니다. 01. mouseenter / movesover 이벤트 메서드란? mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave입니다. 일반적으로 mouseOver는 mouseOut와 짝을 이루고, mouseEnter는 mouseLeave와 짝을 이루어 사용합니다. 02. mouseenter / movesover 차이점 두 이벤트를 유사하지만 이벤트 전파와 취소 가능성에 큰 차이가 있습니다. mou.. 2022. 9. 5.
Prettier 설치 및 작동 방법 Prettier설치 과정 및 오류 해결법 오늘은 정렬을 자동으로 해주는 프로그램 Prettier 설치 과정과 오류해결법에 대해 알아보겠습니다. 01. Prettier 설정 Prettier는 VSCode에서 코드를 이쁘게 자동으로 정렬해줍니다. VSCode Extenstion탭에서 검색하여 설치해준 후, 좌측 아래 설정에 들어가서 setting 클릭 후 'editor format on save'를 검색, 체크박스에 체크 해줍니다. 컨트롤+s를 눌러주면 자동정렬이 됩니다. 02. 오류 해결 01번의 과정을 거치면 Prettier기능이 작동합니다. 이게 되지 않는경우 해결법에 대해 순서대로 알아보겠습니다. 02-1. 오류 해결법 다시 검색창에 'json'을 검색하면 Edit in setting.json 파일이.. 2022. 9. 5.
jQuery 스타일 메서드 jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 속성 관련 메서드에는 css() , width()height() 관련, 위치 관련 메서드가 있습니다. 01. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding:"10px"}); 콜백 함수 $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 wid.. 2022. 9. 3.
jQuery 속성 메서드 jQuery 속성 관련 메서드 jQuery 속성 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 속성 관련 메서드에는 attr(), prop()가 있습니다. 01. 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.. 2022. 9. 3.
jQuery 클래스 메서드 jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 클래스 관련 메서드에는 addClass(), removeClass(), toggleClass(), hasClass()가 있습니다. 01. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가 합니다. }); … 내용1 내용2 내용3 01-1. .. 2022. 9. 3.
Slider Effect 03 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 좌로 움직이기(연속) 효과에 대해 알아보겠습니다. 슬라이드 03 2초마다 중앙의 사진이 왼쪽으로 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 .. 2022. 9. 2.
간단한 애니메이션 03 간단한 애니메이션 03 간단한 애니메이션 만들기 세번째 시간입니다. 잔상을 남기며 통통 튀는 공을 만들어보겠습니다. 01. HTML { } 02. CSS { *{ box-sizing:border-box; } body{ background: linear-gradient(to top, #A18CD1 0%, #FBC2EB 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin : 0; padding: 0; } .wrapper{ position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper>.. 2022. 9. 2.
요소 크기 속성 / 메서드 요소 크기 메서드 요소 크기 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 요소 크기 메서드 종류 요소 크기 메서드의 종류를 알아보겠습니다. 속성 및 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 높이(패딩 포함, 보더/마진 미포함) clientTop 요소의 Y축값(부모기준) clientLeft 요소의 X축값(부모기준) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 높이(패딩/보더 포함, 마진 미포함) offsetTop 요소의 X축값(문서기준) offsetTop 요소의 Y축값(문서기준) getBoundingClientRect() 크기 및 위치 02.예제 See the Pen Unt.. 2022. 9. 1.
이미지 / 텍스트 유형 01 사이트 만들기 : 이미지 / 텍스트 유형 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이미지 / 텍스트 유형 만들기 첫번째 시간입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유요한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 } 03. CSS 피그마 수치대로 CSS를 입혀줍니다. { /* fonts */ @im.. 2022. 9. 1.
헤더 유형 01 사이트 만들기 : 헤더 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 헤더 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 } 03. CSS 피그마 수치대로 CSS를 입혀줍니다. { @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-w.. 2022. 9. 1.
텍스트 유형 03 사이트 만들기 : 텍스트 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 텍스트 유형 세번째 시간입니다. 전체 구조는 간단하지만 세부 구조가 좀 까다로워 졌습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달전만해도 여러 원인들로 인해 자 존감이 밑바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속 으로 울고싶다를 외쳤던 저였는데 이제는 조금이나마 이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해 있는 제가.. 2022. 8. 30.
텍스트 유형 02 사이트 만들기 : 텍스트 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 텍스트 유형 두번째 시간입니다. 별 다를건 없습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { ANIMAL 초식 동물 소개하기 초식동물 중 귀여운 동물들을 소개 해보려고 합니다. 잘 봐주세요! 기린 기린입니다기린입니다기린입니다기린입니다 기린입니다기린입니다기린입니다기린입니다 기린입니다기린입니다기린입니다 판다 판다입니다판다입니다판다입니다판다입니다 판다입니다판다입니다판다입니다판다입니다 판다입니다판다입니다판다입니다 토끼 토끼입니다토끼입니다토끼입니다토끼입니다 토끼.. 2022. 8. 30.
텍스트 유형 01 사이트 만들기 : 텍스트 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 텍스트 유형 입니다. 이미지 유형과 별 다를게 없으며 쉽습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 순하고 순둥한 동물들 리스트 입니다. 초식 동물들 초식 동물들 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 더보기 초식 동물들 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 더보기 초식 동.. 2022. 8. 30.
탐색 선택자 jQuery 탐색 선택자 jQuery 탐색 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 탐색 선택자 종류 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다 parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을.. 2022. 8. 30.
필터 선택자 jQuery 필터 선택자 jQuery 필터 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 필터 선택자에는 자식 필터 선택자, 콘텐츠 필터 선택자, 폼 필터 선택자, 가시성 필터 선택자가 있습니다. 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 01. 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li.. 2022. 8. 30.
속성 선택자 jQuery 속성 선택자 jQuery 속성 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 속성 선택자 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되.. 2022. 8. 30.
기본 선택자 jQuery 선택자 jQuery 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자의 형식은 다음과 같습니다. $("선택자") $("#gnb") 01. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + cont.. 2022. 8. 30.
Slider Effect 02 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 좌로 움직이기 효과에 대해 알아보겠습니다. 슬라이드 02 2초마다 중앙의 사진이 왼쪽으로 이동합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 *.. 2022. 8. 29.
Slider Effect 01 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 트렌지션 효과에 대해 알아보겠습니다. 슬라이드 01 3초마다 중앙의 사진이 변화합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 { } 02. CSS 코드 { /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 600px; } .slider { position: absolute; left: 0; top: 0; } .slider::before { position: absolute; le.. 2022. 8. 29.
jQuery 기본 개념 JQuery JQuery에 대해 알아보는 시간을 가지도록 하겠습니다. JQuery를 이용해서 애니메이션 효과를 줘보도록 하겠습니다. 01. JQuery란? 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 직접 코드를 변경하고, 그 결과를 확인할 수 있는 온라인 에디터입니다. 02. 사용법 JQuery를 사용하기 위해서는 JQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다. 현재 1.1.x,2.x,3.x 버전을 지원해주고 있으며 각 버전별로 브.. 2022. 8. 29.
GSAP GSAP GSAP에 대해 알아보는 시간을 가지도록 하겠습니다. GSAP를 이용해서 애니메이션 효과를 줘보도록 하겠습니다. 01. GSAP란? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리 입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사람의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. GSAP는 제이쿼리보다 훨씬 퍼포먼스가 좋고 사용법도 간단합니다 또한 훨씬 부드럽게 표현 가능합니다. 02. 사용법 CDN을 가져와 위에 깔아주고 시작합니다. { } 03. 결과물 2022. 8. 29.

HTML
CSS

JAVASCRIPT

자세히 보기