CSS Grid와 다단(multi column)
CSS Grid와 다단(multi column)
Grid
위에서 아래 방향으로 작성되는 html은 웹상에서 기본적으로 위에서 아래로 해당 내용(소스)들이 보여진다. 이러한 소스들을 위아래방향이아닌 좌우 방향으로 배치도 가능한데 이럴때 grid속성을 사용한다.
grid ---> block element
inline-grid ---> inline element
***공부하면서 발생했던오류
grid로 레이아웃을 잡기위해서 div나 span태그로 각각의 컨텐츠들을 묶게되면 오류를 발생시킬 수 있다. div 혹은 span태그 각각의 묶음안에있는 컨텐츠에 스타일 속성중에 %와 관련하여 속성이 지정된것이 있을경우 문제를 야기할수있다. 그이유는 해당%관련 속성이 부모태그의 크기에 영향을 받게되는데 레이아웃을위해 크기가 지정되어있지않은 div나 span 태그 기준으로 해당%속성이 적용되므로 이미지와같은 컨텐츠에 적용되어있는 %가 적용되지않고(즉 크기 0에대해 %가 부여되므로) 이미지가 안보이거나 컨턴츠가 사라지는등의 문제를 발생시키므로 %가아닌 px단위로 속성을 부여해야한다.
grid ---> block element
inline-grid ---> inline element
***공부하면서 발생했던오류
grid로 레이아웃을 잡기위해서 div나 span태그로 각각의 컨텐츠들을 묶게되면 오류를 발생시킬 수 있다. div 혹은 span태그 각각의 묶음안에있는 컨텐츠에 스타일 속성중에 %와 관련하여 속성이 지정된것이 있을경우 문제를 야기할수있다. 그이유는 해당%관련 속성이 부모태그의 크기에 영향을 받게되는데 레이아웃을위해 크기가 지정되어있지않은 div나 span 태그 기준으로 해당%속성이 적용되므로 이미지와같은 컨텐츠에 적용되어있는 %가 적용되지않고(즉 크기 0에대해 %가 부여되므로) 이미지가 안보이거나 컨턴츠가 사라지는등의 문제를 발생시키므로 %가아닌 px단위로 속성을 부여해야한다.
CSS 다단(multi column)
다단(multi column)
https://www.youtube.com/watch?v=OnDuPsg631g&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62&index=39
핀터레스트 레이아웃
https://opentutorials.org/module/2398/13712
댓글
댓글 쓰기