CSS14 [자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1 그동안 정리했던 자바스크립트 내용으로 아주 작고 작은 프로젝트를 만들어 보자!이 시점에서 계속 이론만 배우면 지루하다.작은 프로젝트로 흥미를 돋우기 위해서 배웠던 내용을 응용해서 만들 수 있는 과제(?)를 기획해 보았다.아래코드를 보기 전에 한번 생각 해보세요~ 테이블 칸에 있는 사진에 마우스를 올리면 해당 사진이 확대되어 나타난다. [사진에 마우스를 올려보세요]123456789 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 table{width:500px;height:500px;} td{border:sol.. 2017. 2. 28. [자바스크립트 기초 ]이벤트의 종류와 개념 1 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우resize브라우저의 창 크기를 조정했을 때scroll사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.이벤트설명keydown사용자가 키를 처음 눌렀을 때 keyup키를 땔 때 keypress사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생이벤트설명click사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때dbcl.. 2017. 2. 26. [자바스크립트 기초]DOM 문서객체모델의 이해1 문서 객체 모델은 브라우저가 HTML 페이지의 모델을 생성하고 이 페이지가 브라우저 창에 보여지는 동안 자바스크립트를 이용하여 웹페이지의 내용에 접근하고 수정하기 위한 방법을 명시하고 있다. HTML 페이지에 대한 모델 구성하기브라우저는 웹 페이지를 로드한 후 , 이 페이지에 대한 모델을 메모리에 생성한다. HTML 페이지에 접근하고 수정하기DOM은 모델 내의 각 객체에 접근하고 내용을 수정하기 위한 속성과 메서드들을 정의하고 있다. 내용을 수정하면 브라우저에서 사용자가 보게 될 내용이 변경된다. DOM은 브라우저가 DOM트리를 이용하여 이 모델을 구성하는 방법을 명시한다.DOM이 객체 모델이라고 불리는 이유는 모델이 객체를 이용하여 구성되기 때문이다. 웹 페이지에 대한 모델로서의 DOM 트리브라우저는 .. 2017. 2. 24. [자바스크립트 기초] 스크립트 왕기초 개념 2 자바스크립트 언어는 html과 css와 함께 사용된다. 콘텐츠 계층.html 파일페이지의 구조를 만들고 의미를 부여한다. {css}콘텐츠가 보여지는 방법을 서술한다.(배경, 테두리, 글꼴, 색상 등) javascript()페이지의 동작을 변경하며 역동성을 부여한다. * 기본적인 자바스크립트 코드 작성하기 지금은 몇시? 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 인사 지금은 몇시? var today =new Date(); var hourNow=today.g.. 2017. 2. 17. 11.웹페이지제작 - 완성 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816.. 2016. 11. 3. 10.웹페이지제작 - 컨텐츠 페이지 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 만나 공지 만나 공지사항 메인 회사 상품 자료 공지 문의 만나홈페이지가 새롭게 개설되었습니다. 한국 최초의 전도형 주문QT책자 만나홈페이지가 새롭게 탄생했습니다. 앞으로 주보시안,캘린더,소식지,QT책자 등 다양한 문서자료를 업로드할 예정입니다. 자주 방문하셔서 퀄리티 높은 자료들 .. 2016. 11. 2. 9.웹페이지제작 - 준비2 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172공지 .site h1 a{color:black; text-decoration:none}.site h1 {margin:0; font-size:30px}.site p {margin:0; font-size:12px}.menu ul{ list-style:none}.menu li a{color:black; font-size:14px; text-decoration:none; display:block; padding:5px}.menu li a:hover{ background-co.. 2016. 11. 2. 8.웹페이지제작 - 준비1 1234567891011121314151617 만나 공지 Colored by Color Scriptercs HTML 을 사용하겠다.선언 언어종류 화면출력 내용물 HTML파일 인코딩 스마트폰 및 테블릿PC에 맞게 출력 스타일시트 적용하기 2016. 11. 2. 7.레이아웃 - 박스 겹치기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.boxA{boder:solid 8px green; background-color:gold; color:pink}.box1{ height: 200px; border:4px solid green; text-align: center; position:relative}.box2{ height: 100px; border:4px solid blue; position:absolute; top:150px;left:60px } BOX1 BOX2 Colored by Color Scriptercs - 박스 1과 2를 div태그로 감싸 그룹화 한다. 박스 A의 p.. 2016. 11. 2. 6.레이아웃 - 박스 정렬 순서 float 속성을 left 로하면 상자는 왼쪽에 right로 하면 오른쪽에 붙는다. 2016. 11. 2. 5.레이아웃 - 박스너비 고정하기 박스너비 고정하기 123456789.box2 {float: left; width: 300px ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; }Colored by Color Scriptercs 1. 박스2의 너비를 300px으로 준다. 1234567891011.box3 {float: none; width: auto; height: 200px; border:4px dotted blue; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; .. 2016. 11. 2. 4.레이아웃 - 칼럼 탈락 현상 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879샘플.boxA:after {content: ""; display: block; clear: both}.box1 { float:left; width: 50% ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .box2 {float:.. 2016. 11. 2. 3.레이아웃 - 가로 정렬할 박스의 개수 변경 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253샘플.box1{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box3{border:4px solid green; line-height: 200px;float:left; width:32.5%}.box2{border:4px solid green; line-height: 200px; float:left; width:32.5%}.box4{border:4px solid green; line-height: 200px;}.boxA:after{border:4px solid.. 2016. 11. 1. 17.스프링프로젝트 - includ를 이용한 회사소개 페이지 1. header 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 Company YNG Corp. 로그인·회원가입 [ ${sessionScope.name}님 로그인 중 ] 로그아웃 회사소개 제품정보 커뮤니티 고객지원 Colored by Color Scriptercs 2. side 123456789101112 회사소개 ceo 인사말 찾아오시는길 Colored by Color Scriptercs 3. footer 12345678910111213141516171819202122232425262728293031323334 All cont.. 2016. 11. 1. 이전 1 다음
