[노마드코더 - 바닐라JS로 크롬앱 만들기] envent 막기, submit 새로고침 막기, preventDefault(); function onLoginSubmit (event) { event.preventDefault(); console.log(event); }; preventDefault : 어떤 event의 기본 행동이 발생되지 않도록 막음 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 출처: https://programming119.tistory.com/100 [개발자 아저씨들 힘을모아] consol.log(event); --를 통해 S..

[노마드코더 - 바닐라JS로 크롬앱 만들기] HTML에서 required속성, maxlength 속성 1. input태그의 required속성 input태그에 필수값 적용을 위한 속성으로 form 태그의 자식요소로 있을 때 적용된다. required 속성이 제대로 동작하는 요소의 type 속성값은 다음과 같다. - checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url required 속성은 불리언(boolean) 속성 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다. 출처 : http://tcpschool.com/htm..

코딩공부를 하면서 정말 여러가지 강의를 접했다.... 그중 CSS학습에 도움이 될만한 좋은 사이트가 있어 블로그에 공유한다. 이 사이트는 유튜버 드림코딩의 엘리님의 강의를 듣고 알게된 사이트이다. CSS익히기 CSS Dinner, FLEXBOX FROGGY 게임은 총 2가지! 그 중 첫번째 게임은 CSS Dinner 게임방법은 가운데 움직이고 있는 요소가 있는데, 오른쪽 HTML을 참고하여 왼쪽 CSS창에 움직이는 요소를 선택하여 입력하는 것이다. 총 32 단계까지 있으며, CSS의 기본선택자 부터 복합선택자, 가상선택자까지 골고루 나온다. 오른쪽에는 힌트도 있으니 참고하여 풀면된다. 알면 재밌고, 몰라도 쉽고 재밌게 공부할 수 있는 좋은 컨텐츠 인것 같다! CSS Dinner 바로가기 두번째 게임은 F..

CSS기초 CSS 복합 선택자 -일치 선택자 ABCXYZ : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 // (태그+클래스) span.orange { color: red; } 오렌지 -자식 선택자 ABC > XYZ : 선택자 ABC의 자식 요소 XYZ ul > .orange { color: red; } 오렌지----O 오렌지--X -하위(후손)선택자 ABC XYZ : 선택자 ABC의 하위요소 XYZ 선택. '띄어쓰기'가 선택자의 기호! div .orange { color: red; } 오렌지----O 오렌지--O 오렌지--X -인접 형제 선택자 ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 선택자 li 중 orange class를 가지고 있는 요소의 다음 형제 요소 하..

CSS기초 CSS 기본 선택자 - 전체선택자 * : 모든 요소를 선택 * { color: red; } html의 모든 요소의 색을 빨간색으로 - 태그선택자 ABC : 태그 이름이 ABC인 요소 선택 li { color: red; } 입력된 태그만 적용 - 클래스 선택자 .ABC : HTML class 속성의 값이 ABC인 요소 선택 .orange { color: red; } 오렌지 오렌지 orange클래스의 글자색을 빨간색으로 변환 - 아이디선택자 #ABC : HTML id속성의 값이 ABC인 요소 선택 #orange { color: red; } id="orange" class="orange">오렌지 id가 orange인 요소의 글자색을 빨간색으로 변환

VS Code 사용방법 초딩초보에게 유용한 확장프로그램 4가지 VS Coed를 사용하면서 필요한, 혹은 VS Code를 사용하면서 더욱 유용하게 코드를 작성하도록 도와주는 확장 프로그램을 정리해보겠습니다. 1. Korean Language Pack for Visual Studio Code 영어로 된 프로그램 사용이 어려운 분들에게 유용한 기능입니다. VS Code를 한글화 할 수 있는 프로그램인데요. 마이크로소프트에서 만들어서 더욱 믿을 수 있는 프로그램입니다. 설치하면 상단에 메뉴탭들이 전부 한글로 바뀐 것을 확인할 수 있어요 2. Beautify Beautify 프로그램은 코드 작성 중에 혹시나 뒤죽박죽 되어버린 코드를 깔끔하게 정리해주는 프로그램입니다. 어떤 기능이 있는지 어떻게 사용하는지 알려드릴..