본문 바로가기

전체 글52

JS03 DOCTYPE html> prototype //생성자함수 = java의 class같은 역할[객체의 설계도] function Person(name, age){ this.name= name; this.age= age; } //Person 자료형에 하나만 존재하는 메소드 추가 Person.prototype.show= function(){ document.write("Person : " +this.name+" , "+this.age+""); } //객체 생성 var p1= new Person("sam",20); var p2= new Person("robin",25); //객체의 멤버를 출력하는 프로토타입 메소드들 사용해보기. p1.show(); p2.show(); 2023. 11. 2.
JS02 DOCTYPE html> JS Object //js에서 객체의 2가지 종류 //1. 내장객체 : document, window, navigation..등 ..Date(), Array()등 (내일수업) //2. 개발자가 정의하는 객체 //개발자가 만드는 객체의 방법은 2가지[지금은 class문법이 추가되어 총3개임.. 나중수업] //1) 리터럴 객체[객체를 생성하면서 멤버를 설계하는 방식] var person= { //멤버변수 - property name: "sam", age: 20, //멤버함수 - method show: function(){ //document.write("show function .. "); //일반적으로 멤버함수의 역할을 멤버변수를 제어하는 기능을 작성함. //멤버변수의 값을 출력해.. 2023. 11. 2.
JS01 DOCTYPE html> JavaScript test //이 영영안에서는 스크립트문법 체계를 따름. //이 영역안에 작성한 글씨는 웹브라우저가 interprrete(통역)해서 실행함. //HTML에서 body안에 했던 화면 작업을 모두 스크립트로 처리가능. //화면에 글씨 출력 document.write("hello world!"); //자동 줄 바꿈 안됨. document.write('자동 줄바꿈 안됨 하려면... 태그 이용'); //write()기능으로 출력한 문자열이 HTML태그문이면 브라우저가 해독하여 렌더링 해줌. document.write(''); document.write('이런식으로 하이퍼링크도 가능'); document.write('') //;은 생략가능 //자바스크립트는 프로그래밍 언어.. 2023. 10. 31.
CSS-D06 DOCTYPE html> parent element size *{border: 1px dotted red;} p{padding: 20px; margin: 4px;} a{padding: 10px; margin: 10px;} em{padding: 10px;} strong{margin: 20px;} img{padding: 10px;} input{margin: 20px;} hello nice good html DOCTYPE html> sub menu *{margin: 0; padding: 0;} ul{list-style: none;} nav{ height: 50px; background-color: yellow; } #menu>li{ /* nav_item */ display: inline-block; margi.. 2023. 10. 31.
Web App: 반응형웹03 DOCTYPE html> company HOME | NOTICE | LOGIN | JOIN COMPANY PRODUCT CUSTOMER SERVICE RECRUIT 2023. 10. 30.
Web App: 반응형웹02 DOCTYPE html> rwd *{padding: 0; margin: 0;} #wrap{ width: 90%; border: 4px solid black; margin-right: auto; margin-left: auto; } #wrap div{ display: inline-block; width: 100%; height: 100px; } #wrap div:first-child{background-color: aqua;} #wrap div:nth-child(2){background-color: greenyellow;} #wrap div:nth-child(3){background-color: orange;} #wrap div:nth-child(4){background-color: violet;} #wr.. 2023. 10. 30.