안녕하세요찐망고 입니다. 오늘은 navi요소에서 많이 쓰는 해당 요소를 클릭했을 때만 클래스를 추가하고나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..탭이랑 비슷하죠? 1. 기본코드const navMenus = document.querySelectorAll(".navi > ul > li");navMenus.forEach(navMenu => { navMenu.addEventListener("click", () => { navMenu.classList.toggle("on"); })}) 일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.다시 클릭을 해야 제거되겠죠? 2. 개선된 코드const navMenus = document.querySelectorAll(".nav..
안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 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): 블록 스코프는 중괄호({})로 둘러싸인 블록..
![](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 덧셈(+) 연산자인 경우에만 문자..
- Total
- Today
- Yesterday
- css
- Slick
- 크로스브라우징
- boxmodel
- 피그마플러그인
- 웹디자인
- JavaScript
- 포토샵합성
- css그리드
- uxdesign
- slickAPI
- 프로그래밍기초
- Border
- 웹표준
- 스마트폰해상도
- uiux
- 반응형웹
- 디자인팁
- JavaScriptTips
- 시멘틱마크업
- UI디자인
- 코딩교육
- 슬라이드플러그인
- css4
- uidesign
- margin
- 자바스크립트숫자카운트
- CSS3
- 웹접근성
- padding
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |