Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- BOM
- DOM
- node prompt
- 코딩야학
- 반복문
- form태그
- 리액트네이티브배포
- css
- 인스타그램만들기
- 두잇리액트네이티브
- 프로그래밍
- 폼태그
- 리액트훅
- vue.js설치법
- 코딩
- JavaScript
- 웹코딩
- JS
- html
- 레이아웃
- 쉽게설치
- 배열
- 주니어 개발자
- jQuery
- 자바스크립트
- 프론트엔드
- 비동기
- 동기
- 뷰 설치법
- 하이퍼링크
Archives
- Today
- Total
목록2019/10/03 (1)
이진욱의코딩
(HTML,CSS)핀터레스트 스타일 레이아웃 만들기
이번 시간에는 앞서 배웠던 html과 css를 이용해서 핀터레스트 스타일의 레이아웃을 만들 겁니다. 핀터레스트 사이트에 접속하시면 이렇게 구조화가 되어있습니다. 이것을 masonry라고 하며 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. change view로 코드들을 먼저 살펴보겠습니다. 여기 이 코드 들을 참조해서 만들어볼게요. 스파이더맨 배경화면 이렇게 여러 개를 만들고 나면 이렇게 일자로 쭉 나열되어 있습니다. 위의 핀터레스트 형태로 만들기 위해 ..
HTML
2019. 10. 3. 21:08