![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/kJDqx/btsHLVi7Zrx/KE24YtpkMA14g78M772oUk/img.png)
안녕하세요 찐망고 입니다.오늘은 두개의 swiper를 이용하여 탭을 만들어볼건데요. 참고 사이트는 구루미비즈입니다. AI 화상 솔루션 구루미비즈AI화상상담솔루션, AI교육, AI서비스 구축을 위한 최적의 AI화상플랫폼biz.gooroomee.com 먼저, 각각의 Swiper 코드부터 살펴볼까요?const swiper01 = new Swiper(".s01-swiper", { slidesPerView: 1.3, spaceBetween: 20, pagination: { el: ".s01-swiper .swiper-pagination", type: "progressbar", }, breakpoints: { 1281: { ..
안녕하세요 찐망고입니다. addEventListener()는 JavaScript에서 이벤트 처리를 위해 사용되는 메서드인데요. 이 메서드를 사용하면 HTML 요소에 이벤트 리스너를 추가할 수 있습니다. // element.addEventListener(event, function, useCapture); window.addEventListener('scroll', function() {}) function toggleOnClass() { header.classList.add("on"); } const btn = document.querySelector("button") btn.addEventListener("mouseenter", toggleOnClass) 클릭이벤트 (click): 사용자가 마우스로 요..
안녕하세요 찐망고입니다. CSS 도 선택자가 중요하잖아요! 선택자 관련 CSS 만 해도 엄청 많죠~ `document.querySelector()`는 웹 개발에서 사용되는 JavaScript의 메서드 중 하나입니다. 문서 객체 모델(Document Object Model, DOM)에서 요소를 선택하는 데 사용하죠. 이 메서드는 CSS 선택자를 통해 문서 내에서 요소를 선택하고 반환하는데요, CSS선택자를 사용하여 원하는 요소를 찾을 수 있습니다. 일치하는 요소가 없는 경우엔 `null`을 반환합니다. const elementId = document.querySelector("#myElement"); // id선택자 요소 선택 const elementClass = document.querySelector(..
안녕하세요 찐망고입니다. 오늘은 자바스크립트 문자열 관련 속성과 메서드를 따로 포스팅 해보려 합니다. 1. 문자열의 길이 length는 함수는 아니고, 숫자가 저장되는 프로퍼티 문자열의 길이를 저장 (갯수) const txt = "Javascript"; console.log(txt.length); // 10 2. 특정 글자에 접근하기 문자열 내 특정 위치에 있는 글자에 접근하려면 [, ] 대괄호를 이용하거나 str.charAt() 메서드이용 위치는 0부터 시작. let str = "Javascript"; //첫 번째 글자 console.log( str[0] ); // J console.log( str.charAt(0) ); // J // 마지막 글자 console.log( str[str.length - ..
안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 if문 조건문은 "만약 어떤 내용이 참(true)이라면 이걸실행해주고, 참이 아니라면 저걸 실행해 혹은 실행하지마" 라고 말하는 것과 같습니다. 이것을 if문과 if...else문이라고 하는데요 if문은 어떤 내용이 true일 때 특정 코드를 실행할 때 사용하고, if...else문은 어떤 내용이 true일 때 특정 코드를 실행하고, 만약 false라면 다른 코드를 실행할 때 사용합니다. // if문 예시 const name = "제니퍼 애니스톤"; console.log(name.length) if(name.length > 5) { console.log("제니퍼 애니스톤입니다.") } 제니퍼 애니스톤은 공백을..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Mb5ht/btrtnCX7WIg/KZIuHOnn1v5V79okQbYqJK/img.png)
안녕하세요 찐망고입니다. 오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다. 산술 연산자 자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다. 수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다. 20 + 10; // 30 20 - 10; // 10 20 * 10; // 200 20 / 10; // 2 let subject = 'javascript'; let score = 100; console.log(subject + '과목 성적은 ' + score + '점 입니다.'); // javascript 과목 성적은 100점 입니다. let cal = 3 - 5 * 6 / 2 + 3; console.log(cal) // -9 덧셈(+) 연산자인 경우에만 문자..
안녕하세요 찐망고입니다. 수업을 하다 보니 바닐라 JS를 언급하는 친구들이 늘었더라구요 jQuery와 바닐라 JS에 관련하여 포스팅을 해보려 합니다. 자바스크립트는 프론트 사이드에서 꽤나 많이 언급되어 사용되는 언어이자 서버사이드 개발이 가능한 언어랍니다. 물론 프론트 영역에서의 사용이 절대적이기 때문에 자바스크립트를 기반으로 한 프레임워크들이 현재 대세로 자리 잡고 있어요. 페이스북 엔지니어가 제작한 React, 구글 엔지니어가 제작한 Vue, 대규모 애플리케이션에 적합한 Angular 등이 이에 해당합니다. 또 프레임워크라고 하기에는 아주 조금 애매한 감이 있지만 현업 웹 개발에서 많이 사용하는 jQuery도 결국 자바스크립트의 라이브러리 중 하나입니다. jQuery란? 제이쿼리(jQuery)는 오픈..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/SsBiZ/btrrqnJhpxd/PzgAUk2cToo4liSnfimQUk/img.png)
안녕하세요 찐망고 입니다. 오늘은 자바스크립트에 변수에 대해서 설명해 보도록 하겠습니다. 변수는 제가 두 가지 방법으로 설명을 하는데요. 한 가지 물건을 넣을 수 있는 선물상자라고 이야기합니다. 다른 물건을 넣으면 원래 있던 물건이 없어지든 빼버리든지 다른 상자를 준비하든지 해야 하는 거죠 변수는 variable, 즉 변하는 값을 이야기하는데요. 변수에 값을 주는 것을 가리켜 할당(assignment)이라고 합니다. "기분"이라는 변수에 "행복"이라는 값을 "할당한다"라고 말하거나 "나이"라는 변수에 "40살"이라는 값을 할당한다고 합니다. 아래는 자바스크립트에서 변수에 값을 할당하는 방법입니다. mood = "행복"; age = 40; =으로 값을 변수에 대입한다고 하는데 수학에서 말하는 같다(equa..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/njH9e/btrrwfXHKbj/BAobMWvh97S5o5SkaVwiI1/img.gif)
안녕하세요 찐망고입니다. 임시 저장된 포스팅이 또 하나 추가될 예정입니다만.. 이렇게 또 두서없이 스크립트 포스팅을 시작하도록 하겠습니다. ㅎㅎ 자바스크립트 첫 포스팅은 스크립트의 역사부터 시작하려고 했는데 검색해보니 정리가 잘된 블로그들이 많더라고요.. 그래서 일단 링크로 정리.. https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript Roseline 개발 블로그 Javascript, Flutter를 좋아하는 프론트엔드 개발블로그 roseline.oopy.io 추가로 더 써보자면 자바스크립트는 넷스케이프가 썬 마이크로시스템즈(자바 만든 회사)와 함께 만들었는데, 자바스크립트는 웹 브라우저에 나중에 추가된 기능입니다...
- Total
- Today
- Yesterday
- 웹디자인
- 디자인팁
- 슬라이드플러그인
- uxdesign
- 크로스브라우징
- margin
- 반응형웹
- padding
- 프로그래밍기초
- 스마트폰해상도
- 자바스크립트숫자카운트
- css그리드
- 웹접근성
- uiux
- uidesign
- slickAPI
- css4
- Slick
- 피그마플러그인
- 시멘틱마크업
- Border
- JavaScript
- 코딩교육
- UI디자인
- CSS3
- 웹표준
- JavaScriptTips
- boxmodel
- css
- 포토샵합성
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |