창고

W3schools를 참고한 지난번 포스팅 https://aosceno.tistory.com/358 sticky header 스티키 헤더 - 상단에 광고바도 붙어있는데 정신없이 나왔다 들어갔다 하는 효과 말고 정말 원래 걍 착 붙어있는것마냥 스르륵 상단에 붙었다 제 위치로 돌아가게는 어떻게 함? http://biotreat.kr/ 비오트릿 I BIOTREAT 건강한 자신감, 나를 위한 특별한 시작. 각 분야 전문가들이 함께 만들어 더욱 믿을 수 있는 브랜드 '비오트릿' biotreat.kr 여기 홈페이지를 구경하다가 뽐뿌가 옴 스.. aosceno.tistory.com 이 사이트를 구경하다가 만일 스틱키헤더가 2개가 필요하고, 그 헤더와 헤더 사이엔 스틱키 시키지 않을 요소가 있다면 코드는 어떻게 되는가?..

http://biotreat.kr/ 비오트릿 I BIOTREAT 건강한 자신감, 나를 위한 특별한 시작. 각 분야 전문가들이 함께 만들어 더욱 믿을 수 있는 브랜드 '비오트릿' biotreat.kr 여기 홈페이지를 구경하다가 뽐뿌가 옴 스티키 헤더에는 효과가 여러가지가 있지만 제일 만들기 쉬운건 아예 그냥 fixed해놓고 top:0; 해놓는 경우 또는 scrollTop();의 값이 헤더 높이보다 커진다면 display:none;해뒀던 다른 헤더를 뿅 불러온다던가 위 두가지가 걍 뚝딱뚝딱 만들 수 있는것임. 하지만 첫번째의 경우엔 상단에 광고바를 넣고 싶은 경우 사실상 쓸 수 없고 두번째의 경우는 광고바는 넣을 수 있어도 특유의 애니메이션 효과때문에 정신이 없음. 물론 스크롤을 빨리 하면 별로 티가 안나지..

화면 크기가 짱 넓을 때 이전 포스팅 참조 https://aosceno.tistory.com/354 Masonry layout(핀터레스트 레이아웃) 참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유.. aosceno.tistory.com 엄청 간단하다. 컨테이너(부모)에서 column-width 값만 설정하면 된다 (column-count를 설정하지 않으면 되는 것이다..) 아이템(자식)의 너비는 걍 100%로 하고! ㅇㅇ https://www.w3schools.com/css/css3_multiple_co..

참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 사용기술 관련기술 예제 #columns{ column-width:350px; column-gap: 15px; } #columns figure{ disp opentutorials.org https://css-tricks.com/piecing-..