가운데 정렬
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
58
1
댓글 기능 구현 중 질문드립니다.
0
78
1
쿠폰코드 발급
0
185
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
103
2
문의드립니다!! ㅠㅠ
0
116
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
87
2
_app.js 작성 이후로 에러가 발생하네요
0
100
2
학습자료
0
78
2
학습자료가 안열립니다.
0
56
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
63
0
기존강의 구매자, 업데이트 끝인가요?
0
114
3
업데이트 버전 수강
0
91
2
완벽한 프론트엔드
0
138
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
86
1
graphql 접속이 안됩니다.
0
103
2
const, let 사용 질문 드립니다.
0
76
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
132
2
회원가입 과제 피드백 부탁드립니다.
0
85
2
styled.span / styled.input "CSS 자동완성"
0
50
1
쿠폰 발급 관련
0
171
2
서버 502 error
0
253
2
쿠폰 다시 부탁드려도 될가여?
0
142
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
186
2
2분 44초 질문
0
138
3