Hello 100A

javascript로 짠 간단한 타이머 프로그램입니다. Timer Timer 시작 일시정지 let txtArea = document.querySelector('h2'); let startEl = document.querySelector('.startbtn'); let stopEl = document.querySelector('.stopbtn'); let state = false; let timer; let count=0; let timerId; timer = { run: function (){ clearTimeout(timerId); txtArea.textContent = count++; timerId = setTimeout(timer.run, 1000); }, stop: function(){ clear..

jQuery로 만든 초간단 아코디언 메뉴입니다. 다운 버튼을 누르면 display:none 시켜놓은 대메뉴에 포함된 서브메뉴가 자연스럽게 슬라이드 다운되며 나옵니다. 내용도 간단하고 소스도 단순하니 긴 설명없이 소스 올려두겠습니다. HTML 소스 입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 CSS 소스입니다. body{ padding:50px; } .cate{ width:300px; position:relative; border-style:solid; border-width:1px 1px 0 1px; border-color:#000; } ..

이번에는 스크롤 바를 내렸을때 메뉴바의 스타일이 변하는 코드를 작성해 보았습니다. 아래의 그림과 같이 스크롤을 내렸을때 메뉴바의 높이, 로고의 크기 메뉴의 폰트크기가 부드럽게 변경됩니다. 아래는 CSS 코드입니다. 스크롤이 내려갔을때 .active 클래스를 addClass 해줍니다. 그렇기 때문에 변경되는 스타일은 .active를 포함하고 스타일을 지정해줍니다. body,html{ margin:0;padding:0; font-family:'Montserrat',sans-serif; } .container{ width:100%; height:1500px; background-image:url('bg.png'); } #header{ position:fixed; width:100%; box-sizing: bo..

간단한 마우스 오버 애니메이션을 소개합니다. 영역에 마우스가 오버가 되면 아래의 그림과 같이 둥둥 뜨는듯하면서 그림자가 퍼지는 듯한 애니메이션입니다. HTML 코드입니다. circle-box 영역에 마우스가 오버가 되면 ICON에 애니메이션이 발동됩니다. ICON CSS 코드입니다. animation : circlemove 1.5s infinite linear; (circlemove의 속성대로 1.5초동안 애니메이션이 발동되고 무한루프로 속도는 일정하게) html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:sans-serif;} .container{width:100%;height:100%;background:#000;} .circle..

이번 프로그램은 보이지 않는 윈도움 폼을 만들어봤는데요 . 더해서 아래의 그림과 같이 프로그램을 작업표시줄에서 숨겨보도록 하겠습니다. 보이지 않는 윈도우 폼은 2가지 방법을 제시 했습니다. 1번 this.WindowState = FormWindowState.Minimized; 로 작업표시줄을 최소화 하는 방법과 가장 간단한 2번 this.Opacity = 0; 로 폼의 Opacity를 투명하게 만드는 방법이 있는데 되도록 1번과 같이 하는것을 추천합니다. 이유는 2번의 방법을 사용할 경우 간혹 타 프로그램이나 윈도우즈 바탕화면의 repaint와 같은 이벤트가 발생할경우 opacity로 숨겨놓은 윈도우가 나타났다가 사라지는 깜박임 현상이 있을 수 있습니다. 아래 간단히 코드블록 올리겠습니다. 자세한 내용은..

var device= "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( device.indexOf( navigator.platform.toLowerCase() )

여러가지 형태의 메세지박스입니다. 아래와 같이 15가지로 정리해봤습니다. 15가지의 결과 화면입니다. 소스 보시면 정확하게 주석 달아두었으니 필요하신대로 골라 사용하시면 됩니다. MessageBoxButtons, MessageBoxIcon 버튼 클릭시 이벤트 간략한 소스 올립니다. 전체 소스는 하단에 zip 파일 다운 받으시면 됩니다. private void Mbox_01_Click(object sender, EventArgs e) { MessageBox.Show("내용!", "타이틀"); // 메세지 박스 기본 - 버튼 (확인) } private void Mbox_02_Click(object sender, EventArgs e) { MessageBox.Show("내용!", "타이틀", MessageBo..

기본 반응형 갤러리 입니다. 1200px, 768px, 560px, 480px에 반응합니다. CSS 코드입니다. viewport는 필수! 이미지간의 간격은 li에 padding을 줘서 했고, ul에 -20px 마이너스 마진을 줘서 감싸고 있는 container에 overflow:hidden을 해서 숨겨두었습니다. html,body {width:100%;margin:0px;padding:0px;font-family:sans-serif;} ul, li{margin:0;padding:0;list-style:none} .container{width:100%;max-width:1400px;margin:0 auto;overflow:hidden;} .gallery{margin:50px -20px;box-sizing:..

가로, 세로가 100%인 페이지 슬라이드 입니다. html, body에 overflow:hidden을 해 스크롤이 없이 마우스 휠과 퀵버튼을 눌러 각 섹션으로 슬라이드가 됩니다. 페이지 마지막에 전체코드파일 첨부해두었습니다. 먼저 각 페이지들의 css입니다. body와 html에 꼭 height:100%를 하셔야 풀페이지로 됩니다. html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;font-family:sans-serif;} #fullpage {position:relative;top:0px;z-index:9;width:100%;height:100%;} .fullsection{width:100%;height:100%;posit..

select (콤보박스)의 년, 월을 선택때마다마지막 일수가 변경되는 함수입니다. 월을 선택하면 그 월의 마지막 날을 계산해서 select option이 변경됩니다. 아래의 이미지로 보시면 2019년 10월을 선택했기때문에 select option이 31일까지 선택할 수 있게 변경되었습니다. 그리고 2019년 2월을 선택하셨을 시에는 28일까지로 변경된 것을 확인 할 수 있습니다. 아래와 같이 start_year에 시작년도를 입력 해 주시면 현재의 년도까지 자동으로 년도 select 옵션이 입력이 됩니다. 그리고 년도와 월의 select option의 선택된 값이 변경될때마다 onChange 이벤트가 동작되면서 lastday() 함수를 호출하여 day의 option이 자동변경됩니다. /* javascri..