input 4

문제 해결 - 하이픈(Hyphen) 삽입

문제 상황 1.받아오는 api에서 phoneNumber이 하이픈이 없는 상태에서 데이터를 받는다. ex) 01000000000 2. 사용자에게 보이는 input 값은 하이픈이 있는 상태로 보여야한다. ex) 010-0000-0000 3. 단, api를 보낼 때는 하이픈이 없어야한다. 해결 방법 간단하다. 사용자가 보는 ui에는 하이픈이 포함되게, 보내는 데이터는 하이픈 없이 전송하면 된다. 우선 받아오는 api에서 하이픈이 없는 것을 확인하고, 요렇게 하이픈 있는 상태로 렌더링 한 후, value에다가 넣어주면 된다..! 그러면 이렇게 하이픈을 잘 표시해서 렌더링 할 것이다 ! 어라 ? 그러면 value 값은 하이픈이 있는 상태인데, 보내는 데이터도 하이픈이 포함되어있는 거 아닌가 ?! 맞다, 이번에는 ..

실수,해결 2023.12.01

실수-Input placeholder object 출력

문제상황 input에 있는 placeholder에 svg를 넣고싶은데 svg를 넣으면 object로 렌더링되고 svg 이미지는 나오지 않는다.. 해결 당연하겠지만.... placeholder에는 text만 들어갈 수 있다 흠... 그러면 깔끔하게 placeholder에는 svg 넣는 거 포기. 대신 다른 방법을 갈구해보자 이런식으로 구성하거나, 이런 식으로 input 내부에 svg를 덮어씌우고, input에 padding값을 줘서 입력창을 svg옆으로 밀어내자 ! 결과 나는 왜 placeholder에 svg를 넣으려고 했을까 한 번도 안된다는 걸 의심조차 안 했기 때문 ! 이번에 확실히 알았으니 이런 실수는 다시는 하지 않기로 !

실수,해결 2023.11.26

Toggle Button 만들기 (html, css)

요즘 맨날 리액트로만 프로젝트 하다보니 환기도 할 겸 toggle button 만들어 보려고 한다..! HTML 삽입 미리보기할 수 없는 소스 간단하게 말 하자면, 우리가 기존에 알고 있는 체크 박스 input 아래에 label 태그를 써서 컨텐츠와 input을 연결한다. 이게 무슨 말이냐면, 우리가 login 텍스트를 클릭해도 input 박스를 클릭한 것과 같은 효과이다 즉, label 태그의 for 속성과 input 태그의 id와 연결시킨 거라고 생각하면 된다. 단, 이 부분을 누르면 체크 ! label 태그 안에 input 태그를 넣은 경우, 연관이 암시적으로 되었기 때문에 for 속성과 id 속성이 필요 없다

코딩 2023.08.19

9.form 태그.

태그는 다른 사용자의 의견, 정보를 받기 위해서 사용자가 입력할 수 있는 틀을 만들 때 사용된다. 태그는 전체 양식을 의미하고, 실제로 사용자가 입력하기 위한 태그는 태그 등 여러 태그가 사용된다. 태그에는 여러 속성을 가지고 있다. type 속성을 통해 종류를 나타낼 수 있다. text,radio,checkbox,password,button 등 다양하게 지정 가능. 또한 input 태그는 label 태그와 주로 같이 사용되는데 label 태그와 input 태그를 같이 연결해준다. 여기서 태그는 입력 창의 요소들을 위한 캡션을 나타낸다. (label의 for=""와 input의 id="") 예로 들면 여기를 클릭해보세요 이렇게 label의 for과 input의 id가 연결이 되어있으면, 여기를 클릭해보세..

코딩 2022.11.21