JavaScript(12)
-
[Javascript] for문 break
break문 반복문인 for문에서도 break문을 사용할 수 있는데요. break문은 반복할 조건에 상관없이 break 에 해당되면 반복을 종료합니다. 말보단 직접 보시는 게 이해가 빠를테니 예제를 보여드리겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 for문 break for(var i = 1; i
2021.07.27 -
[Javascript] while문, do while문
while문 while문은 해당 조건에 부합할 경우 코드를 반복하여 실행하는 반복문으로 기본적인 형태는 아래와 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 while문 var 변수 = 초깃값; while(조건식) { 반복할 코드; 증감식; } cs 조건식이 참(ture) 인 경우, 반복할 코드를 증감식에 따라 반복하는데요. 반복은 거짓(false) 이 될 때까지 반복하게 됩니다. 예제를 살펴보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 while문 var i = 1; // var 변수 = 초깃값 while(i
2021.07.27 -
[Javascript] else if문
else if문은 두 가지 이상의 조건이 있을 때 정해진 조건을 만족하지 않은 상태일 때 실행되는 조건문입니다. 기본적인 형태는 아래와 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 else if if(조건1) { 실행할 코드; } else if { 위의 조건이 충족되지 않을 때 실행할 코드; } else if { 위의 조건이 충족되지 않을 때 다음으로 실행할 코드; } else if { 위의 조건이 충족되지 않을 때 다음으로 실행할 코드; } else { 위의 조건이 모두 충족되지 않을 때 실행할 코드; } cs else if문을 사용하기 위해서 먼저 if문으로 시작되는 형태여야 하고 if문의 조건에 충족되지 않을 경우 다음 차례의..
2021.07.22 -
[Javascript] confirm 메소드
흔히 사이트 회원 탈퇴 여부를 물을 때 자주 쓰이는 confirm 에 대해 알아보겠습니다. 탈퇴를 진행하게 되면 탈퇴 여부를 한번 더 묻기 위해 이런 alert 창을 보신 적이 있을 겁니다. 이렇게 확인 / 취소, 두 가지 중 하나를 선택하도록 하는 것이 javascript confirm 메서드입니다. 보통 if문과 같이 쓰이는데요. 바로 예제로 넘어가겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Confirm var result = confirm("회원 탈퇴를 하시겠습니까?"); if(result) { alert("탈퇴 처리되었습니다."); } else { alert("탈퇴 취소되었습니다."); } Colored by Color Scripter cs 위와 같..
2021.07.22 -
[CSS] 햄버거 메뉴 버튼 만들기
웹페이지나 모바일 메뉴에서 흔히 볼 수 있는 3줄로 구성된 모양의 햄버거 버튼입니다. 클릭 시 두 번째 줄은 투명해지고 첫 번째와 세 번째 줄이 이동하면서 각도를 바꿔 X자 형태를 만드는 원리입니다. HTML, CSS, JavaScript 를 구분해 놓고 간략한 설명을 위해 주석을 달았습니다. HTML CSS JavaScript
2021.05.23 -
[React] JSX 문법
JSX란? JavaScript 에 XML 을 추가한 확장형 문법으로 하나의 파일에 JavaScript 와 HTML 을 동시에 작성할 수 있어 편리하다는 장점이 있습니다. 감싸진 요소 컴포넌트에 여러 요소가 있을 때 부모 요소를 사용해 하나로 감싸야 합니다. 아래와 같이 부모 요소 없이 h1, h5 태그로만 이루어져 있다면 실행되지 않고 오류가 발생합니다. import React from 'react'; function App() { return ( 부모 요소가 없을 때 ); } export default App; h1, h5 태그에 부모 요소를 추가하면 출력되는 걸 확인할 수 있습니다. import React from 'react'; function App() { return ( 부모 요소가 있을 때 )..
2021.04.26