JSX, div 두개 한 줄에 출력하기

html, css 하며 했던 가장 기본적인 내용인데

 justifyConfent 만 하고 끝이 아니라 display: 'flex' 도 해주는 걸 까먹지 맙시다 !

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>

 

 

 JSX에서 span과 select 한 줄 출력 예시 ⬇ (feat. chatGPT)

. Flexbox 사용

CSS의 Flexbox를 사용하여 부모 div 컨테이너 안의 자식 엘리먼트를 가로 방향으로 정렬할 수 있습니다. justifyContent: 'space-between'를 이미 사용하셨으므로, 아마도 부모 컨테이너는 Flex 컨테이너일 것입니다. 이 경우 아래와 같이 시도해볼 수 있습니다.

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
  <span>{currentUrl}</span>
  <select defaultValue='' className='chosen-select'>
    {/* 옵션들 */}
  </select>
</div>

위 코드에서 alignItems: 'center'는 자식 엘리먼트를 수직으로 가운데 정렬하기 위해 사용됩니다.

2. Inline 스타일 사용

간단한 경우에는 각 엘리먼트에 display: 'inline' 스타일을 적용하여 한 줄에 나란히 배치할 수 있습니다.

<div>
  <span style={{ display: 'inline' }}>{currentUrl}</span>
  <select defaultValue='' className='chosen-select' style={{ display: 'inline' }}>
    {/* 옵션들 */}
  </select>
</div>

3. CSS 클래스 수정

만약 기존 CSS에 클래스명을 추가하거나 수정할 수 있다면, 클래스를 다음과 같이 수정하여 시도해볼 수 있습니다.

/* 기존 스타일 */
.chosen-select {
  /* ... */
  display: inline; /* 혹은 display: inline-block; */
  /* ... */
}

이후 HTML 코드에서 licenseSelect 클래스를 사용하는 부분을 다음과 같이 수정합니다.

<div style={{ justifyContent: 'space-between' }}>
  <span>{currentUrl}</span>
  <select defaultValue='' className='chosen-select'>
    {/* 옵션들 */}
  </select>
</div>

위 세 가지 방법 중 하나를 사용하여 span과 select를 한 줄에 나란히 출력할 수 있을 것입니다. 원하는 결과에 가장 적합한 방법을 선택하여 적용해보세요.