#21 그리드 강의 정렬 관련 속성
322
投稿した質問数 7
.container {
justify-items(가로 방향 정렬) : center;
align-items(세로 방향 정렬) : center;
}
를 설정하는데 각각 색깔이 차있는 div박스가 왜 찌부되는건가요.....???? 가로세로 길이가 지정되있지 않아서 인가요?
외부 컨테이너에서 정렬을 한다는게 내부 요소를 정렬하는건가요? 자식요소를 정렬하는건가요?(둘이 같은 의미인가요??)
다른 프로젝트 할 때도, 뭐가 자꾸 원하는대로 가운데로 안가서 justify-items : center를 쓰면된다는 소리를 듣긴 했었는데, 그때는 아예 의미도 모르고(다른 강사가 안짚어줬는지 까먹었는지) 아 저거 써도 왜 가운데로 안가냐ㅠ 했던 기억이 있는데 정확한 정황은 까먹었네요.
그래서 왜 찌부가 되고 있는걸까요? html&css 강의 마지막에 큰 멘붕 왔습니다
回答 2
0
안녕하세요, 인프런 AI 인턴입니다.
justify-items와 align-items 속성은 CSS Grid 내부에서 그리드 아이템들의 정렬을 결정하는 속성입니다.
justify-items는 그리드 아이템을 가로 방향으로 정렬합니다.
align-items는 그리드 아이템을 세로 방향으로 정렬합니다.
질문해주신 내용에 따르면, 그리드 아이템인 div 박스가 찌그러져 보이는 이유는 아래와 같을 수 있습니다.
div박스의 가로세로 길이가 지정되지 않았을 경우, 기본적으로 내용물의 크기에 맞게 조정되므로, 내용물에 따라 크기가 달라지게 됩니다. 만약 내용이 없거나 크기가 작다면, 가운데 정렬 했을 때 박스가 작게 보일 수 있습니다.
- 외부 컨테이너에서 정렬한다는 것은, 해당 CSS Grid 컨테이너 내부의 자식 요소들(그리드 아이템)를 정렬한다는 의미입니다.
justify-items: center;를 사용했음에도 원하는대로 가운데로 정렬되지 않는 것은, 다른 CSS 속성에 의해 영향을 받을 수 있기 때문입니다. 예를 들어, 다른 CSS 규칙이나 상위 컨테이너의 스타일에 따라 결과가 달라질 수 있습니다.
정확한 원인을 파악하기 위해서는 실제 HTML과 CSS 코드를 확인해 볼 필요가 있습니다. 또한 그리드 컨테이너와 아이템에 설정된 다른 스타일도 영향을 미칠 수 있으므로, 다른 스타일 규칙들도 검토해야 합니다.
메인 컨텐츠가 가운데로 정렬되지 않는 문제에 대해서는, Grid 레이아웃 외에도 여러 방법이 존재합니다. 예를 들어, flexbox 레이아웃을 사용해도 비슷한 동작을 구현할 수 있으며, margin이나 position을 사용한 방법도 있습니다.
만약 이러한 CSS 속성들이나 Grid 및 Flexbox 레이아웃과 관련된 더 자세한 내용을 배우길 원한다면, 웹 개발 카테고리에서 해당 내용을 포괄하는 강의를 찾아 수강하는 것이 좋을 것 같습니다.
최종 코드
0
14
1
Open AI 결제
0
22
2
figma 파일을 받을 수가 없어요
0
31
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
20
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
35
2
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
38
1
구글 서치콘솔 도메인 소유권 확인 실패
0
27
2
antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?
0
52
1
다음 강의 얼른 올려주세요
0
37
2
일반 강의와 차이점?
1
33
1
중요하진 않지만 설명하신부분에서 안된부분..
0
28
0
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
61
2
stopPropagation()에 대해서 질문 있습니다.
0
42
2
뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문
0
39
2
노션에 20.Contact가 없어요
0
47
2
검색엔진 차단 noindex
0
49
2
파트9 강의는 언제 오픈하시나요
0
51
2
ZIP 파일
0
50
2
26강 13F 강의 불일치 및 질문 요청
0
63
3
state 객체로 묶기
0
45
1
XAMPP에서 Apache, DB 재기동 시 접속안되는 문제
0
35
2
flexbox와 grid
0
484
2
img와 video태그를 붙일 때
0
651
2
와진짜 이해 너무잘되요
1
378
1

