-
float-grid 라이브러리 (feat. inline-grid)코딩/CSS 2022. 6. 21. 09:16
웹퍼블리셔가 가장 많이 사용하는 속성이라고 한다...
내가 봐도 그러해 보이기에 써 놓는 거임.float란?
block 요소는 float 요소를 무시한다.
float:left; : 좌에서 우로 나열된다.
float:right; : 우에서 좌로 나열된다.
clear:both; : float 계의 줄바꿈, 적용시킨 요소부터 새로운 줄에 나온다. (나부터 새 줄에 나올거야!)
ㄴ clear:both;를 적용시키기 위해서는 반드시! display가 block이어야 한다.
float을 사용하게 되면 부작용이 생긴다. block 요소가 float 요소를 무시하게 된다.
ㄴ 해결방안 : 부모의 ::after에 높이가 '0'인 막내를 만들어 형들 아래에 딱 붙여준다.
이러한 문제점까지 보완한 것이 바로 아래의 라이브러리들이다.float-grid 라이브러리
.float-grid > * { float:left; box-sizing:border-box; } .float-grid::after { content:""; display:block; clear:both; }
row/cell 라이브러리 (훗날, 주로 내가 쓸 것 같은 라이브러리)
.cell { float:left; box-sizing:border-box; } .row::after { content:""; display:block; clear:both; }
그리고, 먼저 번에 배워서 이미 정들어버렸지만, 쓰임새가 'float-grid'계열보다 적어보이는
inline-grid 라이브러리...'코딩 > CSS' 카테고리의 다른 글
[패스트캠퍼스] 프론트엔드 강의 2주 차 후기 (0) 2023.03.22 [패스트캠퍼스] 프론트엔드 강의 1주 차 후기 (0) 2023.03.14 calc (CSS 속성값) (0) 2022.06.03 inline-grid (라이브러리) (0) 2022.06.03 CSS 선택자 모음1 ( 내 위주) (0) 2022.06.01