728x90

HTML+CSS+JavaScript 41

[CSS]CSS Basic

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS Basic 🔍웹 브라우저란? 인터넷 통신을 할 수 있는 프로그램을 통틀어서 “웹 브라우저”라고 한다. 이때, 웹 브라우저가 읽을 수 있는 언어는 HTML, CSS, JS 세가지뿐이다. HTML이 문서의 기본구조(뼈대), JS(JavaScript)가 동적 활동..

[HTML5+CSS3+Javascript 웹프로그래밍]13장 실습문제

1.자바스크립트로 비디오 재생, 일시 중지, 음량 제어, 음소거 제어 등 기능을 갖춘 웹 페이지를 작성하라. 자바스크립트로 비디오 제어 동영상을 재생중입니다. 2.태그로 곡목을 출력하고 재생 버튼과 중지 버튼으로 연주를 제어할 수 있는 웹 페이지를 작성하라(할 수 있으면 재생 중인 곡 제목에 색을 입혀보라.) 오디오 재생 1애국가 2bad 3clock 3.오디오 연주가 끝나면, confirm() 메소드를 이용하여 '다시할까요'를 묻고 사용자의 선택에 따라 다시 연주하는 웹 페이지를 작성하라. 애국가 연주 4.체크 박스에 표시된 오디오를 자동으로 연속 연주하는 웹 페이지를 작성하라. 오디오 재생 듣고 싶은 곡은 선택하고 시작 버튼을 누르면 연속하여 자동 연주합니다. 애국가 EmbraceableYou bad..

HTML+CSS+JavaScript 2021.12.02

[HTML5+CSS3+Javascript 웹프로그래밍]13장 이론문제

1.다음 태그를 가진 웹 페이지가 있을 때 물음에 답하여라. 웹 브라우저가 audio 태그를 지원하지 않습니다. (1)웹 페이지가 로드되면 happy.mp3의 오디오가 바로 재생되는가? 예 autoplay속성에 의해 오디오가 바로 재생된다. (2)happy.mp3는 1회 재생되는가 반복 재생되는가? happy.mp3는 반복 재생된다. loop 속성이 설정되면 재생이 끝나고 ended 이벤트는 발생하지 않는다. (3)브라우저 화면에 오디오 재생중지, 음량 조절 등의 제어 버튼이 출력되는가? 출력되지 않는다. controls속성에 의해 콘트롤 출력여부가 결정된다. (4)주석문과 일치하도록 빈 칸에 자바스크립트 코드를 채워라. var song = document.getElementById("pop"); //a..

HTML+CSS+JavaScript 2021.12.02

[HTML5+CSS3+Javascript 웹프로그래밍]12장 실습문제

1.2개의 웹 페이지를 작성하라. 첫 번째 웹 페이지에서는 이름과 학번을 입력받아 세션 스토리지를 저장한다. 그리고 ' 이름으로 학번 검색 페이지로'의 링크를 클릭하면 두번째 페이지를 로드한다. 이 페이지에서는 이름을 입력받고 버튼을 클릭하면 세션 스토리지에서 검색하여 학번을 출력한다. 이름과 학번은 여러 개 저장 가능하다. 이름으로 학번 저장 저장할 이름 저장된 학번 이름과 학번 검색 페이지로 이름으로 학번 검색 검색할 이름 검색된 학번 이름과 학번 저장 페이지로 2. 본문의 '실습: 4' 세션 스토리지 응용'절에서 만든 sessionStorage.html을 2개의 페이지로 분할 작성하여 한 페이지에는 구입 리스트를 저장하고 다른 페이지에는 구입 리스트에서 품목명을 입력하여 개수를 검색하도록 수정하라...

HTML+CSS+JavaScript 2021.11.26

[HTML5+CSS3+Javascript 웹프로그래밍]12장 연습문제

1. 웹 시대의 초기에는 모든 정보를 웹 서버에 저장하고 브라우저는 단순히 웹 서버로부터 정보를 받아와서 출력만 하도록 하였다. 하지만 그 후 로컬 컴퓨터에 웹 정보를 저장할 수 있도록 진화하였다. 그 이유가 아닌 것은? ①사용자 컴퓨터의 고성능화 때문 ②웹 서버의 저장 용량 부담 때문 ③웹 서버와 브라우저간의 통신 트래픽 증가 때문 ④웹 서버에 연결하지 않고도 웹 애플리케이션 실행하고자 2.다음 중 브라우저에 의해 정보를 저장되는 로컬 컴퓨터의 저장소가 아닌 것은? ①쿠키 ②세션 스토리지 ③웹하드 ④로컬 스토리지 3.HTTP 세션을 정확히 설명한 것은? *HTTP(HyperText Transfer Protocol) 통신규칙 *HTTP 세션: HTTP에서 브라우저가 웹 서버로부터 하나의 HTML 자원을 ..

HTML+CSS+JavaScript 2021.11.26

[HTML5+CSS3+Javascript 웹프로그래밍]11장 실습문제

1.다음 HTML 페이지와 출력 결과를 참고하여 원을 그리는 drawCircle() 함수를 작성하라. drawCircle() 만들기 2.다음 HTML 페이지와 출력 결과를 참고하여 다각형을 그리는 drawPolygon()을 작성하라. drawPolygon() 만들기 3.올림픽 오륜기를 캔버스에 출력하는 웹 페이지를 작성하라. 오륜기 그리기 4.캔버스를 이용해서 자신의 사진 위에 자신의 이름을 출력하는 웹 페이지를 작성하라. (1) 사진과 이름 출력 (2) 사진과 이름 출력 5.폼으로부터 여러 속성을 입력받아 캔버스에 사각형을 그리는 웹 페이지를 작성하라. 폼으로 사각형 그리기 x y width height 선굵기 선색 그리기 지우기 6.폼으로부터 여러 속성을 입력받아 캔버스에 원호를 그리는 웹 페이지를 ..

HTML+CSS+JavaScript 2021.11.26

[HTML5+CSS3+Javascript 웹프로그래밍]10장 실습문제

1.다음과 같은 웹 페이지가 있다. 이 웹 페이지가 로드될 때, '접속 감사합니다!'라는 문장을 담은 200*80크기의 새 윈도우를 별도로 출력하도록 웹 페이지를 수정하라. HTML5 HTML5를 학습하는 사이트입니다. 여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다. 2.문제1의 코드를 수정하여보자. (1)새 윈도우가 스크린 장치를 기준으로 (500,400)에 출력되게 하라. HTML5 HTML5를 학습하는 사이트입니다. 여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다. (2)새 윈도우의 타이틀을 '환영'으로, 바탕색을 yellowgreen으로 출력되게 하라. HTML5 HTML5를 학습하는 사이트입니다. 여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다. 3...

HTML+CSS+JavaScript 2021.11.25

[HTML5+CSS3+Javascript 웹프로그래밍]11장 연습문제

1.HTML5에서 웹 페이지에 이미지, 도형 등을 그리는 그래픽 공간을 만드는 태그는? ① ② ③ ④ 2.HTML5 캔버스 기능에 대한 설명 중 틀린 것은? ①캔버스는 HTML5의 표준이다. ②하나의 웹 페이지에 여러 개의 캔버스를 그릴 수 있다. ③캔버스는 2차원 그래픽만 지원하고, 3차원은 지원하지 않는다. 캔버스 객체는 2차원이나 3차원 그래픽을 모두 지원한다. 2차원 그래픽을 수행하려면, canvas.getContext("2d")를, 3차원 그래픽을 수행하려면, canvas.getContext("3d")를 호출하면 된다. ④캔버스도 마우스 이벤트를 처리할 수 있다. 3.다음과 같은 태그가 있을 때 주석에 맞도록 빈 라인에 자바스크립트 코드를 작성하라. 4.컨택스트 객체의 경로와 메소드에 대해 잘못..

HTML+CSS+JavaScript 2021.11.21

[HTML5+CSS3+Javascript 웹프로그래밍]10장 연습문제

1.브라우저에 의해 제공되는 BOM객체들은 계층관계로 이루어진다. 계층의 최상위에 있는 객체는 무엇인가? ①document ②window ③body ④html window 객체는 브라우저가 제공하는 BOM 객체의 최상위에 존재한다. 2.다음객체들 중 특징이 다른 하나를 골라라. ①document ②navigator 현재 작동중인 브라우저에 대한 다양한 정보를 나타내는 객체이다. ③div ④span 3.다음 지시에 따라 window.open()함수를 작성하라. 3-1.이름이 win인 새 윈도우를 열어 test.html을 출력한다. 3-2.현재 윈도우에 구글 웹 페이지를 출력한다. 3-3.크기가 400*500인 새 윈도우에 네이버 페이지를 출력한다. 3-4.스크린의 왼쪽 상단 모서리에 위치하는 새 윈도우를 ..

HTML+CSS+JavaScript 2021.11.21
728x90