728x90
03. 자바스크립트의 내장 객체를 사용한 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드를 실행하여 currentTime 변수에 저장한다. 현재 시각 결과 화면A. 해설1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.--> var 예약어로 now 변수를 만들고, new 예약어로 Date( ) 인스턴스를 생성한다.3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드..
02. 함수 선언하고 호출하는 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 프롬포트 창에서 입력받은 두 수를 num1, num2 변수에 저장한다.2. 두 수가 같을 경우 '같습니다.'를 표시한다.3. 두 수를 입력받아 크기를 비교하여 더 큰 숫자를 알림 창에 표시하는 함수를 작성한다. 결과 화면A. 해설1. 프롬포트 창에서 입력받은 두 수를 num1, num2 변수에 저장한다.--> prompt 함수로 사용자 입력받고, parseInt 함수로 입력받은 문자열을 숫자으로 바꾸어 var 예약어로 만든 num1, num2 변수에 넣는다.2. 두 수가 같을 경우 '같습니다.'를 표시한다.3. 두 수를 입력받아 크기를 비교하여 더 큰 숫자를 알림 창에 표시하는 함..
01. 함수 선언하고 호출하는 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 함수 선언은 function sumMulti(x, y)로 한다.2. 콘솔 창에 표시할 때 console.log( )를 사용한다.3. sumMulti( ) 함수는 사용자에게 입력받은 두 수의 값이 같으면 두 수를 곱하고, 다르면 더하는 함수이다.4. 두 수의 값으로 5, 10을 실행할 때, 10, 10을 실행할 때의 결과를 콘솔 창에 표시한다. 결과 화면A. 해설1. 함수 선언은 function sumMulti(x, y)로 한다.2. 콘솔 창에 표시할 때 console.log( )를 사용한다.3. sumMulti( ) 함수는 사용자에게 입력받은 두 수의 값이 같으면 두 수를 곱하고, ..
13. 변형함수와 애니메이션의 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. perspective 속성으로 깊이값 200px을 지정한다.2. 변형함수 rotateY( ) 함수로 y축을 기준으로 360도 회전하도록 한다.3. 키프레임은 시작지점, 중간지점, 끝지점 세 군데를 지정한다. 결과 화면A. 해설1. perspective 속성으로 깊이값 200px을 지정한다.--> 키프레임 안에 perspective 속성으로 지정한다.2. 변형함수 rotateY( ) 함수로 y축을 기준으로 360도 회전하도록 한다.--> 키프레임 안에 rotateY(0deg), rotateY(-180deg), rotateY(-360d..
12. 트랜지션의 속성을 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 트랜지션 진행시간은 0.5초로 지정한다.2. 트랜지션 대상은 all로 지정한다.3. 트랜지션 함수는 ease-in으로 지정한다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 결과 화면A. 해설1. 트랜지션 진행시간은 0.5초로 지정한다.--> .top-menu li a:link 스타일에 transition-duration 속성으로 지정한다.2. 트랜지션 대상은 all로 지정한다.--> 기본값이 all이라 따로 지정하지 않아도 되지만, transition-property 속성으로 지정한다.3. 트랜지션 함수는 ease-in으로 지정..
11. 구조 가상 클래스와 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.2. 메뉴6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 메뉴 전체 너비를 610px에서 605px로 줄인다.3. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색을 #555로, 글자색은 #fff로 바뀐다.4. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색은 #b30000로, 글자색은 #fff로 바꾼다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 결과 화면A. 해설1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.--> 구조 가상 클래스 ..
10. 구조 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다. 결과 화면A. 해설1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다.--> img 요소중 가장 첫 번째 이미지를 선택해야 하므로 A:first-of-type 클래스를 사용하여 지정한다. 출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
09. 배경 이미지 속성을 사용한 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 문서 전체의 배경색을 #02233b로 지정한다.2. #container 의 배경색은 흰색으로 지정한다.3. #container 의 배경 이미지는 images\mic.png로 지정하는데, 배경 이미지는 반복하지 않고 오른쪽 아래에 고정한다.4. 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꾼다. 대학언론사 수습기자 모집 신입생 여러분을 기다립니다 모집분야 아나운서(0명) : 학내 소식을 라디오 방송으로 보도 오프닝쇼프로듀서(0명) : 라디오 방송 기획,..