javascript 썸네일형 리스트형 [실습][부스트코스] 푸드위드 - 프로모션 웹페이지 만들기 영상 IR 기법 background pattern UI scroll-behavior UI Javascript Arrow Up-Down 더보기 [실습][Javascript] 마우스 클릭 연습 출처 : 명품 웹 프로그래밍 마우스 클릭을 연습하는 웹 페이지를 작성해보자. 10x10의 셀을 가진 표를 만들고 랜덤하게 선택한 셀에 이미지를 출력하라. 이미지를 클릭하면 다른 셀을 랜덤하게 선택하여 이미지를 출력한다. 우선, 다음과 같이 초기 표를 구성한다 css는 다음과 같다 .main_box { width: 600px; margin: 50px auto; text-align: center; } .random_table { table-layout: fixed; width: 100%; border-collapse: collapse; } .random_table td { border: 3px #000 solid; width: 50px; height: 50px; } 1. 셀 안의 이미지를 로 삽입하여 이미지.. 더보기 [Javascript] document 객체와 DOM 객체의 API(프로퍼티, 컬렉션, 메소드) 출처 : 명품 웹 프로그래밍 브라우저는 HTML 태그로부터 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한다 DOM의 목적은 HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위해서이다 DOM 트리의 루트는 document 객체이다 하지만 document 객체는 DOM 객체가 아니다 DOM 객체의 구성 요소는 프로퍼티/ 메소드/ 컬렉션/ 이벤트 리스너/ CSS3 스타일이다 document 객체의 주요 프로퍼티, 컬렉션, 메소드 [프로퍼티] - location - domain - referrer - cookie - lastModified - readyState - title : 문서의 제목 문자열. 태그가 없으면 빈 문자열 - body - head - defaultView - .. 더보기 [실습][Javascript] 갬블링 게임 웹 페이지 만들기 출처 : 명품 웹 프로그래밍 3개의 숫자가 모두 같으면 성공하는 갬블링 게임 웹 페이지를 작성하라. 처음에는 3개의 숫자 모두 0으로 출력되지만, 각 숫자를 클릭하면 1~3 사이의 랜덤한 값으로 출력한다. 마지막 숫자를 클릭할 때 3개의 숫자를 검사하여 모두 같으면 성공한 것으로 한다. 우선, 다음과 같이 초기화면을 구성한다 겜블링 게임 각 숫자를 클릭하면 1~3 사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 차례대로 클릭해주세요. 0 0 0 @charset "UTF-8"; body { margin: 100px 0 0; padding: 0; } .main_box { width: 500px; margin: 0 auto; text-align: center; } .game_box { width:.. 더보기 [부스트코스][BoostCourse] 10. Javascript 활용(2/2) (UI-API / JS 심화공부 키워드) / 서포터즈 활동 끝 본 게시글은 생활코딩 강의를 듣고 정리한 글입니다 UI-API UI는 User Interface의 약자로, 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 말한다 예시) 인터넷 사용자가 로그인하는 "입력창과 로그인 버튼" API는 Application Programming Interface의 약자로, 프로그래머들이 사용하는 조작 장치를 말한다 예시) 경고창을 띄우도록 하는 코드 "alert" 이처럼 우리는 API를 적절히 사용하며 프로그래밍을 하게 된다 "API/프로그래밍"의 관계는 "단어/문법"의 관계, "조립 부품/조립 방법"의 관계와 같다고 볼 수 있다 그렇다면 UI는 어떻게 표현할 수 있을까? 영어를 사용하는 "회화", 조립된 장치를 적절히 작동시키는 "버튼" 등으로 비유할 수 있을 것이다 더.. 더보기 이전 1 2 3 4 5 다음
