모바일 포트폴리오 이미지
안녕하세요,
모바일 버전 포트폴리오 이미지에서
#portfolio .container {
/* display: flex;
flex-wrap: wrap;
gap: 20px; */
}이 부분을 주석으로 바꾸면
이렇게 세로가 아니라 가로로 바뀌는데
뭐가 잘못된걸까요?
回答 2
0
안녕하세요, 인프런 AI 인턴입니다. rkdtjdtls91님.
CSS에서 flex 관련 스타일을 제거했을 때 요소들이 가로 방향으로 배열된다고 하셨네요. 이 문제의 근본적인 이유는 CSS 레이아웃에서 display: flex 속성과 관련 설정들이 사라지면서, 기본적인 블록 요소의 동작 방식으로 돌아가기 때문입니다.
핵심 개념:
Flexbox:
display: flex를 사용하면 자식 요소들이 부모 요소의 넓이에 맞춰 자동 배열됩니다. 주어진 코드를 보니 요소들이 일정한 간격과 행 기준으로 정렬되도록 설계되었습니다.기본 블록 레이아웃:
flex속성을 주석 처리하면, 본래 HTML 블록 요소의 기본 동작 방식인 가로 줄 배치로 돌아옵니다. 이 때문에 첫 번째 자식 요소가 부모의 너비만큼 공간을 차지하게 되어 가로로 늘어지게 됩니다.
해결 방법:
- 만약 요소들을 다시 세로 방향으로 정렬하고 싶다면 CSS에서
display: block또는display: grid를 고려하거나, 다시flex속성을 활성화하시고 필요한 경우 추가적으로 스타일 속성을 조정하여 레이아웃을 필요에 맞게 수정할 수 있습니다.
관련 자료:
좀 더 명확히 이해하고 싶으시다면, 아래와 같은 유사한 상황에 대한 논의와 해결 방법을 참고하시는 것도 좋습니다:
- Flexbox 없이 기본 레이아웃이 변화하는 이슈 (출처: 인프런 질문 & 답변 게시판)
추가적으로 도움 필요하시면 언제든지 말씀해 주세요!
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
수업자료와 노션 공유 문제
0
15
3
디자인 시스템 강의 질문
0
32
1
[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지
0
34
1
[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지
0
41
1
[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지
0
28
1
'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.
0
54
2
PPT 제작 시 실제와 강의 내용 차이 문의
0
37
1
경력기술서는 어떤 방향이 좋을까요?
0
52
2
figma.com/@boldux 계정이 없다고 나옵니다
0
37
2
문의
0
42
1
왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?
0
74
3
어플리케이션 실행 후 에러에 관하여 질문 드립니다.
2
60
2
26,27강 진행 간 노션, html 프롬프트 파일 불일치
0
67
3
<div id="banner">배너 이미지</div> 관련 질문
0
34
1
변수 설정 시에 질문입니다.
0
39
2
템플릿 생성
0
52
1
클로드 디자인 안에서 프롬프트 작성시?
1
49
1
디자인 시스템 관련 질문드립니다!
1
69
2
#portfolio .container 넓이
0
96
2
마진확인하는 법
0
392
2
svg 이미지 저장
0
118
1
오토레이아웃
0
124
2
버튼이 없습니다
0
118
2
Content Reel에서 Apply All이 안됩니다.
0
188
2