내일배움캠프 5일차 : CSS flex속성으로 버튼 2개 가운데 정렬하기

어쩌다 보니 html과 CSS를 많이 활용하는 파트를 맡아 또 CSS를 활용하는 글을 쓴다. 이번에 발생한 문제는 margin을 통해 버튼 2개를 카드 중간에 가로로 가운데 정렬해서 나타냈으나, 내 컴퓨터가 아닌 다른 팀원의 컴퓨터에서는 정렬이 깨져서 나타나는 것이었다.

 

우선 내가 원하는 버튼의 모습이다.

 

<문제의 코드> 버튼 한 개를 가운데 정렬했던 기억을 더듬어 아래와 같이 margin을 활용하여 버튼 두 개를  나란히 가운데 정렬을해보려했다.

        .showbtnarea {
            margin: 0px auto 0px auto;
        }

        .showbtnarea>button {
            margin: 0px 15px 0px 15px;
        }

 

우선 버튼 두 개를 <div>로 묶어서 'showbtnarea'라고 class를 넣어준 뒤 마진 값을 주어서 구역 자체를 카드의 중앙에 배치하였다. 그리고 그 안에 있는 버튼들의 15px로 마진을 동일하게 주어 나란히 배치되게 만들었다.

 

 

이처럼 내 컴퓨터에서는 원하는 이미지로 보였다. 그래서 성공했다고 생각하고 git hub에 push를 했다. 그런데 문제는 다른 팀원의 컴퓨터에서는 이 정렬이 무너져서 나타나는 것이었다. 아무래도 추측으로 컴퓨터마다 디스플레이 설정이 모두 달라 카드의 body 크기가 일정하지 않은데 margin에 auto를 넣은 것이 화근이었던 것 같다. 그래서 다른 어떤 방법이 있을지 생각하며 찾아보던 중 새로운 코드를 찾아냈다.

 

        .showbtnarea {
            width: 130px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0px auto 0px auto;
        }

        .showbtnarea>button {
            text-align: center;
        }

 

실제로 문제를 해결하는 데 사용한 코드이다. 버튼을 묶은 구역의 가로 값은 주되 display를 flex로 주어 버튼을 가로 방향으로 배치했다. 그리고 justify-content를 활용하여 버튼 사이에 동일한 간격을 만들어줬다. align-items를 활용해서는 세로축의 중앙에 배치시켰다. 그리고 text-align을 통해 버튼의 텍스트들도 중앙정렬해 주었다.

 

지금까지는 margin padding을 통해 단순히 배치를 진행해 왔었다. 하지만 이번 문제를 통해 display와 justify-content 등의 다양한 정렬 속성이 있으며 이것들을 익힐 수 있었다. 또한, 이번 경험을 통해 사용자마다 다양한 디스플레이환경이 있으며, 이것을 고려한 코딩을 해야 한다는 것을 배웠다.