myej+I+n s+T+udying

-색상 별 하이라이트는 하단의 내용을 대표함- : 사례 설명 : 문제점, 단점 : 주제의 sub point : 주제의 main Point [기사전문] 사용자는 기본에 충실, 공급사는 안전망 강화 노력해야 디지털 전환(Digital Transformation)을 위한 핵심 기술로 클라우드가 각광받으면서 클라우드 기반의 인프라와 플랫폼, 서비스를 채택하는 개인과 기업이 빠르게 늘고 있다. 그러나 한편으로는 클라우드 사용이 늘어난 만큼 보안 문제 역시 함께 대두되는 상황이다. 특히 하루가 다르게 진화하는 해커들의 범행 수법으로 인해 피해 사례와 피해 금액이 해가 갈수록 빠르게 늘어나고 있다. 견고한 줄 알았던 클라우드 보안에 문제가 생기는 이유는 간단하다. 바로 보안의 ‘기본’을 지키지 않는 사용자의 부주의가..

변수 선언 | 할당 | 범위 선언 =변수 만들겠습니다. 할당 =변수에 자료 넣기 ; 재할당은 자유 -> var 이름='kim'; 범위 =변수에 자료 넣기 -> 함수 안에서 변수 만들면 사용 가능 범위는 함수 내부 var | let | const 차이 var =재선언 o =재할당 o =범위 function let = 재선언x -> 변수 까먹고 또 만드는 실수 방지 가능 =범위 {} const = 재선언x, 재할당 x -> 등호로 변수 변경하면 에러 내 줌 -> 변하면 안되는 값 보관하기 좋을 듯 =범위 {}

버튼 누르면 내부 글자를 Dark -> Light로 변경해보자 2회 누르면 다시 Dark 3회 누르면 다시 Light ...... ->버튼 누르면 내부 글자를 Dark/Light 번갈아가며 바뀌게 해보자 -클릭 횟수가 홀수면 내부 글자를 light로 변경 -클릭 횟수가 짝수면 내부 글자를 Dark로 변경 클릭 횟수가 몇 번 눌렀나 기록해야 할 듯? 변수 문법 : 자료 잠깐 저장 var 변수명=넣을 자료; 그래서 변수 왜 쓰는데? 1. 길고 복잡한 자료들 저장 가능 2. 특정 값을 기억하게 만들고 싶으면 뱃지 클릭횟수를 기록해보자. 변수에 +1하는 법 변수 ++ 변수+=1 변수=변수+1 -오늘의 숙제- 다크모드 버튼 눌렀을 때 버튼 누른 횟수가 홀수면 버튼 내부 글자를 Light로 변경해주세요~ 버튼 누른..

에서 일어나는 input 이벤트 input 작성할 때마다 콘솔 창에 안녕이라고 뜬다 조건식에 대하여, if 문 안에 true/false 넣어야 잘 작동함 -> boolean type 다름을 비교하고 싶으면 != 엄격한 비교는 타입까지 같아야 같다고 해줌 === 느슨한 비교는 == 조건 2개 이상을 동시에 비교하고 싶다면 &&(AND) 그리고 ||(OR)연산자

(참고) 폼 전송 막으려면 e.preventDefault() 위 함수 추가 전= 값을 입력하세요 알림 창은 뜨지만 확인 버튼 클릭 시 전송완료~~페이지로 넘어간다. 위 함수 추가 후= 알림 창의 확인 버튼을 눌러도 폼이 전송되지 않는다 ese-if 문법: 1. 조건식을 연달아 쓰고 싶으면 2. 몇 번이고 연달아 사용 가능 else-if 의 조건이 참이기 때문에 콘솔 창에 맞아요2가 출력되는 것을 확인할 수 있다. -오늘의 숙제- 1. 전송 누르면 아이디/비번 입력란 둘 다 공백 검사 2. 비번이 6자 미만이면 더 길게 입력하라고 안내문 띄우기(value.length) 1. id/pw 값이 공백일 경우 2. 비번이 6자 미만일 경우 3. 조건 모두 만족 시 정상적으로 폼이 전송됨

모달창 안에 만들기 form 안의 전송=submit type=button 은 서버로 유저 정보 전송하려고 쓰는 것임 로그인하세요 전송 닫기 전송 버튼을 누르면 전송완료~~~~~로 작성해 둔 success.html로 이동한다. 조건 걸기 전송 버튼 누를 때 첫째 에 입력된게 없으면 alert 띄우기 컴퓨터에게 명령할 내용 아무것도 입력하지 않고 전송 버튼을 누르면 위와 같이 alert 창이 뜬다! 반대로 값을 입력해준 후 전송을 누르면 success.html 페이지로 넘어간다. 조건문 쓰는 법 : 조건이 충족될 때 코드 실행하고 싶으면 사용 if(조건){

UI에 애니메이션 추가하려면 -가능하면 CSS만으로 처리하는게 좋음 (성능 때문) 만드는 법칙이 있음! one-way UI 애니메이션 만드는 법 : A상태 ---> B 상태 1. 시작 (전) 스타일 2. 최종 (후) 스타일 (class로 구현) 3. 원할 때 최종 스타일로 변하라고 코드 짬 4. transition 추가 css의 visibility : hidden; -> 애니메이션 줄 때 display : none 대용 -> 모습만 숨김 transition: all 1s; -> 모든 css 속성이 변할 때 1초에 걸쳐 서서히 변경되게 해주세요 Q. 위에서 내려오는? Q. 접히는 애니메이션? -height, overflow:hidden 조절

css 짜기 귀찮을때, Bootstrap 라이브러리 활용 -버튼 -카드 -리스트 -Nav ...등 Navbar 만들기 1. 미리 서브메뉴를 html css로 디자인 2. 버튼 누르면 보여달라고 js 짬 -class 탈부착으로도 구현가능 => class 부착식으로 개발 시 애니메이션 추가 쉬움 => 나중에 재사용 편리 버튼 누르면 에 show 부착해보자 An item A second item A third item A fourth item And a fifth one 원하는 요소에 클래스명 추가하는 방법 버튼 클릭 시 sub 메뉴가 펼쳐진다. Q. 버튼 한 번 더 누르면 숨기기? classList.toggle('클래스명') : show가 있으면 제거, 없으면 추가하라는 뜻 이거 진짜 우아한 형제들 사이트 ..

EventListener 형식 //alert 창 닫기-id가 close인 요소에 클릭이 발생하면 닫아주세요 document.getElementById('close').addEventListener('click', function(){ document.getElementById('alert').style.display='none'; }); 버튼 1, 2 각각을 클릭했을 때의 실행 결과. EventListener를 사용하면 버튼에 온클릭 부여하지 않고도 처리 가능하다 Event에는 여러가지가 있음 click keydown scroll mouseover

오늘 배울 거: function 쓰는 이유 2 -> 함수 업그레이드하고 싶으면 파라미터 1. 함수에 구멍 뚫어놓으면 2. 앞으로 함수 쓸 때 (구멍) 안에 아무거나 입력 가능 파라미터의 장점 1. 함수 하나로 다양한 기능 만들기 가능! 2. 코드 양이 줄어듬 예시 1. Alert 박스 닫기 버튼 예시 2. function plus(n){ 2 + n } plus(1); plus(2); plus(3); Q. 구멍이 여러개 필요한 경우? 1. 콤마로 구분 2. 자유 작명 3. 구멍 타고 들어온 데이터는 어디에 들어갈지 표시하기 -오늘의 숙제- alert 창 2개 만들기 (버튼1: 아이디를 입력, 버튼2: 비번을 입력) 방법 1. Alert-box 닫기 버튼1 버튼2 방법2. 파라미터 사용 Alert-box 닫..