Front-end/JavaScript
[JavaScript] jQuery 요소 복사 붙여넣기 clone()
clone() clone()은 DOM 요소를 복제하는 데 사용되는 함수입니다. let i = $('복사할 거').clone(); $('붙일 곳').html(i); ex) : main_slide_list 클래스를 복사해서 ms_all_list 클래스에 붙여넣기
전체 글
728x90
Front-end/CSS
[CSS] 반응형 웹 브라우저의 크기에 따라 너비 값 조절
반응형 웹 너비 값 지정하는 법 브라우저의 크기에 따라 검색창의 사이즈가 조절되도록 너비 값을 주는 방법! 반응형 웹디자인을 할 때는 너비 값을 %로 주는 것이 좋습니다. 개발자도구(F12)에서 상단 맨 왼쪽 두번째 모니터 모양을 눌러주시면 브라우저 사이즈에 따라 요소의 사이즈를 확인할 수 있습니다. 검색창의 크기를 calc() 함수를 써서 전체 100%에서 가로 요소들의 너비를 빼주시면 됩니다! (참고로, 여기서 엑스 버튼과의 간격 10px은 따로 넣은 것이 아닌 가로배열 flex의 justifycontent 속성입니다.) calc() 함수 CSS에서 산술 연산을 할 수 있는 속성으로 더하기, 빼기, 곱하기, 나누기를 사용해서 값을 넣을 수 있습니다.
Front-end/JavaScript
[JavaScript] jQuery slick dots 모양 바꾸기 customPaging
slick 이미지 슬라이드 dots 디자인 바꾸는 법 customPaging을 하지 않은 기본 dots입니다. customPaging : function(slider, i){ return i+1 + '/' + slider.slideCount; } 현재 페이지 수를 나타내는 i는 인덱스 0부터 시작하기 때문에 1부터 시작하기 위해서 i + 1 해줍니다. slider.slideCount는 전체 페이지 수를 나타냅니다. 해당 페이지만 보이기 위해서 모든 페이지를 display : none 해주고 .slick-active 해당 페이지는 display : block; 해줍니다.
Front-end/JavaScript
[JavaScript] jQuery의 on 메소드에 대해서
on 메소드 : on 메소드는 선택한 요소에 이벤트 핸들러를 등록하여 특정 이벤트에 대한 동작을 정의하는 jQuery 함수 입니다. $('셀렉터').on('이벤트명', 함수); 이벤트 핸들러 등록 $('input태그').val() : input태그의 value 값 저장 이벤트 핸들러 제거
728x90