기초공사 (html,css,javascript)

// 등록하기 버튼을 클릭하면 이름과 전공 밑의 td밑에 추가되어 화면에 출력된다. //html 참가자 명단 이 름 전 공 등록하기 이 름 전 공 // js /* 마무리문제 : 이름과 전공을 입력하면 그 값을 받아서 표에 표시하는 소스를 작성해보기 생각노트 1. 변수지정 - 이름 / 전공 2. input#username.value = 이름칸에 입력하는 문자를 표시한다 input#major.value = 전공칸에 입력하는 문자를 표시한다. 3. 노드추가 -새로운 tr요소를 만든다. 요소노드추가 document.crateElement(요소명) -새로운 td요소를 두개 만든다. 텍스트노드추가 - input의 값을 가져오는 것이므로 innerText 아니면 innerHTML -2개의 td요소를 tr요소에 연결한..

마무리문제2 컴퓨터를 사용하다 보면 화면의 오른쪽에 실시간으로 알림 메세지가 나온다. 이것과 비슷한 효과를 만들어보자 [클릭] 버튼을 클릭할 떄마다 화면의 오른쪽 위에 '알림내용이 표시된다.' 라는 메세지를 표시해보자 그리고, 메세지가 계속 화면에 나타나면 불편하므로 나타났던 메세지가 3초 후에 자동으로 삭제되도록 해보자 실행 gogogo~~ // html 클릭! // css .noti { margin:1rem; padding:1rem; background-color:#eee; border-left:3px solid #222; } // js /* 생각노트 : 1.알림내용이 표시될 영역 을 웹브라우저 오른쪽위에 배치하고, 나중에 만들 새로운 요소에 연결한다. 2. 버튼을 클릭하면 div요소를(알림메세지 내..

1.Book List 만들기 [저장하기]버튼을 클릭하면 '제목'과 '저자'필드에 입력된 내용을 가져와서 bookList영역에 태그와 함께 추가하자. 텍스트 필드 내용은 title.value처럼 텍스트 필드 요소의 이름 뒤에 .value를 붙여서 가져올 수 있다. //html Book List 제목 저자 취소하기 저장하기 // js /* 1. '저장하기'버튼을 클릭하면 제목,저자쓴것이 bookList에 표시가 되고, ul인거보니 li가 생길것이므로 li를 추가하는 요소노드를 입력하자. : 제목,저자 쓴것을 가져온다.--> 변수로 지정 :저장해야 하므로 --> 변수 지정 2. '취소하기' 버튼을 클릭하면 삭제된다. */ /* 생각노트 -클릭하면 뭐가와야해? 제목,저자 입력값을 가져와야한다. title.val..

DOM을 활용해 웹 문서에 필요한 요소를 추가, 삭제하는 방법을 살펴보자. DOM은 웹 문서의 구조를 부모 노드와 함께 형제 노드처럼 계층 구조로 표현할 수 있다. DOM에 접근할 때 querySelectorAll( ) 메서드를 사용하면 여러 개의 노드를 한꺼번에 가져올 수 있는데 이렇게 가져온 다양한 노드 정보를 저장한 것을 '노드리스트'라고 한다. 1.웹 문서에 새로운 노드 추가하기 1. 요소 노드 만들기 - createElement( ) 메서드 : 어떤 태그를 사용할지 태그를 만들어 주는 것이라고 생각하면 된다. document.creatElement(요소형) ex) let newP = document.createElement("p") // ....가 추가된다. 새로운 노드만 만들어진 거다, 그 안..

회사 이전 후 아파치가 탐켓을 호출을 안해 홈페이지가 기동이 안된다. 서버담당에게 회사 도메인설정이 안되있다. 라고 말한다. 다른 프로젝트인 '화자인증솔루션' 잘 열리나 확인 1. check apache & tomcat process 그림설명 : 일반적으로 apache와 tomcat이 같이 구동되어 있는 환경에서 해당 서버의 http request는 apache의 80 port로 수신하며, apache가 해당 요청을 8080port의 tomcat에 전달한다. 2 : check appache & tomcat process 문제가 생긴 서버에 접속해 구동되어 있는 process목록을 확인 putty에서 실행한다.(나같은 초초보자는 cmd에서 열다가..잘 안되서..cmd와putty차이점을 검색해봐야겠다.) /..

간단한예제 스타일변경하기 1. li color 변경하기 2. li '저자'클릭하면 alert뜨기 // html Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 스타일변경하기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ ..

//마무리문제 Do it! HTML+CSS+자바스크립트 웹 표준의 정석 저자 고경희 발행일 2021-01-22 쪽수 648쪽 ISBN 979-11-6303-221-2, 13000 상세 설명 보기 / 닫기 -------------------------- 웹 분야 1위! 그만한 이유가 있다! 키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다! -------------------------- 웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 쉽게..

1.텍스트 필드에 입력한 값 가져오기 자바스크립트에서 value 프로퍼티를 사용하면 폼 요소중 텍스트 필드나 이메일 필드에서 사용자가 입력한 값을 가져올 수 있다. 요소.value 주문 정보 이름 : 연락처 : 주소 : 콘솔 창에 다음과 같이 입력 document.querySelector("#order-name").value --> 이름 필드에 입력한 콘솔창에 출력된다. 2.name 속성값을 사용해 폼 요소에 접근하기 폼요소에 id나 class속성이 없고 name속성만 있으면 name식별자를 사용해 폼 요소에 접근할 수 있다. 간단한예시 '상품'항목에 내용을 입력한 후 자바스크립트를 사용해 입력한 내용을 가져오는 소스를 '콘솔'창에 작성하시오 상품 정보 상품 : 갯수 : document.order.pro..

사용자가 선택한 option을 alert에 출력해라 select태그 : 목록을 '선택목록' 이라고한다. 선택목록은 태그를 사용해서 여러개의 항목을 한꺼번에 지정한 후 목록을 펼쳐서 원하는 항목을 선택할수있다. selectedIndex : 사용 ---- 학과 선택 ---- 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 const selectMenu = document.querySelector("#major"); // 선택 목록을 가져와 selectMenu로 저장 console.log(selectMenu); console.dir(selectMenu); function displaySelect() { var index = selectMenu.selectedIndex; //선택한 번호를 ..

자바스크립트에는 특정시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하기 위해서 시간을 재는 함수가 있는데, 이것을 '타이머함수' 라고 한다. 일정 시간마다 반복하기 - setInterval( ) setInterval(콜백함수, 시간) // 선언식으로 표현하기 function greeting(){ console.log('안녕하세요'); } setInterval(greeting, 2000); 콘솔창에 '안녕하세요'가 일정시간마다 반복으로 나온다. // 화살표 함수로 표현하기 setInterval ( ( ) => { console.log('안녕하세요'); }, 2000) ; 반복실행 멈추기, 타이머 함수 종료 시키기 - clearInterval( ) clearInterval(타이머) setIn..