목록CODE (30)

멋진 개발자가 되고 싶어

[codepen] 오픈 소스 활용 시 주의할 점

✏️코드펜 오픈 소스 활용 시 주의할 점 프로그래밍을 하다보면 코드펜과 같은 오픈 소스를 활용할 경우가 자주 발생한다. 하지만 이는 다른 사람의 저작물을 사용하는 것이므로 이와 관련된 사항을 확인하고 제대로 명시해주어야 한다. 코드펜에서 라이센스와 관련된 내용을 확인하는 방법에 대해서 정리해보았다. 코드펜 라이센스는 어떻게 확인하는가? 이용을 원하는 코드펜 페이지로 이동한다. 왼쪽 하단에 comments 버튼을 클릭한다. 클릭 후 뜨는 모달창 가장 하단에 lisence를 확인한다. lisence 저작권과 관련된 내용이 명시되어있다. 저작권과 관련된 내용을 잘 읽어보고 본인의 소스코드에 명시하는 것이 좋다. 저작권 표시는 소스코드의 최상단에 하는 것이 원칙이다. ✅참고자료 백엔드 맛보기 | 로그인 화면 꾸미기
CODE/유용한 정보 2023. 1. 18. 13:24
자료구조란 무엇인가? (추상적 자료구조, stack, queue, LIFO, FIFO)

✏️자료구조 ADT ABSTRACT DATA TYPE의 약자 추상적 자료구조를 의미한다. 자료구조는 왜 알아야하는가? 자료구조에 대한 이해가 있으면 프로그램을 보다 쉽고 효율적으로 제작할 수 있게된다. 자료구조의 종류 배열 (ARRAY) 리스트 (LIST) 단일 연결 리스트 이중 연결 리스트 스택 (STACK) 해쉬 테이블 (HASH TABLE) STACK 뒤로 가기, 되돌리기와 같은 기능에 사용한다. 데이터 입출력 방식이 LIFO 이다. LIFO LAST IN FIRST OUT의 약자 마지막에 입력된 데이터가 가장 처음 출력되는 방식을 의미 후입선출 QUEUE 이메일 전달, 푸쉬 알림 같은 기능에 사용한다. 데이터 입출력 방식이 FIFO 이다. FIFO FIRST IN FIRST OUT의 약자 처음 입..
CODE/용어 정리 2023. 1. 17. 11:32
[gsap] gsap의 기초 (gsap에서 자주 쓰는 코드)

gsap의 기초 greensock 공식문서 gsap의 기초를 설명해주는 유튜브 동영상 강의를 시청하며 정리한 내용이다. 자세한 내용은 아래의 강의링크를 클릭하면 해당 동영상으로 이동할 수 있다. 강의 링크 1강 to, from 2강, timeline 3강, fromTo 4강, stagger 5강, stagger 응용 6강, 스크롤트리거 기초 7강, 스크롤트리거, 토글액션 설치 npm i gsap --save gsap.to() gsap.to('적용시킬 대상 class', { x: x축으로 이동시키고 싶은 정도(숫자), rotation: 회전시키고 싶은 정도(숫자), duration: 애니메이션을 적용시킬 시간(숫자), }) 상기내용의 재생 gsap.from() gsap.from('적용시킬 대상 class'..
CODE/라이브러리 2023. 1. 11. 20:29
[codepen] 코드펜 코드 복사해와도 안될 때 (코드펜에 적용된 라이브러리 찾는 법)

코드펜에 적용된 라이브러리 찾는 법 프로그래밍을 하다보면 코드펜에서 소스코드를 옮겨올 때가 많다. 하지만 나의 프로젝트에서는 코드가 제대로 작동하지 않는 경우가 흔하게 발생한다. 그럴 때는 라이브러리가 모듈로 삽입되지 않은 경우가 대부분이다. 이때 코드펜에 적용된 라이브러리를 확인하고 자신의 프로젝트에 적용하는 방법에 대해서 기록해봤다! 원하는 코드펜 창 켜기 우측상단에 settings 클릭 (css 라이브러리의 경우) css 탭의 Add External Stylesheets/Pens 확인 (js 라이브러리의 경우) js 탭의 Add External Scripts/Pens 확인 하단에 들어있는 링크들은 cdn으로 추가된 라이브러리 해당 링크를 참고하여 본인의 프로젝트에도 적용
CODE/유용한 정보 2023. 1. 11. 10:48
button의 type에는 어떤 것이 있을까?

✏️button 태그 html 태그 중 하나인 button에는 어떤 타입이 존재하는지 알아보자. 속성값 설명 button 해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시함. submit 해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시함. reset 해당 버튼이 폼 데이터를 초기값으로 리셋하는 리셋 버튼(reset button)임을 명시함. reset을 사용하면 폼에 있는 정보를 전부 날려버리기 때문에 사용에 유의하는 것이 좋다. ✅참고자료 TCP SCHOOL http://www.tcpschool.com/html-tag-attrs/button-type 버튼의 속성에 대해서 알고 싶다면 아래의 링크로 들어가서 확인해 볼 수 있다...
CODE/html 2022. 12. 8. 10:50
[css] 반응형 정사각형 만들기

반응형 정사각형으로 만들고 싶은 부분(.square)에 아래와 같이 스타일을 적용하면 된다. .square { background-color: #0f6674; width: 100%; } .square:after { content: ""; display: block; padding-bottom: 100%; } 자세하게 알고 싶다면 아래의 코드펜을 참고하면 된다. See the Pen Responsive Square by bbungbbun (@bbungbbun) on CodePen.
CODE/css 2022. 12. 7. 19:30
이전 Prev 1 2 3 4 5 Next 다음