• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

flex준 first-child{ order:1;} 문의드려요~

21.07.12 11:28 작성 조회수 130

1

안녕하세요~쌤 이번 강의도 넘 유용하게 듣고 있어요!
문의드릴부분이 feature 모바일변환시 2번쨰 content> feature-about+feature-mock-up 순서라 글자와 사진의 순서를 바꾸쟌아요. 그런데 .feature-content.flex-order > div: first-child{order:1 } 이면 글자고 글자를 먼저 보이라고 준건데 왜 글자가 아래로 내려가고 목업이 위로가게 되나요?
그리고 한가지더 질문이...모바일 작업하실떄 폰트크기가 커서 두줄이 될경우 작게 맞춰주시는데 작업사이즈가 "375"로 하시더라구요. 저는 "768"로 하고 있는데. 그러면 글자가 한줄에 들어올떄가 많거든요. 실제 어떻게 세팅을 하고 작업하는게 결과물 다른분들이 여러폰으로 볼떄 제일 적합한가요?
시즌1 아직 못봤는데 2가 나왔더라구요..ㅋ 다 들어야겠어요~
감사합니다~!
css
/* Change order with Flex */
.feature-content.flex-order{
display: flex;
flex-direction: column;
}
.feature-content.flex-order > div:first-child{
order:1;
}
html
<div class="feature-content flex-order"><!-- feature-content 2-->
<div class="feature-about ltr wow">
<img src="images/icon-num-02.png">
<h2>CEO 오프라인 모임 참석(월 2회)</h2>
<p>스타트 업메이트 CEO 회원들만의 오프라인 모임을 월 2회 진행합니다. 온라인에서 부족한 상호작용을 위해 오프라인 모임을 만들고 해당 오프라인 모임에서 다야한 업종의 CEO들과 고민을 나누는 자리가 됩니다.
</p>
</div>
<div class="feature-mockup rtl wow">
<img src="images/feature-mockup-02.png">
</div>
</div>

답변 1

답변을 작성해보세요.

2

order 주실 때 한쪽에만 주시지 마시고 양쪽 모두 주세요.

예를들어...

.parent div:nth-child(1) {

    order: 2;

}

.parent div:nth-child(2) {

    order: 1;

}

모바일 작업 사이즈를 768픽셀로 하시면 안될 것 같아요.

768픽셀은 모바일을 가로로 보는 경우에 해당되는데 그런 경우는 거의 드물잖아요.

모바일 작업하실 대는 400~420픽셀 사이에서 작업하세요.

안정적으로는 400픽셀을 넘기지 않으시는게 좋습니다.

답변 넘 감사합니다! 이번 클래스도 다른 부분 배우면서 너무 도움되었어요!