# masonry

jongk91

프로젝트 작업중 이미지들이 위의 핀터레스트 이미지들 처럼 배열을 하고 싶어져 css로 고군부트를 했는데...masonry라는 간단한 라이브러리를 알게되어 정리를 하려고 한다.아래의 링크로 들어가 js를 복붙하여 사용한다.🔗 masonry.js 링크width의 고정법

1003gorkd

라이브러리에 추가할 컴포넌트를 생각해보다 이전에 시간이 없어서 스킵하고 넘어간 Masonry 레이아웃을 한번 만들어 보았습니다.Masonry 레이아웃은 벽돌과 같은 형태로 대표적으로 핀터레스트에서 사용하고 있는 형태로, 이미지를 나열하는데 사용하면 좋은 레이아웃 입니다

nawhes_joo

head에 추가한다.내비게이션 영역을 위처럼 수정한다.스크롤을 내려도 상단바는 고정이 되고,About, Portfolio, Contact를 누르면 해당 위치로 스크롤되어 이동한다.마스터헤드에 위 코드를 수정결과@charset "UTF-8";/ 구글폰트로 웹사이트 글자체

jyooj08

egjs/grid repository: https://github.com/naver/egjs-grid 프로젝트 진행 중 Masonry 레이아웃을 구현해야 할 일이 생겨서 egjs/grid 라이브러리를 사용해보려고 시도하고 있었다. 그 중에서도 egjs/react-grid를 사용하려고 했는데, InfiniteGrid는 문서가 굉장히 잘 작성되어 있었지만 ...

nawhes_joo

fe72_pinterest_web.htmlcdn과 jQuery는 헤드에Bootstrap용 js는 body에 작성한다.fe72_pinterest_web.html의 body에 위처럼 작성한다.메인섹션 영역은 여러번 반복하므로 매우 길어져서 한 번만 적었다.main.css를

junkue20

jQuery/JS 연동 입력양식 Focus 앞자리칸의 길이가 6을 초과할 경우 다음 칸으로 포커스가 넘어가게 되고, 반대로 뒷자리칸의 길이가 0이 될 경우 다시 앞자리칸으로 포커스가 넘어오게 된다. 애니메이션 (setInterval) 문서 객체 생성,추가하기 (j

nuyhes

결과HTMLCSSscript를 보기전에 이거 부터 설정하고 배워보자ImageLoaded는 이미지를 masonry를 사용하기전 충분히 로딩을 한 후 작동되게 하려고 사용한다.이미지를 충분히 로딩하지 못한채로 masonry를 사용하면 겹치는 현상도 발생함.https&#x3

jwisgenius

작성중참고: https://velog.io/@bbumjun/masonry-레이아웃으로-갤러리-구현하기

jwisgenius

먼저 버튼을 누르면 숫자가 올라가는 버튼을 만들고 다른 컴포넌트에서 사용 한다고 하였을 때,처럼 불러와 사용하게 된다면, 버튼의 스타일과 얼마나 많이 숫자를 증가 시킬지를 고려하기 어려울 것 입니다. 이에 따라 개발자들은 Props 를 통해 재사용성을 높일 수 있습니다

commitnpush

웹페이지에서 정보를 잘 표현해 주기 위해서 엘리먼트의 효율적인 배치는 매우 중요합니다. 중요한 정보는 위에 덜 중요한 정보는 밑으로 배치를 하며 비슷한 중요도를 가지는 내용은 가로로 나란히 배치하기도 합니다. 이러한 배치를 하는 작업 또는 배치된 상태를 레이아웃이라고