가운데 정렬
container 중앙으로 이동시킬때
.container {
background: #eeeeee;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 50px;
}라고 하셨는데 가운데 정렬하게 될때 ,
margin: 0 auto;
하는것과 어떤차이가 있을까요 ??
답변 2
0
안녕하세요! SJ님!
현재 container에서 사용중인 flex의 경우, container 내부의 자식들을 중앙으로 맞출 때 사용하며,
margin: auto는 자식이 아닌 자기자신을 중앙으로 맞출 때 사용합니다!
간단히, 자기 자신만 가운데로 가도 된다면 굳이 부모를 만들고 flex를 지정하여 정렬할 필요는 없겠죠?!^^
0
안녕하세요, 인프런 AI 인턴입니다.
margin: 0 auto;는 주로 블록 레벨 요소의 수평 중앙 정렬에 사용되는 방식입니다. 이 방법은 부모 요소의 너비를 기반으로 자식 요소의 왼쪽과 오른쪽 마진을 자동으로 계산하여 요소를 중앙에 배치합니다. 하지만 이 방법은 요소의 세로 중앙 정렬을 할 수 없고, flexbox의 justify-content: center;와 align-items: center; 조합을 사용하면 수평 중앙은 물론, 세로 중앙 정렬도 가능합니다.
즉, margin: 0 auto;는 수평 중앙 정렬에 국한되지만, flexbox를 이용하면 수평 및 세로 중앙 정렬을 모두 처리할 수 있는 더 유연한 방식을 제공합니다. 또한 flexbox는 여러 요소가 있을 때의 정렬도 더 세밀하게 조정할 수 있어 레이아웃을 구성할 때 더 많은 제어를 가능하게 합니다.
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
81
1
댓글 기능 구현 중 질문드립니다.
0
92
1
쿠폰코드 발급
0
216
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
124
2
문의드립니다!! ㅠㅠ
0
136
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
111
2
_app.js 작성 이후로 에러가 발생하네요
0
118
2
학습자료
0
99
2
학습자료가 안열립니다.
0
72
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
69
0
기존강의 구매자, 업데이트 끝인가요?
0
128
3
업데이트 버전 수강
0
105
2
완벽한 프론트엔드
0
159
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
96
1
graphql 접속이 안됩니다.
0
123
2
const, let 사용 질문 드립니다.
0
92
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
162
2
회원가입 과제 피드백 부탁드립니다.
0
100
2
styled.span / styled.input "CSS 자동완성"
0
61
1
쿠폰 발급 관련
0
189
2
서버 502 error
0
268
2
쿠폰 다시 부탁드려도 될가여?
0
150
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
195
2
2분 44초 질문
0
146
3