글에서 벽돌를 쌓는 것과 같은 레이아웃을 만드는 것에 대해 적으려고 한다. 벽돌을 쌓아올린 것과 같은 레이아웃을 Masonry 레이아웃이라고 한다.
Masonry와 Masonry 레이아웃 이해
사전에서 masonry 뜻을 찾아보니 벽돌공사 등 다양했다. 사전의 뜻보다 구글 이미지 검색에서 masonry을 찾아보는 것이 이해가 빠르다. 어떤 경우는 이미지가 글보다 이해에 도움이 많이 된다. 글에서 레이아웃(layout)을 다루니 masonry layout도 찾아보려고 한다.
구글 이미지 검색을 통해서 찾은 이미지를 보면 Masonry와 Masonry Layout을 이해하는데 도움이 될 것이다. Masonry는 사각형을 일정하게 쌓는 것이 아니다. 내가 적으려는 것은 가로크기는 같고 세로크기는 다른 것이다. 이것을 핀터레스트에서 사용했기 때문에 핀터레스트 레이아웃이라고도 한다. 예로 아래 그림은 왼쪽은 핀터레스트이고 오른쪽은 구글의 컬렉션으로 아래와 같이 구현되는 것을 말한다.
내 생각에 시간이 흐르면 구글 컬렉션 비슷한 것을 네이버에서 비슷한 것을 만들 것 같다. 네이버에서 구글 애널리틱스 등 구글의 서비스를 많이 따라 하는 것이 많이 보았다.
구글, 네이버, 다음 이미지 검색처럼 가로크기가 다르고 세로크기가 같은 것이 아니다. 나는 위처럼 가로크기는 같고 세로크기가 다른 것을 적으려 한다. 참고로 아래는 다음의 이미지 검색이다.
이 글을 쓰는 지금 이 블로그 첫화면에서 최신 글은 Marsonry 레이아웃을 하고 있다. 내가 사용하고 있는 Masonry 레이아웃을 위해 여기에서 다운로드 및 미리볼 수 있는 소스를 사용했다. 소스 등을 다운로드 할 수 있는 페이지에서 미리보기 바라면 이 블로그에서 보지 말았으면 한다.
왜냐하면 이 블로그에서는 Masonry 레이아웃만 보는데 적당하지 않기 때문이다. 특정 곳에 마우스 포인터를 가져가면 그림자, 밑줄이 생긴다. 그리고 이미지인 경우 크기도 커진다. 이것은 Masonry 레이아웃과 아무런 상관이 없다.
부트스트랩
부트스트랩 사용 : 단, 이 블로그에서 사용하는 Masonry 레이아웃은 부트스트랩을 사용하고 있다. 모든 Masonry 레이아웃이 부트스트랩을 사용하지 않음을 알았으면 한다. 그러니 부트스트랩을 사용하지 않는 스킨이라면 그 소스를 따라 하면 안 될 것이다. 아래 홈페이지는 부트스트랩과 무관한 Masory 홈페이지니 관련 정보를 알고 싶다면 방문했으면 한다. 참고로 홈페이지의 언어는 영어이다.
- Masonry 홈페이지 : https://masonry.desandro.com/
부트스트랩 4는 필요없음 : 부트스트랩 3이 아닌 4에서는 card 콤포넌트로 masonry 레이아웃을 구현한다. 그래서 4를 사용한다면 어렵게 Masonry 레이아웃를 구현하려고 노력할 필요 없다. https://getbootstrap.com/docs/4.5/components/card/ 페이지의 맨아래쪽에 아래 그림처럼 나온다. 이 블로그는 부트스트랩 3을 사용했으므로 사용해야 한다.
- 부트스트랩 홈페이지 : https://getbootstrap.com/
어려운 점이 있으면 설명하려고 했지만 소스 등을 다운로드 할 수 있는 페이지에서 구현 방법을 자세히 설명했으니 그대로 따라 하면 방법은 어렵지 않을 것이다.
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩4를 일본어 번역해서 보기 (0) | 2020.08.17 |
|---|---|
| 부트스트랩에서 익스플로러 지원 (0) | 2020.08.10 |
| 부트스트랩5 알파에 '그리드 레이아웃'이 없다. (0) | 2020.07.30 |
| 부트스트랩5 알파가 나왔다는 것을 알았다 (0) | 2020.07.28 |
| 타임라인 리스트 만들기 (2) | 2020.05.01 |
| 부트스트랩3를 사용한 탭 (0) | 2020.03.13 |
| 부트스트랩3,슬라이드 표시 원 크게 (0) | 2020.02.21 |
| 부트스트랩 버전 3,4,5 소식 (0) | 2019.11.12 |
