반응형 Front-End15 JavaScript - JQuery (2) ◾ 객체로 만들 때는 중괄호{ }로 만든다. ◾ Map의 형태이다. (key, value) var jobOld = "백수"; var obj = {name:"테스트", age:51, job:jobOld}; 💡 jQuery ◾ 기본 문법 $(document).ready(function(){}); ◾ document.ready의 축약본이다. $(function(){}); ◾ jQuery를 통해 함수를 호출해서 alert 경고창을 출력한다. ◾ url은 임의로 정한 것 ◾ Test1Controller.java에 있는 test07 은 주석처리하고, TestController.java에 test07을 추가한다. ◾ jQuery문 안에 jQuery문을 넣을 수 있다. ◾ 결과를 json으로 가져올 것이다. -- 객체.. 2022. 7. 29. JavaScript - JQuery 💡JQuery ◾ 제이쿼리는 객체를 $로 접근하고 안에 있는 함수에 접근한다. 그리고 파라미터를 넘겨준다. ◾ $(대상).함수(파라미터); ex) $(document).ready(); ex) $(document).ready(function(){}); ◾ Lambda 무명함수, 이름을 안 정해준 함수 ◾ 변수처럼 넘겨줄 수 있는 기능도 가지고 있다. ◾ 변수에 함수를 넣어서 사용할 수 있다. ex) var a = function() {} ◾ js에서는 함수도 파라미터로 줄 수 있다. 💡 html을 간단하게 짤 수 있는 사이트 https://jsbin.com/sufubirolu/edit?html,output JS Bin Sample of the bin: jsbin.com 💁♀️ 추가적으로 웹을 공부하는데 .. 2022. 7. 28. CSS - 스타일 속성 총 정리 💡 스타일 속성 💡 배경 관련 속성 💡 폰트 관련 속성 💡 텍스트 관련 속성 💡 Box 관련 속성 - border, margin, padding 💡 목록 관련 속성 💡 테이블 관련 속성 💡 레이어 관련 속성 💡 flaot와 clear 속성 💡 다단 속성 💡 CSS 추가규칙 💡 미디어 쿼리 💡 웹 폰트 💡 CSS3 border 💡 transition 💡 animation 💡 transform 💡 스마트폰 레이아웃 💡 IE 💡 CSS3 Generator 2022. 7. 13. CSS - 선택자 💡 선택자 💬 전역 선택자 ◾ 전체에 적용하기 위한 선택자 ◾ * 를 이용한다 ex) 문서 내의 모든 곳에 굴림체 글꼴 적용 : *{font-face:"굴림체";} 💬 태그 선택자 ◾ html 태그 이름 사용 ◾ 태그가 가지고 있는 기본 스타일 지정, 스타일시트에 의한 스타일 적용 💬 그룹 선택자 ◾ 선택자를 , 로 분리하여 선언하면 여러 개 선택자에 하나의 스타일 적용 ex) 헤더 태그에 색상을 blue로 변경 : h1, h2, h3, h4, h5, h6 {color:blue;} 💬 내포 선택자 ◾ 요소가 내포 관계에 있을 때 적용 ◾ 선택자와 선택자 사이를 공백으로 띄우고 나열 ex) 태그 안에 태그가 올 경우 파란색으로 지정 : p strong{color:red;} 💬 인접 선택자 ◾ 선택자와 선택.. 2022. 7. 13. CSS - 기본 문법 💡 스타일과 스타일 시트 💬 CSS의 장점 ◾ 스타일을 부분으로 나눠서 적용할 수 있다. ◾ text-align:center - 글자를 가운데로 정렬 💡 CSS 기본 선택자 💬 class 선택자 ◾ 마침표(.) 다음에 클래스 이름 지정 ◾ 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의 💬 id 선택자 ◾ 파운드(#) 다음에 id 이름 지정 ◾ 문서 안에서 한 번만 사용한다면 id 선택자로 정의 💬 group 선택자 ◾ 쉼표(,)로 구분해 여러 선택자를 나열 ◾ 같은 스타일을 사용하는 선택자를 한꺼번에 정의 💡 글꼴 관련 스타일 💬 font-family ◾ 웹 문서에서 사용할 글꼴 지정 💬 font-size ◾ 브라우저에서 지정 or 상관없이 글자 크기를 지정 ◾ 상대적인 글자 크기를 지정.. 2022. 7. 12. JavaScript - 실습문제 📃 Button 객체 예제(1) button을 매개변수로 받는 show메서드를 js로 작성한다. 버튼은 태그의 "button" 타입으로 만든다. caption 변수에 버튼의 값을 저장하고 각각의 버튼을 누를 때마다 해당 버튼이 눌렸다는 경고창을 띄운다. Button 객체 예제 다음의 단추를 누르면 단추의 종류가 나타납니다. 📃 Button 객체 예제(2) 버튼을 눌렀을 때 경고창을 띄우는 show1, show2 메서드를 생성한다. 1번 단추를 누르면 1번 단추와 2번 단추를 눌렀다는 경고창이 띄워지고, 2번 단추를 누르면 2번 단추를 눌렀다는 경고창만 띄워진다. Button 객체 예제 1번 단추를 누르면 2번 단추도 같이 눌려집니다. 📃 text, textarea, password 객체 예제 text, .. 2022. 7. 11. JavaScript - 기본 문법 📃 Event 객체 OnClick Event Test : 버튼 1을 한번 클릭 해보세요. OnMouseOver Event Test : 버튼2 위로 마우스를 움직여 보세요. OnMouseUp Event Test : 버튼3 누른 상태로 있다가 마우스를 놓아 보세요. 현재 창의 좌측 하단 부의 메시지를 주시하세요 버튼 4를 한 번 클릭 또는 더블 클릭해보세요. 윈도우의 상태 값이 '버튼 4를 한 번 클릭하였습니다.' 또는 "버튼 4를 한 번 클릭하였습니다." 로 변합니다. 새로운 창 열기/닫기 실습입니다. '새 창 열기'를 누르면 새로운 창이 열리고 '새 창 닫기'를 누르면 창이 닫힙니다. "출력" 버튼을 누르면 화면의 내용을 출력할 수 있습니다. 📃 자바스크립트 기본 구조(1) 자바스크립트 기본 구조 📃 자.. 2022. 7. 11. HTML - 실습문제 04 📂 실습문제 💬 예제 💬 성적표 💬 회원등록 📃 주문서 폼을 만드시오. 💻 실행 화면 📝 Request.html 개인 정보 이름 메일주소 홈페이지(URL) 상품 검색 주문 정보 주문 색상 주문 개수 사이즈 주문일 📃 세미나 폼을 만드시오. 💻 실행 화면 📝 Seminar.html 세미나 정보 주제 : 차세대 웹 표준 기술 HTML 일정 : 5월 12일 14:00 ~ 17:00 장소 : 공학관 2층 세미나실 인원 : 선착순 100명 비용 : 본교 학생 무료(외부 참가자 5,000원_ 참가신청 : 아래 양식에 빠짐없이 기입하여 접수해 주세요. 개인 정보 이름 비밀번호 (수정시 필요) 참가 정보 참가 유형 선택 무료(교내참가자) 유료(교외참가자) 관심 분야 선택 HTML5 시맨틱 CSS3 Web Storage.. 2022. 7. 8. HTML - 입력 양식 작성하기, <form> 태그 💡 태그 ◾ 폼을 만드는 기본 태그 ◾ 과 사이에 여러 폼 요소 삽입 ◾ 기본형 : 여러 폼 요소 💬 서버 /* 여러 가지 폼 요소 */ ◾ 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다. 💬 태그의 속성 💡 폼 삽입하기 💬 태그 ◾ 폼 요소를 그룹으로 묶는 태그 💬 태그 ◾ 그룹으로 묶는 구역에 제목을 붙이는 태그 💬 태그 ◾ 태그와 같은 폼 요소에 레이블을 붙일 때 사용 💡 태그 💬 태그의 type 속성 한 눈에 살펴보기 💬 다양한 속성 ◼ autofocus ◾ 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시 ◼ placeholder ◾ 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐 ◼ readonly ◾ 내용을 보기만 하고 입력하지 못하게 함.. 2022. 7. 8. 이전 1 2 다음 728x90 반응형
