본문 바로가기

전체 글160

[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval 자바스크립트를 이용하여 일정시간 후 이벤트를 발생시키거나, 일정시간마다 이벤트를 발생시키는 방법에 대하여 알아 보도록 하겠습니다. 이번 예제는 일정 시간(3초) 후 또는 일정시간(1초)마다 배경색을 랜덤으로 변경시키는 것 입니다. 먼저 소스 및 설명 아래에 있는 결과확인하기 부분에서 어떻게 발생되는지 버튼을 클릭해 보고 확인 해 보시면 이해하기 쉬울 것 입니다. 자바스크립트 소스 및 설명 결과 확인하기(버튼을 눌러 예제 결과를 확인 해 보세요) 정리 - setTimeout : 일정 시간 후 한번 실행 - setInterval : 일정 시간마다 반복 실행 - clearTimeout : 일정 시간 후 한번 실행하는 것을 중지 합니다. - clearInterval : 일정시간마다 반복하는 것을 중지 합니다. .. 2018. 6. 20.
[자바스크립트] 현재시간 화면에 표시하기 HTML과 CSS 학습에 조금 지루해 질 때 자바스크립트를 배워보면 다시 코딩에 대한 흥미를 느낄 수가 있습니다. HTML과 CSS가 웹디자인 영역이라면 자바스크립트는 웹프로그래밍 영역에 가까울 수 있겠지만 한번 배워 보는 것도 좋을 것 입니다. 그동안 자바스크립트에 대하여 잘 올리지 않은 것 같은데 이제 자바스크립트에 대하여 종종 포스팅을 해 보고자 합니다. 이번 시간에는 현재시간을 웹 화면에 출력하는 방법에 대하여 알아 보고자 합니다. 자바스크립트 소스 브라우저 실행 결과 소스설명 - var nowDate = new Date() var nowDate : newDate라는 이름의 변수를 선언합니다. new : 객체생성 Date() : 현재시간을 넘겨주는 함수 즉, nowDate라는 변수에 현재시간 객체.. 2018. 6. 20.
[HTML/CSS] 텍스트 그림자 효과 꾸미기 텍스트에 그림자 효과를 주는 기능에 대하여 알아 보도록 하겠습니다. 그림자 효과 CSS를 사용하여 밋밋한 텍스트를 더욱 풍성하고 멋지게 꾸며 볼 수 있습니다. HTML/CSS 소스 ERun-Joy ERun-Joy ERun-Joy ERun-Joy ERun-Joy 브라우저 실행 결과 소스설명 - font-weight: bold; → font-weight(글자굵기) : bold(진하게) → font-weight 의 속성으로는 bold 이외에 100~900까지 100단위로 설정 할 수 있습니다. → 400은 normal과 같으며, 700은 bold와 동일합니다. 즉 숫자가 높을 수록 진하게 표시 됩니다. - text-shadow: 0px 5px 0px #FFB2F5; → text-shadow(그림자효과) : 0.. 2018. 6. 19.
[HTML/CSS] 카테고리 DIV 박스 만들기 카테고리 DIV 박스 만들기 DIV박스 만들기 예제로 카테고리 형태의 박스를 만들어 보도록 하겠습니다. 소스를 참고하여 직접 만들어 보면 도움이 될 것이라 생각합니다. 참고로 디자인 감각이 없어, 색상이 이상하네요. 이렇게 저렇게 변경 해 보아도 시간만 흘러 이대로 올려 봅니다. HTML/CSS 소스 category 여행 맛집 요리 건강 육아 브라우저 실행 결과 소스설명 - list-style: none; → 리스트 스타일의 효과(예:●)를 사용하지 않도록 설정 합니다. - #divCategory ul li { border-top: 1px solid #003399; border-bottom: 1px solid #3DB7CC; } → li(리스트항목) 위, 아래로 1px 의 각 다른 색의 실선이 표시 되도.. 2018. 6. 17.