패스트캠퍼스 환급챌린지 12일차 : 김민태의 프론트엔드 Pre Academy : 처음 시작하는 프론트엔드 강의 후기
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/4hTSJNB
250316(일) 12일차
상자 정렬
- display: flex = 수평 정렬
- 정렬하고 싶은 아이템의 부모 요소에 사용하는 속성과 값
- justify-content : center = 가운데 정렬
- end = 오른쪽 정렬
- 기본값은 왼쪽 정렬
- align-items = 수직 정렬
- center = 수직 가운데 정렬
- end = 수직 아래쪽 정렬
- 기본값은 수직 위쪽 정렬
- gap = 아이템들 사이 사이의 여백
정렬하고자 하는 대상을 감싸는 부모 요소에 flex 추가하고
justify-content, align-items로 수평, 수직 정렬 값 입력
글씨 1, 2, 3, 4를 정렬할 땐 flex를 .item에 부여했고
각각의 item을 정렬할 땐 item을 감싸고 있는 부모 요소인 .container에 flex 추가
이전 css 강의 들었을 때부터 flex가 살짝 어렵게 느껴졌는데
이번 강의가 flex여서 집중해서 들었다
근데 강의에서 강사 분이 한 말이 display: flex는 "정렬하고 싶은 아이템의 부모 요소"에 사용하는 속성 값이라길래
그렇다면 .container에 display: flex를 줬기 때문에
.item에는 flex를 안주고 justify-content와 align-items만 써도 적용되야 하는거 아닌가 싶어 .item에 적용해봤으나 정렬이 안먹혔다
??? 그럼 정렬하고 싶은 아이템의 부모 요소 라는 설명이 잘못된건가 싶어 바로 GPT
GPT왈 : 설명이 완전히 틀린 것은 아니지만 오해를 불러 일으킬 수 있는 불완전한 설명
설명의 문제점 : 정렬하고 싶은 아이템의 부모 요소에 display: flex를 적용하면 된다
-> 이 설명만 보면 한 번만 display: flex를 쓰면 모든 정렬이 해결될 것 처럼 들림
올바른 설명 : 각각의 부모 요소마다 별도로 display: flex를 적용해야 한다
라고 하는데 코드는
<div class="container">
<div class="item">1</div>
</div> 형태라 .item은 부모가 아님
이거로 한창 씨름하다가
결론
"내부 요소를 정렬하려면 flex를 적용해야 한다"
"텍스트만 있을 경우 flex보다 text-align: center + line-height로 정렬 가능(flex 사용 없이)"
flex 정보 찾다가 강의 하나만 들었는데 한 시간 걸렸다
오래 걸려도 확실하게 아는 것이 중요하니깐, 오늘은 여기서 끝
그냥 모든 요소에 display: flex 쓰면 되는건지
아직도 100%는 아닌 거 같은 느낌
미션 제출하다가 살짝 알 것 같은 느낌
정렬하고 싶은 아이템(.item)의 부모 요소(.container)에 display: flex를 적용해서 .item이 수평으로 정렬됐고,
.item안에 있는 요소도 정렬하려고 flex 사용, (텍스트의 경우 굳이 쓸 필요없지만, 텍스트가 아닌 요소를 쓰는 경우도 있으니)
