포스트

자바스크립트와 HTML로 텍스트를 50 50 비율로 가운데 정렬하기

게시
By kobung 2 분읽는 시간

문제 상황 설명

스택오버플로우에서 본 문제는 자바스크립트와 HTML을 이용하여 텍스트를 50:50 비율로 가운데 정렬하는 것입니다. 구체적으로는 한 줄에 두 개의 텍스트 요소가 있을 때, 이 두 개의 텍스트 요소를 각각 50%의 너비를 가지도록 하고 가운데 정렬하는 방법을 찾고 있습니다.

코드의 오류 부분

문제를 이해하는 데 있어 중요한 점은 코드에서 발생하는 오류입니다. 해당 코드의 오류 이름은 Not specified이며, 이것은 코드의 작성자가 문제를 명확하게 표시하지 않았음을 나타냅니다.

CSS Flexbox를 이용한 해결 방법

CSS Flexbox는 이런 문제를 해결하는 데 아주 유용합니다. Flexbox는 컨테이너 안의 아이템들을 가로나 세로로 정렬하는 데 사용됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: center;
  }
  .text1, .text2 {
    flex: 1;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="text1">Text1</div>
  <div class="text2">Text2</div>
</div>

</body>
</html>

위의 코드에서 .container 클래스는 Flexbox를 적용하고, justify-content: center;는 가운데 정렬을 합니다. .text1과 .text2 클래스에 flex: 1;을 설정함으로써 각 텍스트 요소가 50%의 너비를 가지도록 만듭니다.

정리

자바스크립트나 HTML만으로 이 문제를 해결하는 것은 복잡할 수 있습니다. 하지만 CSS의 Flexbox 기능을 사용하면 아주 간단하게 해결할 수 있습니다. 이 방법은 레이아웃을 조정하는 데 있어 매우 효과적이며, 다양한 디바이스에서도 잘 작동합니다.

JavaScript
텍스트가운데정렬
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.