flex가 적용되면 하위에 있는 인라인의 속성은?
360
12 asked
'반응형 헤더영역'을 다시 보는 중이었는데요.
.gnb a 에 상하마진이 먹히는걸 보면서. 어? a태그는 인라인인데 왜 상하마진이 먹힘?
그래서 제가 이것저것 테스트를 해 봤더니.
flex가 적용되면 하위에 있던 인라인 요소들은 자동적으로 인라인블록으로 변하는 것 같습니다.
포지션 속성을 주면 인라인블록으로 변하는 것 처럼요.
Answer 1
1
잘 보셨습니다.
플렉스를 선언하면 자식요소(자손요소 아님)는 모든 요소가 무조건 마진이 없는 인라인 블록이 됩니다.
인라인 블록은 우측에 폰트 관련 마진이 5픽셀 정도 생깁니다. 하지만 플렉스 자식요소 인라인 블록은 우측에 폰트 관련 마진이 생기지 않습니다. float를 준 것과 동일합니다. 다만 float의 경우 자식요소가 float가 되면 부모요소가 높이 값을 잃게 되어 찾아주어야 합니다. 그리고 보더와 패딩 값까지 생각해서 box-sizing: border-box 도 주어야 합니다.
이런 모든 것들을 하지 않아도 되게 하는게 플렉스입니다.
가로스크롤
1
459
1
상위 태그 영역 무시 하는 방법
1
843
2
반응형 적응형 구분
2
804
2
슬릭 슬라이더 버튼
1
370
1
slick 모바일로 변환했을때..
1
607
1
x scroll 이 왜 생기는 걸까요?
1
870
1
영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)
1
249
1
모바일에서 이미지 짤림 현상
1
2743
2
질문 있습니다
1
242
1
안녕하세요
1
259
1
모바일버전에서 스크롤이 생겨서요 ㅜㅜ
1
289
1
반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.
1
387
2
슬라이딩 스크롤이 이상하게 먹혀요!
1
408
2
slick slider 하는데 패딩이 안먹혀요
1
764
2
제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.
1
317
1
혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?
1
250
1
소스랑 자료 다운로는 어디서 받을 수 있나요?
1
300
1
반응형 헤더 네비게이션 강의 질문있습니다.
1
203
1
그 반응형 질문 있습니다
1
225
1
질문드립니다 강사님
1
290
2
flex 레이아웃 배치 질문있습니다.
1
221
1
미디어쿼리 반응형 만들때 사이즈 질문있습니다.
1
202
1
인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.
1
973
1
태블릿부분에서 사진이 삐져나오는 부분 질문
2
238
1