프론트엔드 기록

Brackets 에디터 : https://brackets.io/ (윈도우는 .msi 맥은 .dmg) Visual Studio code 에디터 : https://code.visualstudio.com/ (참고1) 에디터 상단 메뉴에서 '폴더열기'로 먼저 여러분의 작업폴더를 오픈하신 후 파일을 만들든지 코딩을 하든지 하셔야합니다. (참고2) 에디터의 번개 버튼을 누르시면 실시간 미리보기가 가능합니다. (참고3) ctrl + s 단축키로 파일 저장잘하십시오 맥북은 ctrl 대신 command입니다. (자주 묻는 질문) Q. 왜 저는 Brackets 에디터 실시간 미리보기가 잘 안되죠? A. 번개버튼 다시 껐다 켜보시거나 파일 저장 잘하십시오 HTML은 어디다 쓰는 언어? 웹페이지를 만들고 디자인하고 싶을 때 ..

HTML, CSS 2024. 2. 14. 18:17

전송버튼 누르면 공백체크하라던 숙제 1. 전송버튼누르면 2. 저기 input에 입력한 값이 공백인 경우 알림 띄우기 $('form').on('submit', function(){ input에 입력한 값이 공백인 경우 알림 띄우기~~ }); ▲ 1번은 이렇게 했는데 버튼에 click 이벤트리스너 달아도 되고 태그 찾아서 submit 이벤트리스너 달아도 됩니다. 똑같이 동작합니다. 왜냐면 폼전송이 되면 태그에서 submit 이벤트도 발생해서 그렇습니다. 원하는 html을 태그명으로 찾고 싶으면 마침표나 # 없이 $('태그명')만 적으면 됩니다. $('form').on('submit', function(){ if (input에 입력한 값이 공백) { alert('아이디 입력하쇼'); } }); ▲ 2번은 이렇..

자바스크립트 2024. 2. 14. 18:14

만들기 과 기능을 만들면서 if else 문법을 배워보도록 합시다. 전송 닫기 ▲ 모달창 안에 폼 이렇게 만들어보십시오. 그리고 전 닫기버튼도 폼 안으로 옮겼습니다. 그리고 success.html 파일도 같은 폴더에 하나 만들어두면 되겠습니다. 파일 내용은 아무 글자나 채웁시다. 지금은 전송버튼 누르면 폼 전송이 되며 success.html로 이동합니다. 근데 여기에 제한을 걸어봅시다. 첫 에 입력한 값이 아무것도 없으면 전송버튼 누를 때 알림을 띄워봅시다. 그럼 자바스크립트로 전송버튼누르면 저기 에 입력된 값이 공백이면 알림띄워주세요 코드 짜면 되는데 "이런 경우에만 코드 실행해주세요~" 라는 표현법은 배우지 않았습니다. 이 경우엔 자바스크립트 if 문법쓰면 됩니다. 잠깐 문법수업 : if else 조..

자바스크립트 2024. 2. 14. 00:25

모달창 띄우기 숙제 1. 클래스부터 만들어놓읍시다 버튼 누를 때 display : block 그냥 대충 줘도 되겠지만 나중을 위해 class 부착식으로 만들어봅시다. .black-bg { (생략) display : none; } .show-modal { display : block; } 그래서 css 파일열어서 모달창에 붙어있던 기본 class엔 display : none을 추가했고 show-modal 이라는 class를 만들었습니다. 이제 show-modal 원할 때 부착하면 모달창 보일듯요 모달창 띄우기 숙제 2. 버튼클릭시 모달창 띄워주세요 버튼클릭시 모달창 띄워달라고 컴퓨터에게 명령주면 되는데 "띄워주세요~" 라고 코드짜면 컴퓨터가 알아듣겠습니까. 지능이 없는 친구이기 때문에 show-modal ..

자바스크립트 2024. 2. 3. 09:03

자바스크립트 특징인데 코드가 매우 길고 더럽습니다. 그게 불만이면 html 조작을 쉽게 바꿔주는 라이브러리들을 사용가능합니다. React, Vue, jQuery 이런 것들이 전부 html 조작 쉽게 바꿔주는 라이브러리들입니다. React와 Vue는 자바스크립트 어느정도 문법을 알아야 사용가능하기 때문에 나중에 도전해보시고 우선 jQuery를 사용해봅시다. Q. 어 저는 jQuery 말고 자바스크립트언어를 배우고 싶은데요 A. jQuery는 자바스크립트 querySelectorAll, addEventListener, classList.add 이런 것들을 이름만 훨씬 짧게 바꿔주는 라이브러리일 뿐 다른 언어 그런거 아닙니다. 굳이 싫다면 쌩자바스크립트로 알아서 길게 쓰도록 합시다. 초보들 코드읽기에 짧고 좋..

자바스크립트 2024. 2. 3. 09:02

Bootstrap 설치해서 쓸 것임 Bootstrap css 파일을 설치해놓으면 버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다. css 짜기 귀찮으니 설치해봅시다. 구글에 bootstrap 검색하면 나오는 맨 첫 사이트 들어가보면 되겠습니다. 그리고 get started 버튼 누르면 됩니다. 1. 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에 2. css 파일은 Navbar An item A second item A third item A fourth item And a fifth one

자바스크립트 2024. 1. 29. 21:44

저번시간 숙제는 버튼1 누르면 '아이디입력하세요' 라는 alert 박스가 떠야함 버튼2 누르면 '비번입력하세요' 라는 alert 박스가 떠야함 구현방법은 2개가 있겠군요 1. 미리 html로 alert 박스를 2개 만들어놓고 버튼1 누르면 박스1 띄우기~ 버튼2 누르면 박스2 띄우기~ 이렇게 짜도 되겠지만 이러면 나중에 alert 박스가 100종 필요하면 어떻게 되겠습니까. 끔찍하군요 2. 기존에 있던 alert 박스를 재사용하는겁니다. 버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 버튼2 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 이러면 효율적일듯요 자바스크립트가 가장 잘하는게 html 변경이니까 제목 바꾸는건..

자바스크립트 2024. 1. 27. 01:48

function에 사용가능한 파라미터 문법 파라미터라고 하면 어려우니까 구멍이라고 합시다. 함수내에 구멍을 뚫어줄 수 있습니다. function 알림창열기(구멍){ document.getElementById('alert').style.display = 구멍; } 지금 함수 내에 구멍을 뚫었습니다. 구멍을 뚫는 법은 1. () 소괄호 내에 아무 글자나 적고 2. {} 중괄호 내에도 같은 글자 아무데나 적으면 됩니다. 구멍을 왜 뚫냐고요? -> 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있습니다. 구멍이 뚫려있으면 이제 함수를 쓸 때 그냥 쓰는게 아니라 소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용가능합니다. function 알림창열기(구멍){ document.getElementById('alert')..

카테고리 없음 2024. 1. 27. 01:41