분류 전체보기 (43) 썸네일형 리스트형 [모던자바스크립트 - JS 예제 마스터] 스탑워치 만들기 모던자바스크립트 - 스탑워치 만들기 HTML 코드 0.00 태그에 초시계를 넣어주고 각 start, stop 버튼을 input으로 만들어 줍니다. Javascript 코드 window.onload = function(){ var startButton = document.getElementById("start"); var stopButton = document.getElementById("stop"); var display = document.getElementById("display"); var startTime, timer; startButton.onclick = start; function start(){ startButton.onclick = null; stopButton.onclick = stop.. 웹접근성이 무엇이지 파헤쳐보다 웹 접근성을 쉽게 이해하기 위해서는 접근성이라는 단어부터 한번 보는게 좋을 것 같습니다. 1. 일상생활 속의 접근성 우리가 어떤 장소를 갈 때에 그 곳은 접근성이 좋다. 라고 하죠. 즉, 도달하기 쉽다 라는 뜻과 같습니다. 아마 접근성이 좋은 장소는 교통이 편리하다고도 볼 수도 있을 것 같습니다. 2. 사전적 의미의 접근성 사전적 의미로 접근성이 높다는 것은 어떠한 것을 이용하는 데 있어서 편리하다는 뜻도 있습니다. 3. 웹 접근성 그렇다면, 웹접근성은 무엇이며, 왜 필요한 것일까요? 웹을 통한 정보 전달이 점점 활발해지면서 웹을 사용하는 사람들도 점점 많아지고 있습니다. 또한 그러한 웹들을 전달해줄 전자기기, 운영체제, 웹브라우저들도 다양해지고 있죠. 그런데 만일 웹을 사용하지 못하는 경우가 생긴다면 .. 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 2 3 4 5 6 다음
