HTML에서 버튼 오른쪽 정렬

버튼을 포함 영역의 오른쪽 끝에 배치하려면 컨테이너 안에 넣고 컨테이너의 CSS text-align 속성을 right로 설정하세요. 정렬 위치는 컨테이너의 사용 가능한 너비를 기준으로 하므로, 컨테이너가 버튼을 놓으려는 영역 전체를 차지해야 합니다. 이 글에서는 대안으로 float: right를 사용하는 방법도 보여 주고, 레이아웃 동작이 어떻게 다른지 설명합니다.

버튼을 오른쪽 정렬하는 데 사용하는 속성

CSS의 text-align을 사용하면 컨테이너 안의 인라인 콘텐츠를 정렬할 수 있고, float을 사용하면 요소를 띄울 수 있습니다. 페이지 요소를 배치하는 방법을 더 알아보려면 정렬에 사용하는 다양한 CSS 속성을 참고하세요.

text-align 속성으로 HTML 버튼을 오른쪽 정렬하기

버튼을 <div> 안에 넣고 해당 <div>에 text-align: right를 적용하세요. 예를 들어 전체 마크업은 <div class="button-row" style="text-align: right;"><button type="button">Save</button></div>와 같습니다. 버튼은 일반 인라인 콘텐츠 흐름을 유지하고, 컨테이너가 버튼을 오른쪽으로 정렬합니다. 스타일시트에서는 같은 규칙을 .button-row { text-align: right; }로 작성한 뒤 <div>에 class="button-row"를 지정할 수 있습니다.

이 독립 실행형 JavaScript 예제는 컨테이너 방식을 사용하는 전체 HTML 페이지 소스를 출력합니다. 출력된 마크업을 HTML 파일로 저장해 브라우저에서 열면 페이지 오른쪽에 버튼이 표시됩니다. 바이트 단위로 보존되는 예제 안의 버튼 라벨 Save는 영어로 표시됩니다.

const page = `<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>`;

console.log(page);

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>

이 방법은 버튼을 컨테이너 안에서 정렬하며, 브라우저 창의 오른쪽 끝에 자동으로 맞추지는 않습니다. 사용할 영역에 맞춰 컨테이너 너비를 지정하세요. 너비가 전체인 블록 컨테이너라면 버튼은 해당 블록의 오른쪽 끝에 정렬됩니다. 이 HTML 및 CSS 조각은 소스 예제이므로, 시각적인 결과를 보려면 브라우저에서 렌더링해야 합니다.

float 속성으로 HTML 버튼을 오른쪽 정렬하기

버튼 자체를 띄우려면 <button type="button" style="float: right;">Save</button>를 사용하거나, 스타일시트에 .action-button { float: right; } 규칙을 넣고 버튼에 class="action-button"을 지정하세요. float은 버튼을 포함 블록의 오른쪽으로 이동시키며 주변 인라인 콘텐츠의 흐름을 바꿉니다. 주변 레이아웃의 콘텐츠가 띄운 버튼 아래에서 시작해야 한다면 float을 해제하거나 flexbox 같은 레이아웃 방식을 사용하세요.

컨테이너 방식과 마찬가지로 float의 위치도 포함 블록 너비를 기준으로 합니다. 이 속성만으로 버튼이 브라우저 창의 오른쪽 끝에 배치되지는 않습니다. 이 예제는 브라우저의 CSS 동작을 설명하며, 설정된 런타임에서 실행할 수 있는 코드는 아닙니다.

버튼 정렬에 가장 적합한 CSS 속성

행이나 섹션의 오른쪽에 버튼 하나를 배치하려면 컨테이너에 text-align: right를 적용하는 방법을 권장합니다. 버튼이 일반 흐름을 유지하고, 인라인 콘텐츠의 위치를 컨테이너가 제어한다는 점도 분명해집니다. 버튼이 텍스트와 함께 배치되어야 하거나 주변 레이아웃에서 float을 요구하는 경우에는 float: right를 사용하세요. 버튼 옆으로 흐르는 콘텐츠를 고려하고, 뒤따르는 콘텐츠가 아래에서 시작해야 한다면 float을 해제하세요.

두 방법 모두 사용할 페이지 영역을 대신 선택해 주지는 않습니다. 버튼이 너무 왼쪽이나 오른쪽에 보이면 컨테이너의 너비와 위치를 확인하세요. 여러 컨트롤을 배치하거나 간격을 더 복잡하게 조정해야 하는 레이아웃에는 justify-content: flex-end를 사용하는 flex 컨테이너도 선택지가 될 수 있지만, 앞서 설명한 두 방법은 기본적인 정렬 작업에 적합합니다.

결론

간단하게 버튼을 오른쪽 정렬하려면 적절한 너비의 컨테이너에 text-align: right를 적용하세요. 텍스트 흐름을 다르게 처리해야 한다면 버튼에 float: right를 적용하고 주변 콘텐츠의 배치를 함께 조정하세요. 두 방법 모두 눈에 보이는 오른쪽 끝은 포함 블록에 따라 결정됩니다.