TIL64-01 Input 안에 버튼 넣기

Input안에 버튼 넣기

-Input 안에 버튼을 넣는 방법은 다음과 같다.

• input 요소와 button 요소를 Label 컴포넌트 내에 넣으므로, input 요소 내부에 버튼을 삽입할 수 있다. 예를 들어, input 요소 내부에 이미지(img)를 넣고 싶다면, 다음과 같이 작성할 수 있다.

  return (
      <Label>
        <input></input>
        <button>
          <img src="/image/img.svg" />
        </button>
      </Label>
	)

const Label = styled.label`
  position: relative;

  input {
    border: none;
    padding: 0 15px;
    height: 40px;
  }
  button {
    position: absolute;
    top: 0;
    right: 5px;
  }
`;

• 위 코드에서는 input 요소와 버튼(button) 요소를 Label 컴포넌트 내부에 넣어서 Input 안에 버튼을 만들고 있다.

• styled-components를 사용하여 Label 컴포넌트를 정의하고, 내부에서 input 요소와 button 요소의 스타일을 정의한다.

• input 요소의 스타일은 border, padding, height 속성으로 정의되고, button 요소는 position: absolute로 정의되어 Label 컴포넌트 내에서 위치가 조정된다.