자바스크립트 이벤트 - 자바스크립트 강좌 6강 이번 강좌에서는 사용자가 오퍼레이션을 하는 각각의 형태에 따른 이벤트에 대해 공부하겠습니다. ※이벤트(Event)란? 우리가 흔히 생각하는 이벤트란 무엇일까요? 아마도 엄청 많은듯 한데요. 외식사업장에서 진행하는 이벤트, 게임에서 진행하는 이벤트, 여러형태의 가전제품 매장에서 진행하는 이벤트 등등.. 참 다양한 이벤트들이 있습니다. 웹문서에도 마찬가지로 이벤트가 존재합니다. 사용자는 웹문서를 통해 정보를 가져가거나 입력할때 다양한 형태로 키보드나 마우스를 활용하여 오퍼레이션을 하죠. 바로 그때 발생하는것을 웹문서에서 이벤트라고 합니다. 가장 많이 사용하고 간단한 예를 들자면, 마우스 왼쪽클릭 혹은 오른쪽 클릭.. 이러한 것들이 있습니다. 예제) 1. 스크립트..

자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 getElementsByTagName/getElementsByClassName/getElementById 이번 강좌에서는 자바스크립트를 이용하여 문서의 객체를 제어하는 기술에 대해 공부하겠습니다. ※DOM이란? Document Object Model의 약자입니다. 자바스크립트를 이용하여 웹페이지를 제어하기 위한 객체 모델을 의미하죠. window 객체의 document 프로퍼티를 이용하여 통해서 제어가 가능합니다. △getElementsByTagName 문서를 제어하려면, 먼저 제어할 대상을 찾아야 합니다. CSS에서 선택자를 이용하는 방법과 흡사하지만 약간의 차이가 있습니다. getElementsByTagName은 태그명을 이용하여 제어할 대상을 ..

자바스크립트 팝업/window - 자바스크립트 강좌 4강 ※window 객체 window 객체는 새로운 페이지를 열 수 있고, 제어할 수 있습니다. 그리고 그것은 우리가 흔히 사용하고 접하는 팝업으로 응용할 수 있죠. 새 창! 즉 팝업을 새로 열고 컨트롤 하고 응용하는 법을 알아보도록 하겠습니다. △window 객체 기본(팝업) 사용법) window.open(경로, 타이틀, 속성); 예제) 1. 스크립트 코드 2. 본문 코드 3. pop.html Go Learning Popup! 결과) △window 객체 속성 left : 창의 왼쪽 포지션 top : 창의 위쪽 포지션 height : 창의 높이 width : 창의 너비 menubar : 메뉴창 표시 여부 toolbar : 도구모음 표시 여부 locati..

자바스크립트 location/navigator - 자바스크립트 강좌 3강 ※Location 객체 Location 객체는 문서의 주소와 관련된 객체입니다. 이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 습니다. 그리고 문서의 위치와 관련된 다양한 정보를 얻을 수 있죠. △Location 객체를 이용해 주소 알아보기 예제) 문서의 주소를 가져와 보여주는 예제 locationObj라는 변수에 location의 정보를 문자열로 변환하여 저장하였습니다. 그리고 경고 메시지로 출력해보는 예제입니다. 결과) 크롬 브라우저 결과) 익스플로러 브라우저 크롬은 한글 그대로 출력이 되지 않고 변환되어 출력되네요. 익스는 한글 그대로 출력이 되는걸 볼 수 있습니다. △Location 객체를 이용한 페이지 이동 사용법)..

자바스크립트 윈도우 객체 / 자바스크립트 강좌 2강 alert, confirm, prompt, if~else ※What? Object.. 객체란? 객체란 무엇일까요? 프로그램 개발에 대해 공부를 하면 아주 많이 듣는 단어입니다. 객체에 대해 정확히 이해하는것도 중요하고, 어떠한 방식으로 사용하는지도 중요하죠. 사전적인 의미에서의 객체는 사물, 물건, 목표 등의 여러가지 의미를 가지고 있습니다. 우리가 생활하면서 쉽게 접할수 있는 자동차를 예를들어 설명을 해볼게요. 자동차는 하나의 객체.. 즉 사물입니다. 그런데 그 사물을 여러개로 나눌 수 있습니다. 바퀴, 엔진, 도어, 베터리.. 등등 여러가지로 구성되죠. 그것들도 객체입니다. 객체를 쪼개고 나누다 보면 하나의 부품까지 나눌 수 있을거에요. 부품도 객체..

자바스크립트 개념 / 기본구성 자바스크립트 강좌 1강 ※What? 자바스크립트? 솔직히 자바스크립트 강좌를 검색해서 이 포스팅을 보고 계신 분이라면.. 자바스크립트가 무엇인지 굳이 설명이 필요없을 듯 합니다. 왜냐하면 대부분은 자바스크립트의 개념에 대해 알고 있고, 개발하던 중에 막히는 부분이 있어서 검색을 한 경우가 많기 때문이죠. 하지만 새롭게 프로그래밍을 공부하고 싶은 분들을 위해 간단하게 개념에 대한 이야기를 할까 합니다. 우리는 웹페이지를 웹문서라고 부릅니다. 보통 문서는 정적이죠. 신문이나 잡지를 보는것처럼 말이에요. 우리가 스스로 페이지를 넘기면서 콘텐츠를 살펴봅니다. 그런데 웹문서는 다릅니다. 웹문서는 사용자가 어떠한 명령.. 즉 오퍼레이션을 할 경우 문서에서 반응을 해주어야 합니다. 웹문..

CSS 상속/우선순위 CSS 강좌 09강 ※상속▷상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받는것을 속성이라 합니다.▷상속이 가능하지 않은 속성도 존재합니다.▷상속이 가능하지 않은 속성에 inHerited 값을 지정할 경우 강제로 상속이 가능합니다. 예제) 축구동호회 농구동호회 농구동호회 주장 농구동호회 감독 농구동호회 코치진 이농구 코치 김농구 코치 야구동호회 볼링동호회 탁구동호회 수영동호회 가장 상위의 엘리먼트에서 선언한 속성이 하위 엘리먼트의 속성값으로 상속이 됩니다.하지만 중간에 농구동호회 코치진에서 선언한 속성이 농구동호회 자식 엘리먼트에만 영향을 미칩니다. 예제) 축구동호회 농구동호회 농구동호회 주장 농구동호회 감독 농구동호회 코치진 이농구 코치 김농구 코치 야구동호회 볼링동호회 탁구동호회 ..

CSS 포지션 스타일 CSS 강좌 08강 ※position▷position은 CSS를 이용하여 HTML 엘리먼트들의 위치를 제어하는 방법입니다.▷position의 종류(1)상대위치(relative position)->자신의 위치를 기준으로 위치 값을 지정합니다.ㅇ기준위치 : 엘리먼트 자체ㅇ부모의크기 : 자식의 크기에 따라 변경ㅇ자신의크기 : 부모의 크기를 따름(width:100%)ㅇoffset : 사용가능ㅇ스크롤 : 영향을 받음 사용법){ position:relative } 예제)*스타일 요소 *HTML요소 일반적인 박스 부모 박스 자신 박스 위 소스에서 자신박스에 offset 값으로 top:20px 을 추가해서 테스트 해보겠습니다. (2)절대위치(absolute position)->문서를 기준으로 위치..

CSS 박스 스타일 CSS 강좌 07강 이번 강좌에서는 margin, border, padding, float 속성을 사용하여 div 및 박스를 스타일링 해보겠습니다. 박스 역시 HTML 코딩을 하면서 아주 많이 사용하니 반드시 익혀야 하는 스타일 입니다. ※박스모델▷HTML에서 특정 영역에 대한 경계.. 보통 사각형을 사용하는데 이것이 박스모델 입니다.▷속성(1)margin : 테두리를 기준으로 여백을 지정합니다.(2)border : 테두리의 두께를 지정합니다.(3)padding : 테두리와 콘텐츠의 간격을 지정합니다.(4)content : 영역 안에 들어가는 내용을 의미합니다. 예제) Content ※박스 마진겹침(margin collapsing)각각의 div 박스가 두 개 있다고 가정하고 각각의 박..

CSS 강좌 06강 - CSS 링크/표/배경 스타일 A 링크는 HTML 코딩을 하면서 정말 자주 사용하는 태그입니다.자주 사용하는 만큼 CSS로 스타일을 잡아주는게 좋겠죠~ ※A 링크 스타일▷링크는 링크의 상태에 따라 4가지 상태로 구분할 수 있습니다.▷링크의 상태에 따라 적절한 스타일링을 해줍니다.▷링크의 상태(1)방문(클릭) 하기 전의 상태 ->a:link (가장 기본이 되는 상태죠.)(2)이미 방문(클릭)을 실행한 상태 -> a:visited (3)링크에 마우스를 오버하고 있는 상태 -> a:hover(4)링크에 마우스를 클릭하고 있는 상태 -> a:active▷링크의 상태별로 스타일링 하는 순서1순위 : a:link/a:visited2순위 : a:hover3순위 : a:active 사용법)링크상태..