TIL - heading 태그와 다른 태그를 한 줄에 넣기

상단에 우리가 일반적으로 보는 헤더처럼 heading 태그 < h1 >과 다른 button들을 같은 줄에 넣고 싶었다.

<div class="header">
            <h1><a href="index.html">MUMA</a></h1>
            <span class="headerBtn">
                <button onclick="open_search()"><img src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/></button>
                <button>로그인</button>
                <button>회원가입</button>
            </span>
        </div>

처음엔 이렇게하고 span 태그의 justify-content를 end로 해서 오른쪽으로 붙이기는 했는데 계속 h1태그와 줄이 달랐다.

display: flex;
flex-direction: row;
align-items: center;
justify-content: end;

그런데 알고보니 Heading 태그들은 모두 block 태그로 한 줄을 다 차지하는 태그였다. 그래서 이번엔 h1을 inline으로 바꿔주었더니 span태그가 h1 옆에 같은 줄로 붙기는 했다.

        h1{
            display: inline;
            margin: 20px 0 0 20px;
        }

그런데 이번엔 또 justify-content: end;가 먹지 않고 너무 h1태그 옆으로 붙어버렸다. 그래서 찾은 결과 span태그를 오른쪽으로 float을 주었더니 아래와 같이 나란히 또 따로 버튼이 위치하였다.

.headerBtn{
            float: right;
            margin: 10px 20px 0px 0px;
        }

float: 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

float에는 none; right; left; 등의 속성값을 사용할 수 있다.