본문 바로가기

전체 글106

event : onclick(click) 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 on (click) -> element 클릭했을시 적용한 이벤트를 발생 ◾ html code 안녕하세요. ◾ js code // 1) element querySelector 사용해서 불러오기 const title = document.querySelector(".title"); // 3) 사용할 함수 만들기 function handleTitleClick() { console.log("안녕하세요 클릭해주세요."); } // 2) addEventListener로 클릭 이벤트 적용하기 title.addEventListener("click", handleTitleClick); 1) html title element js로 불러오기 2) 불러온 title elem.. 2024. 1. 30.
event : window (resize) 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 window (resize) -> resize 이벤트는 document view의 크기가 변경될 때 발생합니다. ◾ html code 안녕하세요. ◾ js code 1) querySelector로 html element 불러오기 const title = document.querySelector(".title h1"); 3) 함수 만들기 function handleWindowResize() { //document.body.style.backgroundColor = "black"; console.log("화면을 움직여주세요."); title.style.color = "green"; } 2) 이벤트에 만든 함수와, 사용할 이벤트 집어 넣기 window.add.. 2024. 1. 30.
event (addEventListener) 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ click = 눌렀을 때 mouseenter = 위에 올렸을 때 mouseleave = 위에서 치웠을 때 📖 event 1. js로 color 넣기 ◾ html code 안녕하세요. ◾ js code const title = document.querySelector(".title"); console.log(title); title.style.color = "blue"; 2024. 1. 30.
📗 Javascript ● Javascript ✔ react = janascript 라이브러리 ✔ React Navigate = 안드로이드 ✔ javascript 는 주로 끝에 표기함. ✔ APis | MDN 참고하기 ◾ 변수 ◾ const = 상수 (바뀔 수 없음) ◾ let = 새로운 값 대입 x ◾ var = 지금은 사용안함. ◾ dataType -> string or 숫자 -> boolean (true, false) ◾ 배열 (Group) -> array [ , ] // Get Item from Array -> ex) console.log(days[1]) // Add one more day to the array -> 변수.push("") = 추가 ◾ 객체 (Object) -> ex) const player = { na.. 2024. 1. 22.
📘 CSS ● CSS ✔ Cascading Style Sheet (위에서 아래로) ✔ html 에 작성할 경우 ✔ css 따로 만들 경우 html ◾ 크기 종류 px % vh : viewport height (screen) ex) 100vh text-decoration: underline; text-transform: uppercase; 소문자 > 대문자 |(divider) 만드는 법 : width: 1px, height: 15px, ◾ * : 전부 ◾ # : id 사용할 때 ◾ . : class 사용할 때 ◾ width : 너비(가로) ◾ height : 키(세로) ◾ display -> inline (높이와 너비가 없음) -> inline-block (block 으로 인식하게 해줌) : 문제점이 많아서 잘 사용.. 2024. 1. 18.
📕 HTML ✔ 검색 mdn ✔ prettier 자동완성 ✔ Material Icon Theme 폴더 아이콘 변경 ◾ -> html 문서라는 걸 알려줌 ◾ tag lang : 우리 사이트 언어 무엇을 사용하는지 알려줌 -> 웹사이트 구조는 두가지 (head, body) ◾ -> -> (부가적인 정보) -> (글자 꺠짐, 무조건 넣어야함) -> (사이트 로고) -> (내가 사이트의 링크를 공유 할때) ◾ tag h1 ~ h6 -- ◾ list tag 1. (unordered list) - 순서가 없다 -> 어떤 태그를 넣든 2. (order list) - 순서가 있음 (list item) ◾ tag (anchor) -> 다른 웹사이트로 이동 -> href _self : 기본값, _blank : 새로운 페이지가 열림 -.. 2024. 1. 17.
📖 08. DB Mini mission 1. DB 연결해서 성적표 조회하기 ✳ 점수 조회 홈페이지 만들기 ✳ DB 연동하기 ✳ DB 에서 이름을 입력한 학생의 점수를 가져와 화면에 결과를 출력하기 조회하기 ◾ 문을 사용해서 구현하였다. ◾ 을 사용해서 조회하기 눌렀을 시 ./score_proc.php 로 이동해서 실행 ◾ 는 post 로 하였다. 뒤로 ◾ 버튼에 js 를 사용해서 이벤트를 주었다. ◾ DB 연결하여 $conn 변수에 집어넣었다. ◾ 조건문을 사용해서 !$conn 데이터베이스가 연결 실패 시 경고문과 함께 다시 돌아가지게 구현했다. ◾ $query 변수 안에 select 를 사용해서 $name 을 불러왔다. ◾ SQL 사용하기 위해 mysqli_query() 함수를 사용합니다. const bt = document.getEleme.. 2023. 12. 28.
📖 로그인 페이지 만들기 (2) 1. login page 만들기 (2) ✳ 추가적으로 로그인 성공시 페이지를 따로 만들었으며, 로그아웃 할 수있는 기능을 js 를 사용해서 구현해보았다. 환영합니다!! 어떤 걸 도와드릴까요? 로그아웃 ◾ class 를 container 로 통일시켰다. ◾ 에 id 를 주었다. (js 랑 연동시키기 위함) ◾ js 를 실행시키기 위해 밑에 '; } if ($user_id == 'mango' && $user_pw == 'mango1234') { header("Location: ./result.php"); } else { echo ''; } ?> ◾ 로그인 성공시 페이지 이동을 header 를 사용해서 result.php 로 이동하게 구현하였다. ◾ header : 리다이렉트 다른 페이지로 이동하는 것을 말합.. 2023. 12. 28.
📖 로그인 페이지 만들기 (1) 1. login page 만들기 Login 로그인 회원가입 ◾ 문을 사용해서 구현했으며 login_proc.php 를 따로 만들어서 거기에 동작을 넣을 예정 ◾ action = button 을 누르면 "./login_proc.php" 가 실행된다. ◾ method = "post" : 에 입력한 데이터가 $_POST 로 들어간다. * { margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; } .container { display: flex; flex-direction: column; justify-content: space-around; height: 300px; wi.. 2023. 12. 27.

티스토리툴바