본문 바로가기

분류 전체보기

(84)
자바스크립트 배열 메서드 sort() 개념 완전 정리 자바스크립트를 다루면서 배열을 빼놓는건 말이 안되기 때문에, 배열과 관련된 메서드를 확실히 숙지해두는 게 좋다. 그 중 sort 메서드는 핵심중의 핵심이니까 제대로 정리해두자. 배열.sort() 보통 위와같은 식으로 작성되며, 괄호 안에 아무런 파라미터도 넣지 않으면 오름차순으로 정렬시키는 기본적인 성질이 있다. 숫자 정렬시 0부터 순서대로, 영문자는 a부터 순서대로 나오는데 숫자는 아스키 코드대로 정렬된다 let num = [1, 4, 10, 222, 5, 31]; num.sort(); console.log(num) // 1, 10, 222, 31, 4, 5 아스키 코드가 아닌 1, 4, 5, 10, 31, 222 순으로 정렬하고 싶다면 sort((a, b) => a - b) 로 작성하는 것이 좋다. ..
모달창 VS 팝업창, 차이가 뭔데? "팝업창 말고 모달창으로 만들어줘~" "이번 모달창은 iframe으로 만들어~" 입사 초기에 모달=팝업 이라고 생각했던 무지한 나에게 이런 요구사항들은 당황스러웠다. html 공부할 때 그저 모달창은 div로 묶어 만든다...는 식으로 들었기 때문에, 정확하게 팝업과의 차이를 모르겠더라. 그래서 그 개념을 정리할 필요성을 느꼈다. **팝업창 우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다. (브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다) 자바스크립트로 팝업창을 띄울 때, window.onload = function(){ window.open("popup.html", "",..
iframe모달 창(새창)에 draggable 드래그엔드랍 기능 넣기 새로운 창을 띄우는 게 귀찮아서 iframe을 이용해 모달창을 만들었다.  요 iframe 창을 드래그앤드랍 할 수 있게 제이쿼리 플러그인을 사용했다. 제이쿼리 플러그인인 draggable을 넣으려니, iframe에 넣어야할 지 iframe을 싸고 있는 부모요소에 넣어야할지 좀 고민되더라. iframe에 일단 넣어봤더니, 역시나 창 안에 iframe 영역만 이동한다. 요런식으로! 그래서 draggable 기능을 찾아보니 handle이 있더라! handle을 적용하니 handle 부분으로 이동이 가능해짐. html은 대략 이렇게. .popup{position:fixed; top: 50%; left: 50%; } .handle{position: absolute; top: 0; left: 0; z-index..
array와 string 둘다 쓰이는 메서드 slice() slice() 메서드는 array 배열과 string 문자열에서 다 사용되는데, 쓰다보니 조금 헷갈려서 정리한다. slice는 단어뜻 그대로 값을 잘라내는데에 쓰인다. let arr = ['hope', 'jin', 'monster', 'jimin', 'kooki', 'taetae', 'suga'] arr.slice(3); console.log(arr) // 결과는 'jimin', 'kooki', 'taetae', 'suga' slice(n); n번째 인덱스의 값부터 끝의 값까지 불러온다. slice(a, b); 파라미터가 2개 오면, a를 시작으로 b-1까지의 값을 불러온다. slice(-n) 음수가 오게 되면 끝(오른쪽)에서부터 왼쪽 방향으로 n개의 값을 불러온다. string도 마찬가지다. let s..
배경 위에 또다른 배경을 깔고 싶을 때 css 방법 (html 요소 사이에 레이어 추가) 박스마다 각기 다른 배경 이미지를 넣었는데, 이 배경 이미지가 호버될 때마다 명암을 달리 주고 싶어졌다. 다시 이미지를 수정해서 집어넣기도 귀찮았고, 호버되려면 이미지를 추가할 것이 아니라 css 효과를 집어넣어야 하므로. css로 조절할 수 있는 방법을 찾아야 했다. 예시) 요렇게 핑크색 박스(div class="pink") 안에 배경(h1)이라는 텍스트와 파란색 또다른 상자(div class="blue") 콘텐츠가 들어있다. 핑크색 배경 이미지 위로 레이어를 하나 더 깔아서 효과를 주고 싶었다. 빗금친 영역을 추가하기 위해 .pink에 가상연산자를 잡아서 스타일을 줬다. .pink:before{content:""; width: 100%; height: 100%; position: absolute; t..
자식 iframe 새창 열고닫기 + submit 후 리로드 방법 iframe으로 팝업창을 열고 닫는 기능을 만들었다. 우선 부모격인 페이지에 팝업창 열기 pop의 아이디를 가진 div로 감싸주고 요기에 스타일을 준다. iframe은 width:100%; height:100%으로 맞추면 보수할 때 좀더 간편하다. 버튼을 누르면 팝업창이 뜨도록 함수도 짜준다. function openPop(src, w, h){ var popup = document.getElementById('popup'); document.popupframe.src = src; //팝업으로 띄울 자식넘의 주소를 프레임의 src 값으로 넣는다. popup.css({ //갑분 제이쿼리..ㅎ 'width' : w + 'px', 'height' : h + 'px' }).show(); } function clo..
홈페이지 드롭메뉴 전체 배경 들어간 HTML + CSS 짜기 쉽다고 생각하던 HTML이 배신 때리던 날. 드롭메뉴를 짜다가 갑자기 배신당한 기분이 들어 오늘의 코드를 기록으로 남긴다.. 오늘은 메뉴1을 호버하면 전체 소메뉴들이 다 보여지는 코드를 짜봤다. + 뒤에 배경까지 덤. (사실 디자인이 별로라는 소리를 들어서 수정한 건이었다..) 개인적으로 소메뉴가 많으면 메뉴1에 따른 소메뉴만 보여지게끔 짜는게 좋지만(가독성 up), 소메뉴 갯수가 적다면 (7개 이하 정도) 전체 메뉴가 한번에 다 보여지게끔 하는 편이 낫다고 생각한다. 메뉴가 별로 없는데 일일이 호버하면서 찾기 번거롭기도 하고, 디자인이 좀 읎어보임.. 암튼 HTML은.. 메뉴1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 메뉴2 소메뉴2-1 소메뉴2-2 소메뉴2-3 소메뉴2-4 메뉴3 소메뉴3-1..
[제이쿼리] 반응형 3depth 메뉴 슬라이드 토글 이벤트 만들기 (전파 방지하는 법) 요즘 반응형 페이지를 만들고 있는데, 자꾸 기초적인 부분에서 버벅거려서 또다시 공부&복습 겸 블로그에 정리하려 한다. 오늘은 3depth 메뉴에 이벤트 효과를 넣었는데 이벤트 전파 때문에 원하는 효과가 제대로 작동하지 않았음. ** 구현하고자 했던 효과는 PC일 때는 2depth까지만 보이고 클릭시 바로 링크로 이동. 모바일에서는 클릭이벤트를 줘서(링크로 이동하지 않고) 3depth까지 하위 메뉴들이 슬라이드 토글되는 효과가 나타남. 최하위 메뉴인 3depth(그림에선 소메뉴)를 눌러야 링크 이동. 문제는 메뉴가 3depth까지 있음. 2depth 메뉴 버튼을 누르면 3depth가 안뜨고 1depth 메뉴 창이 슬라이드 업 됨.. 그리고 PC에선 클릭시 a태그 작동해야하는데 모바일에서는 막아야함.. 2d..
제이쿼리 버튼 클릭 이벤트 - 버튼 외 화면 다른 곳을 누르면 효과 제이쿼리는 비교적 속도나 크기 등 경쟁력 면에서 뒤떨어지면서? 사양될 전망이라는 라이브러리지만.. 그럼에도 작성법이 매우 간단해 현업에서 아직까지도 많이 써먹고 있다.. 오늘은 버튼 클릭 이벤트를 정리하다가 잊었던 is() 메서드를 다시 떠올림. 정리 차 게시물을 올리게 됐다. 버튼 외에 화면 아무 곳이나 클릭하면 버튼에 특정 효과를 주는 이벤트를 작성한다. 전체를 싸고 있는 요소가 필요하다. 페이지를 감싸고 있는 요소를 .container 라고 명명. 버튼은 button 클릭하면 하단으로 메뉴 리스트가 슬라이드 되어 나타난다. 메뉴버튼 메뉴1 메뉴2 메뉴3 메뉴4 $('.btn').click(function(){ //우선 버튼 클릭 이벤트 먼저 만들어 주고 - 버튼에 스타일 바뀌는 on 클래스 입혀주고..
자바스크립트 작동 안될 때, body onload 충돌문제 오늘도 여전히 코린이는 삽질만 열라 하다가 퇴근합니다.. 오늘은 평소 잘 돌아가던 페이지에서 갑자기 자스가 작동을 하지 않는 것... 대체 왜 안돌아갈까 생각해봤더니 최근에 팝업창 띄우는 코드를 입력했었는데, 그러고 나니 캘린더가 안열리는 거다.. 팝업창 띄우는 코드를 에 onload이벤트 인라인 입력했었는데, 요걸 빼고 새로고침하니까 나머지가 잘 돌아간다. 짱돌을 굴려보니 문제의 원인은 onload 충돌 때문이라는 결론이 났다. 호출된 js 파일 안에 window.onload = 코드가 입력돼 있었다.. onload이벤트는 두번 이상 실행하면 충돌이 일어나 한 쪽만 실행된다. 이때는 window.onload 나 document.onload 이렇게 나눠서 실행시킨다. 결국 에 인라인으로 넣었던 이벤트 실..