[TIL] [CSS] Html 요소 우측 정렬하기 (margin: auto)

이노베이션캠프/리액트 연습주차

개린이다 2023. 6. 27. 13:32

1. 어떤 문제가 있었는지?

2. 내가 시도해본 것들

3. 해결

4. 알게 된 점

- 버튼만 오른쪽으로 옮기고 싶음

- 아래 사진 참고

CSS로 HTML 요소 우측 정렬하기 (Flexbox/Grid)

Engineering Blog by Dale Seo

www.daleseo.com

- 위의 글 참고함

- 어차피 버튼이 속한 div에 flex가 설정되어 있어서 flex 방법을 사용하기로 함

/*부모 div*/
.inputTodoBox{
  display: flex;
}

/*자식 button*/
.inputTodoBox > button{
  margin-left:auto;
}

- maring-left를 사용하니 해결됨!

- 왜 해결되나?

: 이는 margin : auto의 특성을 이해하면 된다

*margin

- 요소의 네 방향 바깥 여백 영역

margin: auto

auto 남은 공간을 최대한 확보하기 위한 특성을 가지고 있음 ! 그런데 이건 상하, 좌우에 따라 조금 다름

margin-left : auto 요소를 오른쪽으로 이동시켜 왼쪽 여백을 최대화함

margin-right : auto 요소를 왼쪽으로 이동시켜 오른쪽 여백을 최대화함

margin-top, margin-bottom : 수직 방향 여백엔 auto 값을 설정하면 해당 여백은 자동으로 0 이 되어버림 !

- 그래서 위와 같이 버튼을 오른쪽 끝으로 보내려고 할 땐,

margin-left:auto;

사용하면 해결이 된다~

- margin의 특성