전체 글 (58) 썸네일형 리스트형 [css] 선택자의 종류 자세히 알아보자!! HTML 문서의 특정 영역이나 요소 등을 선택해줄 수 있는 장치가 필요하다 요것을 CSS에서는 선택자라고 부른다 뭘 가리키는 지 알아야 가져오지 용어 내용 태그 선택자 tag selecter HTML 태그에 속성 적용 클래스 선택자 class .로 시작하는 선택자 아이디 선택자 id #으로 시작 종속 선택자 dependant 선택자에 종속된 선택자 하위 선택자 descendant 선택자 내부의 모든 후손 선택자 전체 선택자 universal 전체 문서에 영향을 줌 그룹 선택자 group 여러 선택지를 복합적으로 적용할 때 자식 선택자 child 선택자 바로 밑의 자식 선택자 인접 선택자 adjacent 붙어있는 선택자와 선택자에 특정 효과 줄 때 사용 가상(수도)선택자 psudo-classes 단독으로 .. [HTML] input 태그를 알아보자 ② input type외에 input에 따로 속성을 줄 수 있다 placeholder로 미리 값의 예를 보여주고 type="submit"으로 값을 전송하는 버튼이 된다 이런거 말고 더 알아보자!! input 속성 설명 autofocus autofocus가 지정된 부분에 커서가 깜박인다 form input에 form 속성을 적용하여 form 외부에 있는 input속성을 적용한다 datalist 미리 지정된 값을 리스트 형식으로 불러오거나 보여준다 min and max input 값의 최솟값과 최댓값을 지정해 줄 수 있다 multiple input 부분에 여러 개의 파일을 불러 올 수 있게 한다 pattern 지정된 패턴 값을 입력 가능하게 해준다 placeholder input 부분에 미리 값 또는 입력 예를.. [HTML] input 태그를 알아보자 ① 이전에는 단순히 text, password, checkbox, radio button, image, file 정도의 타입만 있었지만 HTML5에서는 더 많은 타입이 추가 되었다 크롬 MS엣지 오페라 같은 건 대부분이 되지만 익스플로어는 안되는게 몇 개 있다 제발 익스플로어 쓰지마!!!!! HTML5부터 사용 가능해진 친구들이다 input type 설명 color 색상값 입력 date 날짜 입력 datetime 날짜와 시간 입력 (타임 존 적용) datetime-local 날짜와 시간 입력 (타임존 ㄴ적용) email 이메일 주소 입력 month 년도와 월을 입력할 때 사용 number 지정한 숫자 입력 range 숫자의 범위 지정 search 검색 폼 지정 tel 전화번호 입력 time 시간 입력 url.. git과 github란? 간단한 명령어 정리 출처: 얄팍한 코딩사전 youtu.be/Bd35Ze7-dIw 이 형님은 개쩌는 것 같다 내가 사용하면서도 제대로 활용하지 못했었던점을 되짚게 되었다 구독하자 git 쓰는 이유 1. 버전 관리: 프로젝트 작업을 하다보면 더하고 빼고 수정하고 과거내용 확인과 클라이언트의 '어.. 저번께 더 나은것같은데요?' 의 경우를 위해, 시간을 되돌리기 위해 사용한다 2. 협업: 같이 일하려면 코드를 공유해야한다. 복붙으로 전달 할 순 없다 git: 버전 관리를 위한 소프트웨어 Github: git으로 저장돼서 원격전송된 내역들이 저장되는 공간을 제공하는 서비스 쉽게 말해서 git은 영상 찍는 카메라 앱이고 github는 유튜브다! 명령어 정리 폴더 이동 cd (프로젝트폴더) //이동 이 폴더의 모든 내용 수정내역 저장.. [프로젝트] props를 사용해서 컴포넌트를 껐다 키자(react) 요새 회원가입 페이지를 만들고 있다.정말 심플하고 트랜디하게 잘만들었다 그치만 회원가입완료가 떴는데 입력하던 폼은 안사라지고 그대로 있다 props로 임마를 사라지게 해보자 !!!! 나의 js파일 구조는 signup_button 컴포넌트 ↓ 하위 signup_page 컴포넌트 버튼(signup_button)을 누르면 Dialog 팝업의(signup_page)가 뜨는 구조다 import React from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import.. [프로젝트] nodemailer 사용해서 인증번호 확인 해보자 ② (react) ①에서는 먼저 입력해 놓은 내용을 클라이언트에게 메일을 보냈었다 이제는 난수를 생성하고 고것이 사용자가 다시입력한 것과 일치하는지 알아 보자!!! 우선 서버에게 요청할 함수.js다. 발송된 인증번호를 number에 , 내가입력한 인증번호를 inputnumber로 뒀따 constructor(props) { super(props); this.state = { email: '', usingemail: false, // 인증번호가 맞아서 가입가능한가?? number: '', //보내진 인증번호 inputnumber: '', //내가 입력한 인증번호 // 이 두개가 똑같아야 한다 } sendEmail(e){ e.preventDefault(); console.log(this.state.email); const da.. [프로젝트] nodemailer 사용해서 인증번호 확인 해보자 ① (react) 회원가입을 할 때 이메일을 보낸 후 인증번호를 확인 할 때가 있다 감사하게도 구글에서 nodemailer API를 지원해준다. 빨리 해보자!!! 만들고 있는 회원가입 form 이다 '전송'버튼을 누르면 클라이언트에게 텍스트가 전송 되게 해볼 것이다 우선 구글 아이디에 설정이 몇 개 필요하다 https://accounts.google.com/DisplayUnlockCaptcha 요기로 가서 허용 해주자 https://accounts.google.com/DisplayUnlockCaptcha 요기도 방문해 주자 '계속'클릭 이메일을 보낼 계정 세팅은 끝났다 nodemailer를 사용할 모듈이 필요하다 npm install nodemailer --save 설치 해주자 버튼 누르고 서버에게 요청 할 클라이언트.j.. [프로젝트] id 중복확인 기능을 만들자 !!! ② (react) 앞서 말했던 server.js 와 index.js 파일을 만들어 보자 !! 우선 소스 경로는 이렇게 만들었다. 이유는 친구들이 이렇게 하길래 따라했다 참고로 src 폴더 바깥이다 const express = require('express'); //익스프레스 모듈 가져오기 const app = express(); const cors = require('cors'); //cors를 사용하고 싶다 const bodyParser = require('body-parser'); //body-parser을 사용하고 싶다 const port =3001; //서버포트는 3001번 포트 const route = require('./routes/index'); //router가 있는 곳이다 만들 index.js다 app.u.. 이전 1 ··· 4 5 6 7 8 다음
