[html/css] input 태그 안에 button 태그 넣기

개발을 하다보면 input 태그를 통해 입력 받아서 button 태그를 눌러 정보를 제출하는 상황은 자주 발생한다.

 

일반적으로 아래와 같이 input 태그 옆에 button 태그를 두면 쉽게 구현할 수 있다.

하지만 더 예쁘게 만들고자 아래와 같이 input 태그에 button 태그를 넣고 싶다면 어떻게 해야 할까?

우선 다음과 같이 태그를 배치해보자.

    <div id="container">
        <input type="text" placeholder="메시지를 입력하세요.">
        <button>제출</button>
    </div>

 

이제 div, input, button 태그에 css를 넣어서 input 태그 안에 button 태그가 위치하도록 해보자.

 

먼저 div 태그의 css 코드이다.

#container{
    width: 300px;
    height: 50px;
    position: relative;
    display: flex;
}

position을 relative로 준 이유는 button 태그가 이 div 태그를 기준으로 오른쪽에 띄우게 하기 위해서다.

 

가로로 input과 button을 배치하기 위해서 flex 속성을 주었다.

 

다음은 input 태그의 css 코드이다.

#container input{
    width: 100%;
    border-radius: 15px;
}

 

너비가 div 태그와 동일하도록 100%를 주었다.

 

다음은 button 태그의 css 코드이다.

#container button{
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    border-radius: 15px;
}

 

button 태그가 input 태그 안에 있는 것처럼 보이게 하기 위해 absolute 속성을 주었고 top, bottom, right로부터 5px정도 떨어져 있도록 하였다.

 

absolute 속성을 주면서 이 버튼 태그는 부모인 div 태그를 기준으로 배치가 된다.

 

<결과>