날아라김지원
article thumbnail
HTML, CSS form&input
HTML,CSS 2023. 4. 21. 18:53

- form 입력에 사용하는 태그 여러가지가 있지만 필요한거 검색해서 사용하자. 옵션1 - input 속성 placeholder는 배경 글자, value는 입력된 값 (미리), name 은 백엔드 개발할때 필요한 인풋 이름 그리고 HTML속성으로 CSS셀렉터로 사용가능하다. input[type=email] { color : grey } 그리고 아래와 같이 submit 타입을줘서 "폼태그안에서" 사용가능하다. 전송 - 셀렉터사용시 여러개 한번에 가능 /* 여러태그에 한번에 속성주는법 .class도 가능*/ div,input,textarea{ box-sizing: border-box; } - 재사용가능하게 class만들기 기존의 클래스 사용한다음 추가적으로 클래스 추가해서 사용이 가능하다. Message -..

article thumbnail
Vue.js input값 받기 (v-model), watcher (데이터 감시)
Vue.js 2023. 4. 1. 17:08

- v-model (input값 받기) 1) @input 사용하기 이와같이 input택에 입력 이벤트가 들어오면 month라는 변수에 입력받는 값을 넣게 만들어 줄 수 있다. 2) v-model 사용하기 그리고 좀더 편하게 사용하려면 v-model을 사용하면 된다. 설명하자면 input에 입력한 값을 month에 저장하라는 의미이다. 3)이외에도 select, textarea같은 속성에도 사용할 수 있다. 그리고 입력받는 값에 대한 min, max값을 지정할 수 도 있지만 watcher를 통해 관리하는게 더 정확하다. {{ oneroom[roomNumber].title }} {{ oneroom[roomNumber].content}} {{ month }}개월 선택함 : {{ oneroom[roomNumbe..

article thumbnail
input태그와 textarea를 React에서 사용하기
React 2022. 4. 28. 17:07

이와같은 textarea를 리액트에서 사용하려면 몇개 속성을 수정해줘야한다. Tell us your story: It was a dark and stormy night... 이와같은 녀석을 Tell us your story: 아래와 같이 바꿔서 써줘야한다. rows와 cols는 {}안에 속성값을 넣어줘야하고 for같은거는 htmlFor로 바꿔써줘야 한다. - 참고한링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea - HTML: Hypertext Markup Language | MDN HTML 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다. developer.mozilla.org https://www.pluralsight.com/..

article thumbnail
React input
React 2022. 1. 10. 19:16

리액트에서 input창을 만들고싶다, 그리고 입력하고싶다 간단하게 해보자. 이와같이만 해줘도 인풋창이 생긴다! 지금은 인풋창에다가 글자를 입력해서 맨위에 추가하는 기능을 만들고싶다. 두가지를 해야한다 input창에서 onChange이벤트를주고 button에서 onClick이벤트를 줘야한다. let [글발행,글발행변경] = useState(''); 이와같은형태로 let[a,b] =useState()를 사용해준다. 문자열 형태로 state를 사용해줘서 input 창에서 입력 event가 발생할때마다 a에 저장이된다. 그리고 최종적으로 버튼을 클릭하면 맨위에 변경함수를 다시 사용해 deepcopy를 이용해 배열을 복사후 unshift로 추가해서 새로 추가해주는 형식을 사용한다. {글발행} {글발행변경(e.ta..