본문 바로가기

반응형

input

Input 태그 테두리 없애보리깅~ (focus, outline) 오늘 개인 프로젝트를 진행하다가 input 태그의 테두리 부분을 없애는 부분에 대해서 한번 정리해두면 나중에 또 쓸일이 있을것 같아 정리해본당 우선 html css 를 조금 만져봤다면 border 속성을 이용해 웬만한 블록의 테두리들은 다 관리해 줄 수 있다. 이 상태에서 테두리를 없애보릴라믄 border:none 을 해주면 된다링 .writeInput{ font-size:30px; padding: 20px; width: 70vw; border:none; } 테두리를 없애는데 벌써 성공해 버렸지만 input 태그에 focus 가 되는 순간 바로 테두리가 생겨버린당 ㄷㄷ.. 요때는 hover 와 마찬가지루 .writeInput{ font-size:30px; padding: 20px; width: 70vw;.. 더보기
<Reactjs>Input상태 관리 , 여러개 Input 상태 관리 저번에 숫자 값의 상태 관리를 useState 를 이용해서 해보았는데 마찬가지로 비슷하게 이번엔 문자값을 변화해주면서 간단한 예제로 정리해보자. 우선 InputSample이라는 컴포넌트를 하나 만들어준뒤에 실행시켜주면 이렇게 정적으로 내가 써준 내용이 보여진다. 이 상태에서 글을 입력하게 되면 이런식으로 상태값이 바뀌고 초기화 버튼을 누르게 되면 다시 빈칸으로 설정 되는 것을 볼 수 있다. 저번 숫자값을 동적으로 변화시키는 글과 달라진 점은 우선 event 를 인자로 받아서 target.value 를 써준 것인데 현재 태그에 입력되어 있는 텍스트로 값을 변화시켜야 되기 때문에 e.target.value 로 값을 세팅해준 것이다. 포인트는 'useState' 를 사용해준 것과 필요에 따라 event 속성을.. 더보기

반응형