찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 이전 swiper포스팅에서 pagination의 type을 progressbar로 만들어서 로딩바를 만들어봤는데요 2022.06.08 - [플러그인/swiper] - swiper 슬라이더 연결하기 swiper 슬라이더 연결하기 안녕하세요 찐망고입니다. 오랜만...이라는 글을 언제쯤 안쓸 수 있을까요? 중요한건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣 오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다. uiweb.tistory.com swiper autoplay-progress https://codesandbox.io/p/sandbox/5d6tdn?file=%2Findex.html%3A1%2C1 swiper-autoplay-progress CodeSandbox is..

안녕하세요 저는 찐망고이고 오늘은 마우스 커서를 따라다니는 이미지 효과를 만들어 볼건데요.. 이벤트는 mousemove를 사용하고 좌표값을 알 수 있게 pageX와 pageY를 체크하시면 되요 작년 10월에 SELECTO COFFEE 웹사이트가 업데이트 되었는데.. https://www.selecto.co.kr/brand/main.asp 셀렉토커피 커피전문점,카페창업,아메리카노 전문점,브런치 카페,입맛에 따라 골라먹는 커피전문점등 www.selecto.co.kr 요 귀여운 친구가 마우스를 따라다니더라구요~~ 머 아주 간단한 코드로 가능하니까 작업해볼께요 일단 이미지를 넣어야하는 요소가 필요하고 그 요소에 이미지를 담을거고 그친구를 mousemove이벤트를 이용하여 움직일겁니다. // html // jav..

안녕하세요 찐망고입니다.  이전글을 읽고 오시길 바랄게요  flex를 배워보자 - 1원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅uiweb.tistory.com  display: flex를 선언하면 부모요소가 flex-container가 되면서 자식들이 flex-item이 된다고 했는데요 각 flex-item들에게 각각의 속성을 지정할 수 있습니다.  See the Pen flexItem by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스align-s..

안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 참고하시고~~ 2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout() JS) 숫자 카운트 setInterval(), setTimeout() 웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Ma ..

원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 해보려 합니다. 워낙 자세하게 나온 포스팅들이 많지만 시작해보겠어요 예전 학생과의 카톡..내용 float를 배우고 flex를 하고 나면 생각보다 너무 편리해서 학생들이 좋아하고 잘 사용하긴 했는데 중요한건 제대로 알고 써야 하니까~ flex는 display 속성 중 하나이고 flex와 inline-flex가 있어요 block과 inline-block개념이라 생각하시면 되고 잘 모르겠으면 일단 보고오... 2021.12.12 - [WEB/HTML] - inline요소와 block요소 inline요소와 block요소..

안녕하세요 찐망고 입니다. 오늘은 자바스크립트 함수에 대해서 가볍게 포스팅해볼게요 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 코드를 재사용하고 구조화하여 프로그램을 개발하는데 도움을 주는 사용자정의함수와자바스크립트에서 내부적으로 제공하는 내장함수가 있어요function funcName(parameter1, parameter2) { // 함수실행코드 // 결과반환(선택가능)}function addNumbers(a, b) { return a + b;}let result = addNumbers(3, 5);console.log(result); // 8 함수는 함수 선언식과, 함수 표현식이 존재하는데 함수를 선언하고 사용자가 직접 실행할 함수의 이름을 짓거나 ..

자바스크립트에서는 데이터 값을 하나의 목록으로 만드는 배열이 존재합니다. 원래 변수안에 값을 할당할때 하나씩만 가능하잖아요. 근데 여러개의 값을 하나의 변수안에 넣고 싶은거죠.. 좋아하는 과일을 하나만 고를 수 없는 그런 마음? const fruits = ["체리", "망고", "블루베리", "수박"]; 좋아하는 과일의 종류가 많으면 배열을 쓸수록 더 합리적이겠죠? 좋아하는 과일이 10개가 넘는데 변수를 10개를 굳이 만들 필요가 없으니까요 배열을 만들 때는 각괄호 []를 사용합니다. 배열안에 값을 넣으려면 각괄호 안에 값을 입력하고 쉼표로 나눠주면 됩니다. 배열에 들어간 개별 값을 원소(element)라고 불러요 // 배열 표기 const fruits = [ "cherry", "mango", "blue..

안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 반복문(loop)은 "어떤 내용이 true인 동안은 계속 이걸 실행해" 라고 말하는 겁니다. while반복문 가장 간단한 반복문은 while반복문인데요. while반복문은 주어진 조건이 true로 있는 동안은 실행 코드를 반복해서 실행합니다. 그 조건이 false가 되면 하던 일을 중단해가 포함되고 있죠 while(조건식) { console.log("코드실행") // 실행문 i++; // 증가감식 } for문 for반복문을 사용하면 반복문에 사용할 변수를 만들고 조건이 false가 될 때까지 계속 반복합니다. for(초기값; 조건식; 증가감식;) { 실행문; } 반복문은 초기 값을 기준으로 조건식을 실행합니다..

안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 if문 조건문은 "만약 어떤 내용이 참(true)이라면 이걸실행해주고, 참이 아니라면 저걸 실행해 혹은 실행하지마" 라고 말하는 것과 같습니다. 이것을 if문과 if...else문이라고 하는데요 if문은 어떤 내용이 true일 때 특정 코드를 실행할 때 사용하고, if...else문은 어떤 내용이 true일 때 특정 코드를 실행하고, 만약 false라면 다른 코드를 실행할 때 사용합니다. // if문 예시 const name = "제니퍼 애니스톤"; console.log(name.length) if(name.length > 5) { console.log("제니퍼 애니스톤입니다.") } 제니퍼 애니스톤은 공백을..

안녕하세요 찐망고입니다. 오늘은 스코프와 호이스팅에 대해서 포스팅 해보도록 할게요. 자바스크립트에서 스코프는 변수의 유효 범위를 말합니다. 즉, 변수가 어디에서 사용될 수 있는지를 결정하고, 변수가 선언된 위치와 관련이 있어요. 1. 전역 스코프(Global Scope): 전역스코프는 코드의 어디에서든 접근할 수 있는 가장 바깥쪽 스코프인데요 전역 스코프에서 선언된 변수는 어디에서든 참조할 수 있습니다. 2. 함수 스코프(Function Scope): 함수 스코프는 함수 내에서 선언된 변수의 유효 범위를 나타내는데, 함수 스코프에 선언된 변수는 함수 내부에서만 접근 할 수 있으며, 함수 외부에선 접근 할 수 없습니다. 3. 블록 스코프(Block Scope): 블록 스코프는 중괄호({})로 둘러싸인 블록..