창고

값이 입력되거나, 값을 입력중인 focus중에는 : 1-1)배경이 하얗게 변하고 1-2)굵은 outline이 쳐집니다. 값이 없는 상태로 focus out 되면 : 0)원래의 하늘색 박스로 돌아갑니다. HTML js에서 for문 돌려서 onfocusin onfocusout하고 싶었는데 크롬 사파리등은 이 방식으로 하면 지원이 안되어서 ㅠ 에궁..DOM이 지저분해짐 힝 CSS label의 text에 해당하는 .formTitle은 여기서 귀찮아서 크기변경 안해놨음... JS

https://aosceno.tistory.com/435 전 게시물 참조. checkbox 전체선택, 전체해제.... 한 페이지에 아이템이 여러개 있을 경우 / 여러페이지 일괄 적용 가능한 vanilla JS javascript로만 checkbox를 전체선택하고 전체해제 하기. 1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식.. aosceno.tistory.com 이전 게시물에선 01) [전체선택] 체크시 해당 영역의 모든 체크박스 활성화 02) [전체선택] 해제시 해당 영역의 모든 체크박스 비활성화 03) 해당 영역의 체크박스를 하나라도 해제할시 [전체선택] 비활성화 까지 구현하였으나 "해당 영..

javascript로만 checkbox를 전체선택하고 전체해제 하기. 1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식 체크박스 해제시 > 해당 부모의 '전체선택 체크박스' 해제 원문 소스 참조 : 기얏토님 블로그 "[javascript] 체크박스 전체 선택 및 제거 구현" https://giyatto.tistory.com/51 [javascript] 체크박스 전체 선택 및 제거 구현 체크박스 전체 선택/제거 기능 구현. 1. "전체선택"을 눌렀을 때, 전체 체크박스가 체크 되고, 다시 눌렀을 때 체크가 해제 되어야 한다. 2. 목록 전체의 체크박스 중, 하나만이라도 체크가 해제 되면 "전체선택"...

기본 소스는 w3school의 HOW TO 항목에서 slide show 입니다. https://www.w3schools.com/howto/howto_js_slideshow.asp 기본 예제중에 자동재생, 페이저, 이전·다음페이지 버튼, 재생 멈춤 버튼을 모두 제공하는 예제는 없기에 포스팅 작성하기로 함. (구글에 검색해봐도 딱히 국내에 없길래..ㅠ..) 언제나 그렇듯 어설프지만 기본 틀만 참고해주세욤 HTML CSS JS (바닐라 자바스크립트) 그간은 jQuery로 setInterval을 이용하여 하였는데, 그렇게 하면 해본 분들은 알겠지만 특히 반응형으로 제작하였을 때 오류가 좀 잦은 경향이 있으욤... ㅠ... 근데 바닐라자바스크립트로 하면 엄청 가벼운데다가 setInterval이 아닌 setTime..

예제 사이트 : 눈누(https://noonnu.cc/) , Google fonts(https://fonts.google.com/) input이나 textarea에 글을 입력하면 실시간으로 그 value를 받아와 다른 input/textarea에도 내용을 반영해주는 코드 HTML CSS jQuery로 짤 때는 이렇게 vanilla JS (JavaScrpt 로만 짤 때는 이렇게) changeThis (바뀌는 영역)은 innerHTML을 하든 textContent를 하든 innerText를 하든 value를 하든 상관 없는데 바뀌는 값을 받아오는 changeText는 value로 받아와야만 되는 것 같음... 소스

초보끼리 티스토리의 "jQuery 특정 영역을 제외한 부분을 클릭했을때" 를 참고하였습니다 https://chobokkiri.tistory.com/67

소스 출처 https://codepen.io/tonystar/pen/JRLaKw Pure-CSS Float Label. Finally. Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser. https://github.com/tonystar/float-l... codepen.io Pure-CSS Float Label. Finally 밑은 내 응용예제 1. input에 placeholder 설정해주기 2. 각input을 감싸줄 블록/인라인블록 필요 (label 위치때문에) 3.구조 4. input label{focus및value있을시 설정} input:pla..

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-..