* css제어 - 문제 1~2 1번 2번 3번 4번 5번 6번 7번 8번 9번 클릭 JS 카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다. 증가 감소 1. 노드 css 변경하기 - 노드의 css속성을 바꿀 때는 style속성을 이용합니다 - css의 속성은 카멜표기법을 따릅니다. - 노드의 style에 전달되는 값은 문자열로 작성합니다 * 규칙 노드.style.css속성 = 값 * css 제어 - 문제 3, 답안 봄 여름 가을 겨울 이미지 바꾸기 색상 변경하기 봄 여름 가을 겨울 이미지 바꾸기 색상 변경하기 * css 제어 - 문제 4, 답안 onfocus - input에 focus가 들어갈 때(마우스가 포커싱을 줄 때) 그 때 동작합니다, onblur(input에 fo..

1. 객체(JSON) - 제이슨을 → 문자열로 JSON.stringify(data); - 문자열을 → 제이슨으로 단, 이경우는 엄격한 형식을 지킨다(키, 값이 전부 “ “로 묶여야 한다) JSON.parse(문자열) 꼭, 쌍따옴표 2. 자바스크립트 이벤트 핸들러 * 이벤트 핸들러 - 이벤트란? 화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다. - 자바스크립트의 첫번째 강력한 기능이며, 사용방법만 암기하면 충분합니다. - 태그와 스크립트의 이벤트를 연결하는 방식에는 인라인 이벤트 모델, 기본 이벤트 모델, 표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙입니다. * 이벤트 종류 1) click: 마우스를 클릭했을 때 이벤트 발생 2) keyup: 키를 떼었을 때 이벤트 발생 3) load: 로딩이 완..

Array - JavaScript | MDN (mozilla.org) Array - JavaScript | MDN JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다. developer.mozilla.org 1. 조건문(자바와 동일), 반복문, 탈출문 - 조건문: if else, switch * 예제 1 - 반복문: while, for, for in * 예제 2, 3(향상된 for문) - 탈출문: break, continue * 예제 4 2. 함수(선언적 함수) 1) 자바스크립트 사용자 정의 함수 - 종류: 선언적 함수, 익명함수 - 의미: 사용자가 정의하는 함수 2) 선언적 함수 - 반환 유형은 적지 않으며 매개변수도 적지 않을 수 있습니다. ..

* JavaScript 안내서 - JavaScript | MDN (mozilla.org) JavaScript 안내서 - JavaScript | MDN JavaScript 안내서에서 JavaScript 언어 개요와 사용법을 알아보세요. 언어 기능에 대해 상세한 정보가 필요하면 JavaScript 참고서를 방문하세요. developer.mozilla.org * visual studio code에서 open folder에서 course에 js 폴더 추가해서 거기로 폴더 선택하면 저장 위치 변경 가능 - 실행 순서 1. 자바스크립트의 기본 구조 - - 자바스크립트 파일 안에는 5. 데이터 타입 1) 기본타입 - 숫자(number): 정수, 실수 구분 없음 - 문자열(string): 문자, 문자열 구분 없음 쌍따..

* 전날 과제 예제(html, css) 상세내용 [게릴라특가] 30일체험가능! 벨라페이스 3컬러 LED마스크 눈마사지 겸용/4단계 시간조절/피부홈케어 +사은품까지! 135,000원 무료배송 상품별배송 ㅣ 택배배송 ㅣ당일출고, 12시 이전 결제 건까지 해당 (주말, 공휴일 제외) 총 상품 금액 0원 장바구니 구매하기 등록하기 * {margin: 0px; padding: 0px; line-height: none;} img{max-width: 100%; height: auto;} .btn{border-radius: 0;} .form-control {border-radius: 0;} .detail .title {min-width: 350px;} .detail .price { font-size: 25px; fon..

1. 미디어쿼리-부트스트랩 반응형 디자인 반응형 디자인 media 박스 박스 박스 박스 박스 박스 * 시작하기 · 부트스트랩 (bootstrapk.com) 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com * jQuery jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, ..

* 실습 예제(1) - html, css 개발자 도구를 활용 전체 너비 960px Web Tablet Mobile Login Regist HTML CSS JS JQuery Main... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar t..

1. position(매우 중요) - absolute: 절대적 위치 좌표를 설정합니다. - fixed: 화면을 기준으로 절대적 위치 좌표를 설정합니다. - position 속성은 반드시 다음 스타일 속성(top, bottom, left, right)과 함께 사용한다. * position법칙 1. absolute를 사용하면 부모의 relative요소 기반으로 박스가 올라온다. 그렇기 때문에 일반적으로 2. 자식요소에 absolute를 사용하면 부모요소의 relative를 넣어준다. 3. top, bottom중 하나, left, right중에 하나로 위치를 조정한다. * z-index 속성 - HTML 태그는 사실 3D형태를 나타내고 있다. 이러한 순서를 변경할 때에 z-index 속성을 사용한다. 큰 값을..