전체 글 (41) 썸네일형 리스트형 Number.parseInt vs Number vs parseInt Number.parseInt() vs Number() vs parseInt() 이 세가지 메서드는 참 비슷해요. 그래서 오늘은 이 세가지 메서드의 차이점을 알아볼까합니다. Number() 이 메서드는 무조건 숫자로 이루어진 것만 숫자로 리턴해줍니다. ex) "2014" --> 2014 (숫자리턴완료) "2014년도" --> NaN (Not a Number 리턴) 그리고 숫자에 강하므로 소수점도 인식합니다. ex) "10.124" --> 10.124 parseInt() 숫자와 문자 중 숫자만 인식하여 숫자로 리턴해 줍니다. ex) "2014년도" --> 2014년도(숫자리턴완료) 하지만 문자가 앞에 있는 경우는 불가능합니다. ex) "제2014년도" --> NaN(Not a Number 리턴) 그리고 10.. AddEventListener 오류 해결방법 (업데이트) 이전 글은 정말 JS의 J자도 모른채로 글을 써버렸네요 ㅠㅠ 다시 수정하여 올립니다. 1. 기본적으로 script는 body태그의 가장 아래에 작성해야합니다. script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생깁니다. 그렇게되면 addEventListener을 부여할 DOM을 찾지 못하게 되는 현상이 발생하는 것이죠. 1. script 태그에 defer 을 삽입해 줍니다. (defer 스트립트) 브라우저는 defer 속성이 있는 스크립트를 백그라운드에서 다운로드 합니다. defer 스트립트를 다운로드 하는 도중에도 HTML 피싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됩니다. 참고 링크 :.. Math.random/Math.floor 사용하여 랜덤운세 만들기 See the Pen xxwveGK by jiyunryu (@whatIDavailable) on CodePen. 1. 배열에 운세 내용을 넣기 2. Math.random()*배열.length 로 소수점 달린 length 값 랜덤으로 뽑기 3. 2를 Math.floor()에 담아 정수로 만들어주기 4. 배열[] 안에 3을 넣고 출력하면, 운세가 랜덤으로 출력이 된다. CSS 초보 팁 : z-index 값을 아무리 올려도 작동이 안돼요 제가 겪은 z-index가 작동하지 않는 한가지 케이스를 보여드릴게요. 부모와 자식 모두 position:absolute; 가 적용되어 있는 경우에는 자식의 z-index 값을 아무리 올려도 부모를 벗어나서 적용될 순 없습니다. 예를 들어, 만일 코드 구조가 이렇게 부모와 자식이 있는 상태에서, .parent{position:absolute; z-index:0;} .child{position:absolute; z-index:100;} CSS가 이렇게 적용이 되어있다면, child는 부모 속에 있는 요소이기 때문에 부모 밖으로 나갈 수 없는 것입니다. 음..지금와서 보면 참..이런 실수 왜했나 싶은데 1년전엔 .child에 z-index 값이 적용이 안되어서 99999까지 올리기도 했었죠..ㅋㅋ 책상 정리.. 팝업 안의 slick slider 가 뜨지 않을 때? slick slider 를 레이어 팝업에 넣었는데, 레이어 팝업을 열었을 때 slick slider 가 뜨지 않고 slick slider 의 arrow 만 뜨는 현상 발생. arrow를 몇번 클릭 하면 slick slider 가 뜨긴 함... 여기서, 보통 $(슬라이드).slick(); 기능을 HTML 최하단에 덩그러니 설정하는게 일반적인데 팝업에 slick slider 를 넣는 경우 팝업을 띄운 후 slick(); 이 작동되어야 함. $(팝업 키는 버튼).click(function(){ $(팝업).show(); $(슬라이드).slick(); }); 이런 형태로 만들어 줘야 합니다. stack overflow 에서 아무리 찾아도 안나와서 진짜 답답했는데.. 겨우 어떤 분이 해결하신 거 블로그에 올려놓으셔.. input checkbox CSS 설정 방법 저는 지금껏 input checkbox 체크 설정을 jQuery로 설정을 해왔는데 이번에 사수분이 input checkbox 는 CSS로 설정하는게 낫다고 해주셔서 한번 정리해봤습니다. (너무 기초적인 부분을 모르고 코딩했다는 사실이 부끄럽네요 ㅠㅠ ) 체크 박스의 체크 이미지는 폰트어썸의 아이콘을 사용하여 폰트어썸 CDN 을 첨부해줬어요. HTML에서 태그를 짤 때, input의 ID 이름과 label의 for 이름을 똑같이 연동 시켜줘야 기능이 작동하니 잊지마세요. input 태그는 안보이게 숨기고 label:before 가상객체로 CSS를 꾸며주는 방식이에요 input:checked + label:before 를 사용하면 CSS에서도 체크박스가 클릭된 설정이 가능합니다. 이렇게 input check.. 1년차 스타트업 웹퍼블리셔입니다. 안녕하세요 저는 현재 5인 스타트업 회사에서 근무하는 웹퍼블리셔입니다! 처음으로 제 소개를 여기에 남기네요 이제 막 웹퍼블리셔로 1년을 막 넘긴 초급 웹퍼블리셔랍니다. 열심히 기능공부와 디자인공부를 하지만 그 끝은 여전히 보이지 않네요 ㅜㅜ 사실 최근에 계속 밤늦게 공부하고 작업하다가 장염과 독감이 함께 찾아와서 큰 고생을 하고 잠시나마 저에게 휴식을 주는 타이밍으로 이렇게 일상 글을 쓰게 되었어요. 앞으로 회사일이나 웹퍼블리셔로서의 경험담 등을 적어나가보려고 해요 저는 사실 javascript 기능을 기억해두려고 블로그에 저장해두다가 뭔가 메모장으로 쓰기에는 아까워서 본격적으로 활동하기 시작했어요 아직은 jQuery가 주를 이루지만 점차적으로 순수 javascript 위주로 포스팅할 예정이에요. 사실 .. select 옵션에 아이콘 넣는 방법 안녕하세요 오늘은 select 박스에 아이콘 넣는 방법을 알려드릴게요! 그 전에 먼저 소개할 사이트가 있습니다 https://fontawesome.com/ font awesome 이라는 사이트인데요 일부 아이콘을 무료로 제공해주기 때문에 퍼블리싱을 할 때 아주 유용하게 사용하는 사이트랍니다. 일단 여기 아이콘을 사용하도록 할게요 여기서 잠깐..! (...?????) 보통 오픈소스 아이콘을 사용할 때는 이런 태그를 복사해서 사용하지만 select 박스에 아이콘을 넣을 때는 이런 방식으로 적용하면 아이콘이 뜨지 않아요 우리는 font awesome 이 제공하는 다른 서비스를 사용하여 select 박스에 아이콘을 넣을 수 있어요 fontawesome 사이트를 맨 아래로 스크롤 하면 제일 하단에 Cheatshe.. 이전 1 2 3 4 5 6 다음
