HTML5 - 핵심 정리 및 기출문제
기말시험정리.hwp1장 (1문항)
1장 연습문제
1. 어떠한 문서 안의 정보가 어떻게 구조화 되었는가를 지정하는 언어를 (마크업(Makup))라고 한다.
2. HTML은 요소(Elements), 태그(Tag), 속성(Attributes), 값(Value) 4가지 구성요소로 되어 있다.
3. HTML5의 가장 큰 특징은 웹 문서 뿐만 아니라 웹 애플리케이션도 만들 수 있는 (플랫폼)이다.
4. HTML5의 특징 가운데 하나는 바로(시맨틱 (semantic)) 웹이라고 할 수 있다. (시맨틱 (semantic))이란 ‘의미가 있는’, ‘의미의’라고 해석되는 뜻으로 HTML문서에 의미를 부여하겠다는 의도가 담겨져 있다.
5. 어떤 브라우저에서든 누구든 정상적으로 동작하는 사이트를 이용하기 위해선는 (웹표준)이 지켜져야 한다. HTML5의 등장으로 스크립크만으로도 원하는 기능을 충분히 구현할 수 있다.
6. 1999년 HTML4.01 버전이 발표된 이후에 10년 만에 HTML5가 발표되었다. (○)
7. 기본적인 틀을 놓고 보면 HTML5는 기존의 HTML4와 크게 차이는 없다. (○)
8. 웹을 위한 표준을 관리하는 W3C(World Wide Web Consortium)은 HTML을 차세대 웹표준으로 강력하게 추진되었다. (×) HTML → XHTML
9. 태그는 반드시 시작태그와 종료 태그로 이루어져 있다. (×) <BR> 종료 태그 없음.
10. HTML5는 각 기능별로 브라우저 지원 현황이 모두 다르다. (○)
1. HTML의 특징으로 맞지 않는 것은?
① 웹 문서의 표준으로 지정
② 마크업 언어
③ ASCII 코드로 구성된 일반적인 텍스트 파일
④ 컴퓨터 시스템이나 운영체제에 종속적
4번
HTML은 컴퓨터 시스템이나 운영체제에 독립적이다.
2. HTML5에서 구현할 수 있는 주요 기능에 대한 설명이 잘못 연결된 것은?
①캔버스 - 2차원 그래픽을 그리기 위한 API
② 멀티미디어 - 동영상 및 음성 재생을 위한 비디오와 오디오 API
③오프라인 웹 - 웹 응용을 위한 스레드 기능에 대한 API
④ 웹 소켓 - 서버측의 프로세스와 양방향 통신을 위한 API
3번
보기 ③은 웹 워커에 대한 설명이며, 오프라인 웹은 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 캐시 API를 제공한다.
3. 다음 설명에 해당하는 브라우저는?
모질라 프로젝트라는 개방되어 있는 소스를 네티즌과 함께 향상시켜 발표한 브라우저이다. 속도가 상당히 빠르며 보안 및 사용자 프라이버시에 강하다. 하지만 국내에서는 ActiveX 문제로 인해 인터넷 뱅킹 등의 서비스에 대해 많은 제약이 있다.
① 익스플로러
② 파이어폭스
③ 사파리
④ 오페라
⑤크롬
2번
위의 설명은 파이어폭스에 대한 설명이며, 기타 브라우저에 대해서는 교재 13쪽 브라우저의 종류에 대한 설명을 참조하기 바란다.
4. HTML5에서 변경된 문법은?
① 대소문자 입력
② DOCTYPE 선언
③ 태그의 종료
④ < head >< /head >에 포함되는 내용
2번
HTML5는 DTD를 참조하지 않기 때문에 DOCTYPE 선언이 다음과 같이 간단하게 변경되었다.
< !DOCTYPE html >
5. 다음 설명 중 잘못된 것은?
① HTML5를 위하여 Adobe Flash, Microsoft Silverlight등 다양한 Plug-in을 추가로 사용된다.
② HTML5는 HTML, XHTML과 거의 완벽하게 호환이 된다.
③ HTML5에서는 문자 인코딩 선언을 위하여 간단하게 문자셋만 선언하면 되도록 바뀌었다.
④ HTML5는 아직 완성되지 않았다.
1번
HTML5는 추가적인 플러그-인 없이 스크립트만으로도 다양한 기능들을 제공할 수 있다.
2장(2문항)
2.1 레이아웃을 위한 7가지 요소의 종류 및 사용 방법
- <header> : 머리말
- <hgroup> : 제목, 부제목
- <nav> : 메뉴부분
- <article> : 개별 콘텐츠
- <section> : 제목별로 나눌수 있는
- <aside> : 좌우측의 사이드바
- <footer> : 제작자의 정보, 저작권의 정보
2.2 표현을 위한 4가지 요소
- mark 특정 텍스트를 표시하거나 강조할 때 사용
- time 날짜/시간을 정의할 때 사용(속성: datetime)
- meter 일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용
(속성: value, min, max, low, high, optimum, title)
- progress 작업의 진행 상황을 나타낼 때 사용
(속성: value, min, max)
* <strong>태그 : HTML4에서 강조하고자 하는 문구나 단어에 사용
* <mark> 태그 : 문구나 단어의 시각적 강조 + 의미 강조 (형광색표시)
* <meter> 태그 : 일정 범위안의 값이나 분포 비율 등을 나타낼 때 사용
* <progress> 태그 : 파일 다운로드 상태 표시와 같이 바로 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용.
2장 연습문제
1. 콘텐츠 영역과 내부에 포함되어 있는 각각의 독립적인 콘텐츠와 제목은 HTML5에 새롭게 추가된 (section) 요소, (article) 요소, (hgroup) 요소를 사용하여 나타낼 수 있다.
2. 하나의 section 요소 안에 다른 레벨의 h1~h6 요소를 사용해야만 하는 경우가 있다면 (hgroup) 요소를 사용하여 제목을 묶어주면 된다.
3. (nav) 요소는 주로 전체 웹 페이지에 적용되는 상단의 메뉴를 나타내며, (aside) 요소는 주요 콘텐츠 이외에 남아있는 콘텐츠 등을 나타낸다.
4. time 요소에는 (datetime) 이라는 속성이 존재하는 이 속성에 정확한 형식의 시간이나 날짜를 지정하여 시스템이 지정한 시간이나 날짜를 인식할 수 있게 할 수 있다.
5. 만약 시각적으로 강조하고자 하는 용도로 사용한다면 기존의 strong 요소만으로도 충분할 것이다. 하지만 의미적으로도 강조하고자 한다면 (mark) 요소를 사용해야 한다.
6. 하나의 section 요소에는 반드시 하나의 h1 ~ h6 요소만을 사용해야 한다. (○)
7. 만약 하나의 주제 안에 또 다른 세부 주제가 있다면 section 요소를 중첩하여 사용하면 된다. (○)
8. time 요소는 현재 모든 브라우저에서 지원하고 있다. (X) 일부
9. meter 요소의 value, low, high 속성의 값을 지정할 때 반드시 min 속성의 값과 max 속성의 값 사이의 값이어야 한다. (○)
10. progress 요소는 필수적으로 자바스크립트와 연동해 사용해야 한다. (○)
1. 다음 중 레이아웃을 위해 HTML5에 추가된 요소가 아닌 것은?
① ul
② header
③ nav
④ section
1번
ul은 순서없는 목록을 나타내기 위한 요소이며, header, nav, section, article, hgroup, aside, footer는 HTML5에서 레이아웃을 위해 새롭게 추가된 요소이다.
2. 다음 중 레이아웃을 위해 추가된 요소에 대한 설명이 잘못된 것은?
① hgroup - 제목과 부제목을 묶는 요소
② article - 개별 콘텐츠를 나타내는 요소
③ footer - 제작자의 정보나 저작권의 정보를 나타내는 요소
④ aside - 메뉴 부분을 나타내는 요소
4번
aside는 좌우측의 사이드 바를 나타내는 요소로서, 본문과 직접적인 관련이 없는 링크나 관련 정보를 나타내기 위해 사용된다.
3. 다음 설명 중 잘못된 것은?
① HTML5의 특징 가운데 하나는 시맨틱 웹이다.
② section 요소에는 다른 레벨의 h1~h6 요소를 사용해야 한다.
③기존에는 주로 div 요소를 사용하여 레이아웃을 지정하였다.
④ 프로필, 카운터 등의 콘텐츠는 aside 요소로 나타낼 수 있다.
2번
한 section 요소 내에는 오직 하나의 h1~h6 요소를 사용할 수 있으며, 만약 여러 개의 h1~h6 요소가 사용되면 제목 요소의 레벨에 따라서 암묵적으로 나뉘게 된다. 즉 한 section 요소 안에 같은 레벨의 h1~h6 요소를 사용하게 되면 한 개의 section 요소는 같은 수준의 여러 section 요소로 나뉘게 되고, 다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 중첩된 다른 section 요소를 생성하게 된다.
4. meter 요소의 속성 가운데 기대치를 지정할 때 사용하는 속성은?
① optimum
② value
③title
④ high
1번
meter 요소는 일정 범위의 값이나 분포 비율을 나타낼 때 사용하는 요소로, 다음과 같은 속성을 갖는다. value – 실제로 측정된 데이터 지정, title – 툴팁 입력, high/low – 허용되는 범위의 최대값/최소값 지정, max/min – meter 요소가 인식하는 최대값/최소값 지정
5. 다음 중 콘텐츠 타입에 대한 설명으로 잘못된 것은?
① Flow 콘텐츠 - body 요소 아래에서 사용되는 대부분의 요소들이 포함됨
② Sectioning 콘텐츠 - 헤더와 푸터의 범위 정의를 정의할 때 사용
③ Interactive 콘텐츠 - 문서의 텍스트를 정의할 때 사용
④ Embedded 콘텐츠 - 문서에 외부의 동영상 사진 등을 포함할 때 사용
3번
문서의 텍스트를 정의할 때 사용하는 콘텐츠 타입은 Phrasing 콘텐츠이며, Interactive 콘텐츠는 사용자와의 상호 작용을 위해서 사용하는 콘텐츠 타입이다.
3,4장(5문항)
3장
3.1
* <canvas> 요소의 사용방법
- 텍스트 표현기능, 간단한 애니메이션 표현 가능
- <canvas id="아이디" width="너비" height="높이"> </canvas>
* canvas 객체 및 그리기 컨텍스트 생성
- 해당하는 캔버스를 불러와 canvas 객체를 생성하고 getContext('2d') 메서드를 호출하여 그리기 컨텍스트를 생성하면 된다.
- var 변수1 = document.getElementById('아이디‘) ;
var 변수2 = 변수1.getContext('2d');
3.2 사각형 그리기 위한 메서드 사용 방법
<script type='text/javascript'>
function example(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeRect(20, 20, 100, 100); // 좌표 (20, 20)을 시작점으로 너비 100, 높이 100의 테두리만 있는 사각형을
context.fillRect(120, 120, 100, 100); // 좌표 (120, 120)을 시작점으로 너비 100, 높이 100의 색이 채워진 사각형을
context.clearRect(70, 70, 100, 100); // 시작점 (70, 70)으로 너비 100, 높이 100영역을 지움
}
</script>
3.3 선 그리기 위한 메서드 사용 방법
<script type='text/javascript'>
function example(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.moveTo(10, 10); // 좌표 (10, 10) 으로 시작점 지정
context.lineTo(100, 100); // 시작점에서 좌표 (100, 100) 까지 선을 그림
context.lineTo(50, 100); // 이전좌표에서 좌표 (50, 100) 까지 선을 그림
context.stroke(); // 선을 출력함
}
</script>
3.4 다각형 그리기 위한 메서드 사용 방법
context.beginPath(); // 패스 초기화
context.moveTo(10, 10); // 좌표 (10, 10) 으로 시작점 지정
context.lineTo(100, 10); // 시작점에서 좌표 (100, 10) 까지 선을 그림
context.lineTo(50, 100); // 이전 좌표에서 좌표 (50, 100) 까지 선을 그림
context.closePath(); // 패스 닫음 <------------ 중요
context.stroke(); // 선을 출력함
closePath() 메서드를 사용하면 선이 마지막으로 종료된 지점과 최초의 지점이 자동으로 연결된다.
3.5 부채꼴 그리기 위한 메서드 사용방법
// 부채꼴 그림
context.moveTo(50, 50);
context.arc(50, 50, 30, 30*Math.PI/180, 110*Math.PI/180, false);
context.closePath();
context.stroke();
3.6 2차/3차 베지에 곡선 그리기
- 2차 베지에 곡선
context.moveTo(50,50); // 좌표 (50, 50)에 시작점을 지정
context.quadraticCurveTo(200,200,400,50); // 제어점 좌표 (200, 200)과 종료점 좌표 (400, 50)을 지정
context.stroke();
- 3차 베지에 곡선
context.moveTo(50,50); // 좌표 (50, 50)에 시작점을 지정
context.bezierCurveTo(70,200,150,200,200,50); // 제어점1 좌표 (70, 200), 제어점2 좌표 (150, 200), 종료점 좌표 (200,50)을 지정
context.stroke();
3장 연습문제
1. (캔버스)의 사전적 의미는 유화를 그릴 때 쓰는 천이란 뜻으로 HTML5에서 (캔버스)라는 브라우저에서 그림을 그리기 위하여 놓는 것이라고 생각하면 된다.
2. 브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것은 (자바스크립트)를 사용한다.
3. 사각형을 그리기 위해서는 시작점인 x, y 좌표, (너비), (높이)를 나타내는 4가지 값이 필요하다.
4. 캔버스에서는 각 도형들을 이루는 선들의 집합을 (패스)라고 부른다. 그리고 각각의 선을 서브(패스) 라고 부른다.
5. 원을 그리기 위해서는 arc() 매서드를 사용한다. arc() 메서드에는 시작 x, y좌표, 반지름, 시작 각도, 종료 각도, 그리는 방향을 인자 값으로 지정해야 하는데 시작 각도 및 종료 각도의 단위는 (라디안(radian))을 사용한다.
6. 캔버스를 생성한 후 실제 그림을 그리기 위해서는 canvas 객체를 생성하고 getContext('2d') 메서드를 호출하여 그리기 컨텍스트를 생성해야 한다. (○)
7. 좌표(20,20)을 시작점으로 너비 100, 높이 100의 테두리만 있는 사각형을 그리기 위해서 fillRect( ) 메서드의 속성 값으로 20,20,100,100을 지정한다. (×)
- fillRect ( ) → context.StrokeRect( )
8. 선을 그리는 메서드에 closePath(）메서드를 사용하여 다각형을 그릴 수 있다. (○)
9. 베지에 곡선이란 n개의 점을 기준으로 만들 수 있는 n차 곡선을 의미한다. (×)
- 베지에 곡선이란 n개의 점을 기준으로 만들 수 있는 n-1차 곡선을 의미한다.
10. 3차 베지에 곡선은 bezierCurveTo( ) 메서드를 사용하고 세 개의 제어점과 두 개의 종료점을 갖는다. (×)
- 3차 베지에 곡선은 bezierCurveTo( ) 메서드를 사용하고 두 개의 제어점과 한 개의 종료점을 인수로 갖는다. 시작점은 역시 moveTo( ) 메서드를 사용한다.
11. canvas 요소의 속성에 해당하지 않는 것은?
① id
② align
③ width
④ height
2번
canvas 요소의 지정 형식:
< canvas id="아이디" width="너비" height="높이" >< /canvas >
12. 다음 중 좌표 (50, 100)을 시작점으로 너비 150, 높이 200의 색이 채워진 사각형을 그리기 위하여 올바르게 사용한 것은?
① strokeRect(50, 100, 150, 200)
② strokeRect(150, 200, 50, 100)
③ filRect(50, 100, 150, 200)
④ fillRect(150, 200, 50, 100)
3번
테두리만 있는 사각형 그리기 위한 메서드 → strokeRect(x, y, 너비, 높이)
색이 채워진 사각형을 그리기 위한 메서드 → fillRect(x, y, 너비, 높이)
13. 다음 중 설명이 잘못 된 것은?
① arc() 메서드를 사용하여 원을 그릴 때 인수로 시작점 x, y, 시작 각도, 종료 각도를 갖는다.
② 특정 위치에 원호를 그리기 위해서는 moveTo() 메서드를 사용하여 시작점을 지정해야 한다.
③ 2차 베지에 곡선을 그릴 때는 제어점과 종료점이 필요하다.
④ 3차 베지에 곡선은 가상으로 5개의 보조선이 생성된다고 할 수 있다.
1번
arc(x, y, 반지름, 시작 각도, 종료 각도, 그리는 방향 지정)
14. 부채꼴을 그리기 위하여 사용하는 메서드가 아닌 것은?
① lineTo()
② moveTo()
③ arc()
④ closePath()
1번
부채꼴 그리기 예제 :
context.moveTo(50, 50);
context.arc(50, 50, 30, 30*Math.PI/180, 110*Math.PI/180, false);
context.closePath();
context.stroke();
15. 곡선을 그리기 위한 메서드에 대한 설명 중 잘못된 것은?
① arc() - 원호를 그림
② arcTo() - 부채꼴을 그림
③ quadraticCurveTo() - 2차 베지에 곡선을 그림
④ bezierCurveTo() - 3차 베지에 곡선을 그림
2번
arcTo() 메서드는 직선과 접하는 원을 그릴 때 사용한다.
4장
4.1.1 선 스타일 지정하기
- context.lineWidth = 15; // 선 두께 지정
- context.strokeStyle = 'red'; // 선 색깔 지정
- context.lineCap = "round"; // 선 끝 부분 스타일 지정 (butt. round,square)
- context.lineJoin = "miter"; // 두개 이상의 lineTo() 메서드 사용시 선이 꺽이는 부분 (miter, bevel, round)
4.1.2 그라데이션 지정 관련 메서드의 사용방법
createLinearGradient(x1,y1,x2,y2) : 선형 그라데이션 지정
var 변수 = context.createLinearGradient(x1, y1, x2, y2);
변수.addColorStop(시작점, 색상);
변수.addColorStop(중간점, 색상);
변수.addColorStop(끝점, 색상);
context.fillStyle = 변수
createRadialGradient(x1,y1,r1,x2,y2,r2) : 원형 그라데이션 지정
var 변수 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
변수.addColorStop(시작점, 색상);
변수.addColorStop(끝점, 색상);
context.fillStyle = 변수
addColorStopo(offset,color) : 그라데이션 경계색
4.1.4 도형 합성하기
- context.globalCompositeOperation = 스타일
- 속성
source-atop : 처음 그려진 도형 위에 나중에 그려진 도형이 표시되지만 처음 그려진 도형 영역만 표시됨
source-in : 처음 그려진 도형과 나중에 그려진 도형의 겹쳐진 부분만 표시됨
source-out : 나중에 그려진 도형에서 겹쳐지지 않은 부분만 표시됨
source-over : 처음 그려진 도형 위에 나중에 그려진 도형이 표시됨
destination-atop : 나중에 그려진 도형 영역만 표시되지만 겹쳐지는 부분은 처음 그린 그림이 표시됨
destination-in : 처음 그려진 도형과 나중에 그려진 도형의 겹쳐진 부분만 표시되지만 나중에 그린 도형이 표시됨
destination-out : 처음에 그려진 도형에서 겹쳐지지 않은 부분만 표시됨
destination-over : 처음 그려진 도형이 나중에 그려진 도형 위에 표시됨
lighter : 처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만 겹쳐지는 부분은 두 색의 합을 구하여 표시됨
copy : 나중에 그려진 도형만 표시됨
xor : 처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만 겹쳐지는 부분은 투명하게 표시됨
darker : 처음 그려진 도형과 나중에 그려진 부분과 겹쳐서 보여줌
4.2 텍스트 관련 속성의 종류와 해당하는 속성값의 사용 방법
context.fillText("대한민국", 100, 100); // 색이 채워진 텍스트 삽입
context.strokeText("대한민국", 100, 200); // 테두리만 있는 텍스트 삽입
context.font = "bold 40pt 궁서체"; // 글자 스타일 지정
context.textAlign = 'left'; // 가로 방향 정렬 지정
context.textBaseline = 'top'; // 기준선 지정
context.fillText("대한민국", 200, 100);
context.font = "italic 50pt 굴림체"; // 글자 스타일 지정
context.textAlign = 'center'; // 가로 방향 정렬 지정
context.textBaseline = 'bottom'; // 기준선 지정
context.strokeText("대한민국", 200, 200);
4장 연습문제
1. 선 두께를 지정하기 위해서는 lineWidth 속성을 사용한다. 만약 선의 두께를 지정하지 않았을 경우에 선 두께는 (1.0) 으로 자동 지정된다.
2. 두 개 이상의 lineTo( ) 메서드를 사용하여 선을 그리는 경우 선이 꺽이는 부분의 모양에 대해서는 (lineJoin) 속성을 사용한다.
3. (globalCompositeOperation) 속성의 값을 지정함으로써 도형을 그린 순서와 상관없이 겹쳐지는 부분에 대한 처리를 할 수 있다.
4. drawlmage( ) 메서드를 사용하기 전에 (Image( )) 객체를 생성해야 하고, (Image( )) 객체의 src 속성에 이미지의 주소를 지정해야 한다.
5. 도형에 이미지를 삽입하는 패턴을 만들기 위해서는 ( createPattern( ) ) 메서드를 사용한다.
( createPattern( ) ) 메서드의 인수로는 생성한 이미지의 객체와 반복형식을 지정하여 사용한다.
반복형식의 값으로는 repeat, repeat - x, repeat - y, no-repeat로 지정
6. 선의 색을 지정할 때에는 strokeStyle 속성을 사용한다. 속성값으로는 색상 이름이나 색상 코드로 지정해야 한다. (×) 속상값 색상이름, 색상코드, RGB, RGBA 형식을 지정 context.strokeStyle = 색상;
7. 색상의 값을 지정하는 RGBA 형식에서 A 값은 투명도를 나타내며 0~100 사이의 값을 갖는다. (×)
0~1 사이의 값
8. 선형 그라데이션을 지정하는 createLienarGradient 메서드는 시작 좌표(x1, y1) 와 종료 좌표(x2, y2)를 인수로 갖는다. (○)
9. 그림자 스타일은 대상을 기준으로 x좌표, y좌표를 따로 지정할 수 있다. (○)
10. 색이 채워진 텍스트를 삽입하고자 할 때 fillText( ) 메서드를 사용한다. fillText( ) 메서드의 최대 가로폭을 지정하는 maxWidth 값은 생략이 가능하다. (○)
11. 다음 중 lineCap 속성 값이 아닌 것은?
① butt
② round
③ square
④ miter
4번
lineJoin 속성의 값으로는 miter, bevel, round가 있다.
12. 다음 중 설명이 잘못된 것은?
① RGB 값은 각각 0~255 사이의 값을 갖는다.
② 채우기 색을 지정할 때는 fillStyle 속성을 사용한다.
③그림자 색깔을 지정하는 shadowColor 속성의 기본 값은 흰색이다.
④ drawImage() 메서드는 인수에 따라 3가지의 스타일로 이미지를 삽입할 수 있다.
3번
그림자 색깔을 지정하는 shadowColor 속성의 기본 값은 투명이다.
13. 나중에 그려진 도형만 표시할 때 지정하는 globalCompositeOperation 속성 값은?
① copy
② source-in
③ xor
④ destination-over
1번
source-in : 처음 그려진 도형과 나중에 그려진 도형의 겹쳐진 부분만 표시
xor : 처음 그려진 도형과 나중에 그려진 도형이 모두 표시되지만, 겹쳐진 부분은 투명하게 표시
destination-over : 처음 그려진 도형이 나중에 그려진 도형 위에 표시
14. 다음 중 textBaseline 속성 값이 아닌 것은?
①start
②top
③ hanging
④ alphabetic
1번
start, end, left, right, center는 textAlign 속성의 값이며, textBaseline 속성 값으로는 top, hanging, middle, alphabetic, ideographic, bottom이 있다.
15. 다음 조건의 글자를 삽입하고자 할 때 사용되지 않는 속성은?
- 40pt - 궁서체
- 테두리만 있는 글자 - 가로 방향의 정렬 지정
① font
② textAlign
③ textBaseline
④ strokeText
3번
font 속성은 글꼴, 글자크기, 글자 스타일을 지정할 때 사용
5장 (2문항)
5.1.1 오디오 재생하기 -> audio 요소의 속성,
// 속성값을 지정하지 않아도 무방
<audio src="audio.wav" controls autoplay loop>
<embed src="audio.wav"></embed>
</audio>
5.1.1, 5.1.2 브라우저별 지원하는 오디오 포맷
익스플로어 파이어폭스 사파리 크롬 오페라
oga, ogg X O O X O
wav, wma O O X O O
mp3 O X O O X
AAC O X O O X
*브라우저별 지원하는 비디오 포맷
익스플로어 파이어폭스 사파리 크롬 오페라
oga, ogg X O O X O
mpeg4 O X O O X
WebM O X O X O
5.2.2 이벤트 처리하기
- addEventListener() 메서드 : 이벤트 사용 등록
-play : 미디어 파일을 재생할 때 발생
-timeupdate : 재생 중에 지속적으로 발생
-waiting : 다음 프레임의 다운로드를 대기함
-ended : 재생 종료
-progress : 미디어 파일을 로드할 때 지속적으로 발생
-loadstart : 미디어 파일 로드 시작시 발생
-load : 데이터 다운로드가 완료될 때 발생
-error : 미디어 파일을 재생하거나 로드할 경우 에러가 있을 경우발생
-networkState : 네트워크 접속 상태를 나타냄
-readState : 미디어 파일의 다운로드 상태를 나타냄
5장 연습문제
1. (플러그인) 이란 다른 말로 추가 기능이라고 할 수 있다. 웹 브라우저에 없는 기능을 보완하기 위하여 설치하는 프로그램이다. (플러그인) 프로그램은 독립적으로 실행되지 못하며 웹 브라우저와 함께 동작한다.
2. ( source )요소는 audio 요소와 vedio 요소의 자식 요소로써 src 속성의 역할을 대신하는
요소라고 할 수 있다.
3. ( 코덱 )이란 미디어 파일이 어떤 형식으로 압축되어 있는지를 말한다. video 속성을 사용할
때는 ( 코덱 )까지 지정해야 브라우저는 포함되어 있는 미디어를 재생할 수 있는지 정확하게
판단할 수 있다.
4.. 미디어 파일을 재생하기 위해서는 ( play() ) 메서드를 사용하며, 일시 정지하기 위해서는
( pause() ) 메서드를 사용한다.
5. 이벤트는 ( addEventListener() ) 메서드를 사용하여 등록한다. 그리고 ( addEventListener() ) 메서드 내부에 함수를 정의하여 발생하는 이벤트에 따라 실행할 내용을 정의한다.
6. audio 요소의 src 속성의 값으로는 오디오 파일의 URL이나 파일 경로를 지정한다. (○)
7. audio 요소 사이에 source 요소는 한 개만 지정해야 한다. (×)
여러개를 지정할 수 있다.
8. video 요소의 속성은 audio 요소의 속성이 모두 그대로 존재한다. (○)
9. 재생 중인 미디어 파일의 URL은 currentSrc 속성을 사용하여 확인할 수 있다. (○)
10. 지원하지 않는 미디어 형식을 플레이 하고자 할 경우 MEDIA-ERR-DECODE 에러가 발생한다. (×)
MEDIA-ERR-DECODE : 미디어파일 디코딩 실패
MEDIA-ERR-SRC-NOT-SUPPORTED : 지원하지 않은 미디어 형식
11. audio 요소의 preload 속성의 값이 아닌 것은?
① none ② play ③ auto ④ meta
2번
preload 페이지가 열릴 때 오디오의 로드 설정(none, auto, meta)
12. audio 요소의 속성 가운데 반드시 지정해야 할 속성은?
① src
② autoplay
③ controls
④ loop
1번
재생할 파일 경로의 값을 가지는 src 속성은 반드시 사용해야 한다.
13. 다음 중 크롬 브라우저에서 지원이 되지 않는 오디오 포맷은?
① ogg ② wma ③ mp3 ④ AAC
2번
14. 다음 중 미디어 파일 제어 및 상태에 관련된 속성에 대한 설명이 잘못 연결된 것은?
① playbackRate – 기본 재생 속도 지정
② muted - 음소거 상태 반환
③ readState – 미디어 파일의 다운로드 상태를 나타냄
④ duration – 미디어 파일의 총 재생시간을 초 단위로 반환함
1번
playbackRate 속성은 재생 속도를 지정할 때 사용한다. 기본 재생 속도를 지정할 때는 defaultPlaybackRate 메서드를 사용한다.
15. 다음 중 미디어와 관련된 이벤트가 아닌 것은?
①drag ② progress ③ loadstart ④waiting
1번 drag 이벤트는 드래그 앤 드롭과 관련이 있다.
6장(4문항)
6.1 input 요소의 type 속성에 추가된 입력 타입
email : 이메일 입력
url : URL 입력
number : 숫자 입력
range : 일정한 범위의 숫자 입력
date pickers : 날짜 입력
search : 검색어 입력
color : 색깔 입력
6.1 number, range, Date pickers의 사용 방법
- number : 입력 <input type="number" name="quantity" min="1" max="11" step="2" value="5">
- range : 범위 <input type="range" name="points" min="1" max="11" step="2" value="5">
- Date pickers
date: <input type="date" /><br><br>
month: <input type="month" /><br><br>
week: <input type="week" /><br><br>
time: <input type="time" /><br><br>
datetime: <input type="datetime" /><br><br>
datetime-local: <input type="datetime-local" /><br><br>
6.2 HTML5에 새로 추가된 폼 요소
- datalist : 입력창의 옵션 리스트 정의 <datalist id = id 값><datalist id = id 값><datalist id = id 값><datalist id = id 값>
- keygen : 암호 키를 생성해주는 폼 <keygen name="security" />
- output : 연산결과 출력 <output name=이름 onforminput=연산식></output>
6.3 input 요소의 속성(5개)의 기능 및 사용방법
placeholder : 기본 텍스트 지정
autofocus : 자동 포커싱 지정
autocomplete : 자동 완성 지정
required : 필수입력 지정
pattern : 지정한 정규 표현식에 대한 유효성 검사
6장 연습문제
1. ( email ) 입력 타입은 입력한 이메일에 대하여 유효성을 체크해주는 역할을 한다. 즉 사용자가 입력한 데이터가 이메일 형식에 맞는지를 자동으로 체크해 준다.
2. ( search ) 입력 타입은 검색어를 입력 받기 위해 사용한다. 출력 결과를 보면 텍스트 박스 안에 x 아이콘이 추가된 것을 확인할 수 있다.
3. input 요소에 옵션 리스트를 지정하기 위해서는 list 속성에 ( datalist ) 요소의 id 값을 지정하면 된다. 그리고 리스트는 ( datalist ) 요소 안에 option 요소를 사용하여 지정한다.
4. 데이터를 암호화하고 복호화하기 위해서는 (공개키) 와 (비밀키) 가 필요하다.
(공개키) 란 데이터를 암호화할 때 사용하는 키이고 ( 비밀키 ) 는 데이터를 복호화 할 때 사용한다.
5. ( placeholder ) 속성은 입력 타입에 기본 텍스트를 지정하는 역할을 한다. 예를 들어 ( placeholder ) 속성 값으로 “비밀번호를 입력하세요”라는 문구를 지정하면 해당 텍스트 박스에 회색으로 지정한 문구가 표시된다.
6. number 입력 타입은 사용자가 지정한 숫자와 일치하는지의 여부를 판단하는 역할을 한다. (×)
number 입력 타입은 숫자를 받기 위한 입력 타입이다.
7. color 입력 타입은 색상을 입력 받기 위해 사용한다. (○)
8. keygen 요소를 사용하면 출력 결과에 공개키의 암호화 수준을 나타내는 값을 선택할 수 있다. 해당 값은 수치가 높을수록 보안 등급이 높다. (○)
9. autofocus 속성은 웹 페이지의 로딩이 시작됨과 동시에 자동으로 지정한 입력 타입에 포커스가 위치하게 하는 역할을 한다. (×)
끝과 동시에
10. autocomplete 속성은 yes, no 값을 지정하여 입력된 정보를 저장하거나 저장하지 않을 수 있다. (×)
on, off 값을 지정
11. 다음 중 Date Pickers 입력 타입에 대한 설명에 해당하지 않는 것은?
1) date 입력 타입은 일 단위로 값을 선택할 수 있다.
2) 월, 년 단위로 값을 선택할 수 있는 입력 타입이 존재한다.
3) datetime 입력 타입은 시간대 기준에 따라 선택할 수 있다.
4) time 입력 타입은 달력이 생성되지 않는다.
1번
date 입력 타입은 일, 월, 년 단위로 값을 선택할 수 있다.
12. 다음 중 range 입력 타입에 대한 설명에 해당하지 않는 것은?
1) 텍스트박스 형태로 출력된다.
2) 특정 범위의 숫자를 입력받기 위하여 사용한다.
3) 유효 입력 값을 지정할 수 있다.
4) 초기값을 지정할 수 있는 속성이 존재한다.
1번
range 타입은 슬라이더로 나타낸다.
13. input 요소의 값이 변하게 되면 발생하는 이벤트는?
1) onload
2) onerror
3) onforminput
4) onchange
3번
input 요소의 값이 변하게 되면 onforminput 이벤트가 발생하게 된다. onforminput 이벤트는 output 요소 안에 들어가 있으며 < input > 요소 안의 onforminput 속성의 값으로는 출력할 값에 대한 연산식을 입력한다.
14. 다음 중 반드시 입력해야 할 항목을 지정하는 역할을 할 때 사용하는 속성은?
1) placeholder 속성
2) autofocus 속성
3) required 속성
4) pattern 속성
3번
어떠한 사이트에 회원가입을 하기 위해서는 이름, 이메일 등 반드시 입력해야 하는 항목들이 있다. 이러한 필수 항목들을 바로 required 속성으로 지정할 수 있다.
15. 다음 중 주민등록번호 정규식으로 사용 가능한 것은?
1) \d{6}\-[1-4]\d{6}
2) ^[a-zA-Z0-9]+@[a-zA-Z0-9]+$
3) \d{2,3}-\d{3,4}-\d{4}
4) ^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$
1번
② 이메일 정규식, ③ 전화번호 정규식, ④ 휴대폰번호 정규식
7,8,9장 (6문항)
7장
7.3.2 사용자 폰트 스타일 지정
형식 @font-face { font-family: 폰트이름; src: 폰트위치; }
7.4.2 그림자 효과 스타일 지정
형식 text-shadow: 가로위치 세로위치 농도 색상
7.4.3 특정영역 안의 텍스트 스타일 지정
줄바꿈 word-break 속성 값
nowrap : 줄바꿈이 되지 않게 지정
break-all : 특수 문자를 제외하고 강제 줄 바꿈
keep-all : 텍스트가 한글일 경우 띄어쓰기 기준으로 줄 바꿈
긴문장에 대하여 잘주는 형태 지정 : text-overflow
clip : 영역에 맞추어 글자를 자름
ellipsis : 잘리는 끝부분에 자동으로 ...를 넣어줌
7장 연습문제
1. 하나의 웹이 이루어지기 위해서는 문서 작성을 위한 ( HTML ), 디자인을 위한 ( CSS ), 동작을 위한
( 자바스크립트 ) 가 서로 조화를 이루어야 한다.
2. ( 임베디드 ) 방식은 말 그대로 HTML 문서에 CSS를 삽입하는 방식이다. head 요소안에 style 요소를 사용하여 스타일을 정의하는 것이다.
3. CSS 사용의 우선순위는 ( 링크 ) 방식이 제일 낮고 ( 인라인 ) 방식이 제일 높다.
4. 속성 선택자를 사용하여 속성 값과 일치하는 요소에 적용하기 위한 형식은 ( 요소[속성=“값”] )이다.
5. ( @font-face ) 규칙을 사용하여 외부의 폰트를 손쉽게 불러와 사용할 수 있다. 사용 형식은 ( @font-face ) 에 사용자가 정의한 폰트의 이름을 지정하고 불러올 폰트의 URL을 지정하면 된다.
6. CSS를 사용할 때 HTML과 같이 값에 “ ” 나 ‘ ’를 붙여주어야 한다. (×)
붙여 주지 않는다. CSS는 “ ”, ‘ ’ 부분을 값이 아닌 문자열로 인식하기 때문이다.
7. 요소의 아이디를 사용하여 선택자를 지정할 때는 .를 사용하여 정의한다. (×)
요소 # 아이디
8. 글자 크기를 지정하는 font-size 속성 값은 퍼센트로도 지정 가능하다. (○)
9. eot 폰트 포맷은 익스플로러를 제외한 다른 브라우저에서 모두 지원되고 있다. (×)
eot 확장자를 가진 EOT 파일 포맷 폰트는 익스플로러에서만 사용이 가능한 MS에서 특허 받은 파일 포맷이다.
10. 특수 문자를 포함하여 강제 줄 바꿈을 위해서는 word-wrap 속성을 사용하며 word-wrap 속성의 값은 break-word 하나만이 존재한다. (○)
11. 다음 중 CSS를 사용함으로써의 특징이 아닌 것은?
1) 다양한 기능의 확장
2) 통일된 문서양식 제공
3) 문서 형식의 다양화
4) 로딩 시간의 지연
4번
통일된 문서양식을 제공함으로써 브라우저가 읽어야 하는 문자의 수가 작아지기
때문에 로딩 시간이 단축된다.
12. 다음 중 CSS의 기본 구조에 해당하는 것은?
1) 속성 {선택자: 값;}
2) 선택자 {속성: 값;}
3) 값 {선택자: 속성}
4) 속성 {값: 선택자}
2번
기본 형식에서 선택자란 CSS를 사용하여 꾸며줄 HTML의 요소를 의미한다.
속성은 지정한 선택자의 어떠한 부분을 꾸며줄 것인가 지정하는 부분이고,
값은 해당 속성에 지정할 값을 의미한다.
13. 다음 중 지정한 요소의 자식 요소에 스타일을 적용하는 자식 선택자 형식으로 맞는 것은?
1) 요소
2) 요소1 > 요소2
3) 요소1 + 요소2
4) 요소1 요소2
2번 ① 요소 선택자, ③ 인접 선택자, ④ 자손 선택자
14. 다음 중 text-shadow 속성의 사용 형식으로 맞는 것은?
1) text-shadow: 농도 색상 가로위치 세로위치
2) text-shadow: 가로위치 세로위치 농도 색상
3) text-shadow: 색상 농도 가로위치 세로위치
4) text-shadow: 가로위치 세로위치 색상 농도
2번
예 : p {font-weight: bold; font-size: 30pt; text-shadow: 5px 5px 5px blue}
15. 다음 긴 문장에 대하여 잘리는 끝부분에 자동으로 ...를 넣어주는 text-overflow 속성 값은?
1) nowrap
2) clip
3) ellipsis
4) keep-all
3번
① 줄 바꿈이 되지 않게 지정하는 word-break 속성 값
② 영역에 맞추어 글자를 자르는 text-overflow 속성 값
④ 텍스트가 한글일 경우 띄어쓰기 기준으로 줄을 바꾸는 속성 값
8장
8.2.2 브라우저별 그라데이션 지정 형식 (with 벤더 프리픽스)
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='색상값', endColorstr='색상값')
FF -moz-linear-gradient(시작위치, 시작위치 색상값, 종료위치 색상값)
Chrome -webkit-gradient(타입, 시작위치, 종료위치, 시작위치 색상값, 종료위치 색상값)
Safari
Opera -o-linear-gradient(시작위치, 시작위치 색상값, 종료위치 색상값)
8.3.2 박스 라운딩 스타일 지정
border-radius 박스 라운딩 스타일 지정
border-radius 값을 하나만 지정하면 일괄적으로 네 개의 모서리의 라운딩이 지정되는데 특정부분만 라운딩을 지정할 수도 있다.
border-radius 왼쪽 상단 모서리부터 시작하여 시계 방향으로 각 값이 적용된다.
8.3.3 박스 그림자 스타일 지정
형식 : box-shadow: 가로위치 세로위치 농도 색상
8.4 다단 관련 추가된 속성
column-count 단의 개수
column-width 단의 길이
column-gap 단 사이의 여백 지정
column-rule 단 사이의 구분선(굵기, 색상, 스타일)을 일괄 지정
column-span 지정한 단과 무관하게 출력할 수 있도록 지정
8장 연습문제
1. 하나의 영역을 박스라고 표현한다면 박스에는 테두리 선을 나타내는 ( border ), 테두리 선 밖의 여백을 나타내는 ( margin ), 테두리선과 박스 안 내용 사이의 여백을 나타내는 ( padding ) 부분이 있다.
2. ( background-clip ) 속성은 박스 안의 각 부분을 기준으로 배경 이미지의 위치를 조절하는 역할을 한다.
3. CSS에서 ( HSLA ) 색상 지정 방식은 색상, 채도, 휘도, 투명도를 지정하는 방식이다.
RGBA 색상 및 투명도를 지정하는 방식
4. (벤더프리픽스)란 각 브라우저 개발사별로 새로운 기능에 대하여 시범 적용하기 위하여 사용하는 방식이다. 시범 적용에 사용하므로 후에 해당 속성이 표준화되면 (벤더프리픽스)를 지정하지 않아도 된다.
5. 다단의 스타일에 대한 속성에는 단의 여백을 지정하는 ( column-gap ) 속성과 단 사이의 선 스타일을 지정하는 ( column-rule ) 속성이 있다.
6. background 속성에서 여러 개의 배경 이미지에 대하여 background-image 속성, background-position 속성, background-repeat 속성에 값을 각각 지정하여 표현 할 수 있다. (○)
7. background-origin 속성은 배경 이미지의 일부분을 잘라내어 표현한다. (×)
배경이미지의 기준 위치를 지정하는 역할을 하는 background-origin 속성이 있다.
8. background-size 값은 수치나 퍼센트로 표시가 가능하다. (○)
9. border-radius 속성의 값으로 4개 모서리의 값을 한번에 지정하여 표현할 수 있다. (○)
10. 단에 대한 길이를 지정하기 위해서는 column-width 속성을 사용하며 단의 길이에 따라 자동으로 하나의 페이지에 단수가 나누어진다. (○)
11. 여러 개의 이미지를 한꺼번에 지정하여 사용하기 위한 background 속성의 형식으로 맞는 것은?
1) background: 이미지 주소 x좌표 y좌표 반복 여부
2) background: x좌표 y좌표 이미지 주소 반복 여부
3) background: 이미지 주소 반복 여부 x좌표 y좌표
4) background: 반복 여부 이미지 주소 x좌표 y좌표
1번
3개의 이미지를 div 영역 안에 지정할 경우
div { width: 400px; height:300px;
background: url(image1.jpg) 100% 100% no-repeat,
url(image2.jpg) 50% 50% no-repeat,
url(image3.jpg) 0 0 no-repeat; }
12. 다음 중 브라우저별 그라데이션 지정 형식이 잘못 연결된 것은?
1) 인터넷 익스플로러 → filter: progid:DXImageTransform.Microsoft.gradient
2) 파이어 폭스 → -webkit-gradient
3）크롬 → -webkit-gradient
4）사파리 → -webkit-gradient
2번
파이어 폭스 → -moz-linear-gradient (시작 위치, 시작 위치 색상 값, 종료 위치 색상 값)
13. 다음 중 box-shadow 속성의 값으로 사용할 수 없는 값은?
1) 위치
2) 휘도
3) 농도
4) 색상
2번
박스 그림자 스타일 지정에는 box-shadow 속성을 사용하며 text-shadow 속성과 마찬가지로 그림자의 가로 위치, 세로 위치, 농도, 색상들을 값으로 지정해야 한다.
14. 다음 중 박스 안의 간격을 지정할 때 사용할 수 있는 속성은?
1) border-style
2) border-width
3）margin
4) padding
4번
① 박스 테두리 스타일 지정, ② 박스 테두리 굵기 지정, ③ 박스의 테두리 선 밖의 여백 지정
15. 다음 중 다단을 나누어 사용하는데 제목 표현을 위하여 단을 무시해야 할 경우 사용하는
속성은?
1) column-count 속성
2) column-gap 속성
3) column-span 속성
4) column-rule 속성
3번
다단을 나누어 사용하는데 제목을 표현하려 한다면 단을 무시해야 할 경우가 있다. 이때에는 column-span 속성을 사용하면 된다. 속성의 값으로는 모든 단을 무시하는 all 값이나 단의 개수를 지정할 수 있다.
9장
9.2.1 트랜스폼 관련 속성 및 세부 속성
transform 요소의 모양을 변경
transform-origin 기준점 설정 (left, right, top, bottom, center)
transform 속성의 세부 속성
속성 설명
matrix (값, 값, 값, 값, 값, 값) 여러 값의 행렬
matrix(scaleX, skewX, skewY, scaleY, translateX, translateY)
translate(X값, Y값) 요소를 가로와 세로로 이동
translateX(값), translateY(값)
scale(X값, Y값) 요소의 너비와 높이를 변형
scaleX(값), scaleY(값)
rotate(각도) 요소를 회전
skew(X값, Y값) 요소를 가로와 세로로 기울임
skewX(값), skewY(값)
9.3 애니메이션 관련 속성
animation 애니메이션 관련 속성의 일괄 지정
animation-name 키 프레임의 이름 지정
animation-duration 애니메이션이 실행되는 시간
animation-timing-function 키 프레임 간 변화 정도 지정
(ease, linear, ease-in, ease-out, ease-in-out)
animation-delay 애니메이션이 시작되기 전 대기 시간
animation-iteration-count 애니메이션 반복 횟수 (횟수, infinite)
animation-direction 키 프레임의 연결 방향 지정(normal, alternate)
animation-play-state 애니메이션 실행 상태 지정(running, paused)
9장 연습문제
1. (트랜지션) 이란 단어가 의미하듯 어떠한 조건에 의해 다른 상태로 변화하는 것을 이야기한다.
2. transition-timing-function 속성의 값으로 ( cubic-bezier ) 값을 지정할 수 있다. ( cubic-bezier ) 값은 총4개의 수를 지정해야 하며 이름에서도 나타나듯이 베지어 곡선을 나타낸다.
3. matrix 속성은 한번에 6개의 값을 지정하여 사용한다. 기본 값은 ( 1,0,0,1,0,0 ) 이며, matrix 속성을 사용하여 요소의 이동 및 크기 변형, 기울임 등을 한번에 설정할 수 있다.
4. ( 키프레임 ) 이란 애니메이션을 구성하는 움직임의 키가 되는 프레임을 말하며 각 프레임을 연결함으로써 동작이 완성되는 것이다.
5. 미디어 쿼리를 지정할 때에는 기본적으로 미디어 타입을 지정하며 ( and ) 연산자를 사용하여 조건을 추가한다.
6. transition-duration 속성은 지정한 속성의 스타일이 변화하기 시작하여 최종상태로 변화하기까지의 시간을 값으로 갖는다. 시간은 1/1000초 단위로 지정하면 된다. (×)
초단위로 지정
7. transition-property 속성, transition-duration 속성, transition-timing-function 속성, transition-delay 속성은 각각 사용할 수도 있지만 transition 속성을 사용하여 한번에 값을 지정할 수도 있다. (○)
8. transform-origin 속성은 x좌표와 y좌표를 나타는 두 개의 값을 가지며 기본 값은 10% 10%이다. (×)
기본값 50% 50%이다.
9. 애니메이션을 지정할 때에 정해진 시간에 대한 비율을 지정하여 나타낼 수 있다. (○)
10. 미디어 쿼리를 지정할 때에 only 키워드가 존대하는데 해당 키워드는 지정한 미디어 타입만 제외한 다른 미디어 타입에 대응할 때 사용한다. (×)
미디어 쿼리를 지정할 때 only 키워드가 존재하는데 해당 키워드는 미디어 타입 앞에 붙을 수 있으며 지정한 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하도록 하는 역할을 한다.
11. 다음 중 트랜지션 속성을 지정하는데 고려해야 할 점이 아닌 것은?
1) 어떠한 이벤트에 스타일 변화를 줄 것인지 지정
2) 변화를 주고자 하는 속성의 처음 상태와 최종 상태 지정
3) 몇 가지 스타일의 변화를 줄 것인지 지정
4) 움직임의 속도나 지연 시간 지정
3번
트랜지션 속성 지정 절차
1) 어떠한 이벤트에 스타일의 변화를 줄 것인지 지정
2) 변화를 주고자 하는 속성의 처음 상태와 최종 상태를 지정
3) transition 속성들을 사용하여 움직임의 속도나 지연 시간을 지정
12. 다음 중 transition-timing-function 속성의 값에 대한 설명으로 잘못된 것은?
1) ease-in : 시작은 빠르고 점점 느린 속도로 변화함
2) ease : 기본 값
3) linear : 처음부터 끝까지 같은 속도로 변화함
4) ease-in-out : 시작부터 중간까지 점점 빨라지고 중간에서 끝까지 점점 느려짐
1번
ease-in : 시작은 느리고 점점 빠른 속도로 변화함
13. 다음 transform 속성의 세부 속성 가운데 요소의 너비와 높이를 변형시키고자 할 때 사용하는 것은?
1) matrix (값, 값, 값, 값, 값, 값)
2) scale (X값, Y값)
3) rotate (각도)
4) skew (X각도, Y각도)
2번
① 요소의 크기 변환, 기울임, 이동 등을 일괄 지정, ③ 요소를 회전, ④ 요소를 가로와 세로로 기울임
14. 다음 중 애니메이션 관련 속성에 대한 설명으로 잘못 된 것은?
1) animation-duration : 애니메이션이 실행되는 시간
2) animation-iteration-count : 애니메이션 반복 횟수
3) animation-direction : 키 프레임의 연결 방향 지정
4) animation-name : 애니메이션 지정
4번
animation-name : 키 프레임의 이름을 지정
15. 다음 중 음성 장치를 위한 미디어 타입에 해당하는 것은?
1) handheld
2) tty
3) projection
4) aural
4번
① 작은 휴대용 장치, ② 텔렉스, 터미널등과 같이 폭이 일정한 문자 간격을 가지는 기기,
③ 프로젝터
10~14장(각 1문항)
10장 연습문제
1. 어떠한 요소에 드래그 속성을 부여하기 위해서는 ( draggable ) 속성을 사용한다.
2. 드롭을 허용하기 위해서는 ( event.preventDefault( ) ) 메서드를 사용하여 이벤트의 기본 값을 취소하도록 지정한다.
3. 요소에 편집 기능을 부여하기 위해서는 ( contenteditable ) 속성과 ( designMode ) 속성을 사용하여 지정할 수 있다.
contenteditable : 특정요소의 내용을 편집할 수 있도록 지정
designMode : 웹페이지 전체에 편집 속성을 부여하고자 할 때
4. 텍스트 선택 상태에 대한 정보를 가져오기 위해서는 우선 객체를 생성해야 한다. 객체 생성은 window 객체나 document 객체의 ( getSelection( ) ) 메서드를 사용한다.
5. 만약 어떤 영역 안에 입력된 텍스트에서 특정 위치로 커서를 이동시키고자 할 때는 ( collapse( ) ) 메서드를 사용해야 한다.
6. 드래그 앤 드롭으로 데이터를 교환하기 위해서는 DataTransfer 객체를 사용해야 한다. (○)
7. setData( ) 메서드를 사용하여 전달할 데이터를 보관하면 드롭 측에서는 데이터를 가져오기 위하여 getData( ) 메서드를 사용하는데 인수로 지정할 type의 값은 반드시 setData( ) 메서드에서 지정한 type 값과 같아야 한다. (○)
8. 일반적으로 dropEffect 속성은 드래그시 발생하는 dragstart 이벤트에 지정하고 effectAllowed 속성은 드롭할 때 발생하는 dragenter 이벤트와 dragover 이벤트에 사용된다. (×)
dropEffect→ effectAllowed effectAllowed → dropEffect
9. designMode 속성의 값으로는 on, off 두 가지를 지정할 수 있다. (○)
10. 지정한 명령어의 효과가 일정한가의 여부를 알고자 할 때 사용하는 메서드는 queryCommandEnabled( ) 이다. (×)
queryCommandEnabled( ) : 지정한 명령어를 실행할 수 있는지의 여부 반환
queryCommandlndetem( ) : 지정한 명령어의 효과가 일정한가의 여부 반환
11. 다음 중 드래그 요소가 드롭 요소 범위 안에 들어올 때 발생하는 이벤트는?
1) drag
2) dragend
3) dragenter
4) dragover
3번
(☞ 교재 341쪽 표 10-2 참조)
① drag - 드래그 중에 발생
② dragend - 드래그 종료했을 때 발생
④ dragover - 드래그 요소가 드롭 요소 위에서 드래그하고 있을 때 발생
12. 다음 중 setData() 메서드의 type 값으로 해당하지 않은 것은?
1) Text
2) URL
3) Image
4) Files
3번
Image 값은 사용할 수 없다. (☞ 교재 342쪽 표 10-4 참조)
13. 다음 중 드래그가 끝날 때 어떤 효과를 사용할지 지정하는 dropEffect 속성의 값으로 해당하지 않는 것은?
1) none
2) copy
3) link
4) all
4번
effectAllowed 속성의 값 → none, copy, link, move, copyMove, copyLink, linkMove, all, uninitialized
dropEffect 속성의 값 → none, copy, link, move (effectAllowed 속성에서 허용되지 않은 동작은 사용 불가)
14. 다음 중 execCommand() 메서드에서 선택한 문자열을 지정한 태그로 감싸고자 할 때 사용하는 commandId 값은?
1) formatBlock
2) insertHTML
3) insertLineBreak
4) redo
1번
(☞ 교재 352쪽 표 10-10 참조)
② insertHTML - 커서가 위치한 곳에 HTML 삽입
③ insertLineBreak - 커서가 위치한 곳에 줄바꿈 삽입
④ redo - undo 재실행
15. 다음 중 메서드에 대한 설명이 잘못된 것은?
1) deleteFromDocument() - 모든 선택 해제
2) getRangeAt(index) - 지정한 인수 번째의 선택 영역 반환
3) selectAllChildren(parentNode) - 지정한 노드 아래의 자식 요소 모두 선택
4) addRange(range) - 선택 범위 추가
1번
① deleteFromDocument() - 선택 영역 해제
(☞ 교재 359쪽 표 10-12 참조)
11장 연습문제
1. 클라이언트에 간단한 정보를 저장하기 위해서 ( 쿠키 )를 주로 사용하였다. ( 쿠키 )의 사용은 상당히 간단하고 편리하지만 몇 가지 단점을 가지고 있다. 우선 데이터 저장 용량이 4kb 밖에 되지 않는다. 그리고 유효기간에 제한이 있으며 여러 가지 보안 문제가 있다.
2. 웹 스토리지에 저장되는 데이터는 ( 키 ) 와 값으로 구성되어 있다. ( 키 )는 데이터를 구별하기 위한 것으로 ( 키 )를 통하여 저장한 데이터를 찾을 수 있는 것이다.
3. ( 세션스토리지 ) 는 저장한 데이터를 영구적으로 보관하지 않고 세션이 종료되면 자동 폐기된다.
4. 데이터베이스를 생성하고, 검색하며, 추가, 삭제를 원활히 하기 위한 프로그램의 집합을 ( 데이터베스 관리시스템(DBMS) )라고 하는데 데이터베이스 관리 시스템에서 가장 일반적인 관계형 (DBMS)이다.
5. 데이터베이스에 접근하기 위해서는 ( 트랜잭션 )을 시작해야 하는데 여기에서 말하는 ( 트랜잭션 )이란 데이터베이스의 처리와 관련된 것들을 하나의 단위로 묶은 것을 이야기 한다.
6. 웹 스토리지는 쿠키와 마찬가지로 유효기간에 제한이 있다. (×) 유효기간이 존재하지 않는다.
7. 로컬 스토리지는 같은 도메인에 속해 있는 웹 페이지들에 대하여 모두 접근이 가능하다. (○)
8. transaction( ) 메서드는 3개의 인수를 가질 수 있는데 첫 번째와 두 번째 인수 이외의 세 번째 인수는 생략이 가능하다. (×)
첫 번째 인수이외는 생략 가능하다.
9. 테이블에서 레코드를 수정하기 위해서는 SQL의 UPDATE 문을 사용한다. (○)
10. SQL 문을 사용한 명령어를 처리하기 위해서는 executeSql( ) 메서드를 사용한다. (○)
11. 다음 중 스토리지에 키와 값을 저장하는 형식이 잘못된 것은?
1) localStorage.setItem(key, data);
2) localStorage[index] = (key, data);
3) localStorage.key = data;
4) localStorage[key] = data;
2번
②와 같은 형식은 존재하지 않는다.
12. 스토리지에 저장되어 있는 computer라는 키의 값을 가져오려고 한다. 이에 알맞은 형식은?
1) var value = localStorage["computer"];
2) var value = localStroage.data
3) var value = localStroage.removeItem("computer");
4) var value = localStroage.key("computer");
1번
②와 ④는 존재하지 않는 형식이며, ③은 computer 키의 값을 삭제할 때 사용하는 형식이다.
var value = localStorage.getItem(key); 또는 var value = localStorage.computer;와 같이 사용해도 원하는 키의 값을 가져올 수 있다.
1번
②와 ④는 존재하지 않는 형식이며, ③은 computer 키의 값을 삭제할 때 사용하는 형식이다.
var value = localStorage.getItem(key); 또는 var value = localStorage.computer;와 같이 사용해도 원하는 키의 값을 가져올 수 있다.
13. 다음 중 웹 데이터베이스를 생성하기 위한 openDatabase() 메서드의 인수에 해당하지
않는 것은?
1) 데이터베이스 사용 유효기간
2) 데이터베이스 이름
3) 데이터베이스 버전
4) 데이터베이스 설명
1번
openDatabase() 메서드의 형식:
openDatabase(데이터베이스 이름, 데이터베이스 버전,
데이터베이스 설명, 데이터베이스의 예상 크기)
14. 다음 중 tblmember 테이블에서 age 값이 30인 회원의 name값을 추출하려고 한다.
이에 알맞게 작성한 SQL문은?
1) select tblmember set name = '30'
2) select table tblmember(name, age, '30')
3) select name from tblmember where age='30'
4) select into tblmemberr(age) value ('30')
3번
select문의 기본 형식:
select 필드이름 from 테이블이름 [where 조건문]
15. SQLResultSet 객체를 통하여 알 수 없는 것은?
1) SQL 실행에서 발생한 에러의 개수
2) INSERT문을 실행하여 생성된 ID
3) SQL 실행에 의해 처리된 레코드 수
4) SELECT문을 실행한 결과
1번
SQLResultSet 객체의 insertId, rowAffected, rows 속성 등을 사용하여 각각 ②, ③, ④의 정보를 확인할 수 있다. (☞ 교재 392쪽 표11-5 참조)
12장 연습문제
1. ( 스레드 )란 하나의 프로그램 내에서의 실행 단위이다. 그러므로 멀티(스레드)란 하나의 프로그램 내에서 여러 개의 기능이 동시에 이루어지는 것을 이야기한다.
2. 워커는 기본적으로 하나의 워커 객체와 백그라운드의 프로세스가 일대일로 대응하는 형태로 되어 있다. 하지만 여러 개의 워커 객체가 하나의 백그라운드 프로세스를 공유해서 사용할 수도 있다. 이를 (공유워커)라고 한다.
3. 공유 워커는 객체를 생성할 때 ( shareWorker( ) ) 생성자를 호출한다. 그리고 인수로는 워커와 마찬가지로 자바스크립트 파일명이 들어가며 추가로 워커의 이름도 지정해야 한다.
4. HTML5에서 ( 웹 소켓 )이 추가되면서 별도의 플러그인이 필요 없는 순수한 웹 환경에서 양방향 통신이 가능하게 되었다.
5. webSocket 객체를 생성할 때 URL을 지정해야 하는데 URL을 지정할 때는 일반적인 http나 https를 사용하지 않고 일반 통신인 경우에는 ( ws ) 사용하며 보안 통신일 경우에는 ( wss )를 사용한다.
6. 워커에서 생성한 함수나 변수는 외부에서 호출이 불가능하다. (○)
그러므로 워커에서 작업한 내용을 메인 UI 스레드에서 알기 위해서는 메시지를 주고 받아야 한다.
7. 메인 UI 스레드에서 보낸 데이터는 워커의 getmessage 이벤트 핸들러를 통해서 수신한다. (×)
메인 UI 스레드에서 보낸 데이터를 onmessage 이벤트 핸들러를 사용하여 전달한다.
8. 공유 워커는 객체를 따로 생성하더라도 같은 이름의 파일명과 워커 이름을 사용하면 프로세스를 공유하여 사용할 수 있다. (○)
9. 공유 워커의 데이터 송수신 방법은 일반적인 워커와 동일한 방법을 사용한다. (×)
공유워커는 객체를 따로 생성하더라도 같은 이름의 자바스크립트 파일명과 워커 이름을 사용하면 백그라운드 프로세스를 공유하게 된다.
10. 웹에서 어떠한 정보를 보기 위해서는 항상 클라이언트에서 서버에 페이지 요청을 해야 한다. (○)
11. 다음 중 웹 워커의 데이터 송수신에 대한 설명이 잘못된 것은?
1) 워커에서 작업한 내용을 메인 UI 스레드에서 알기 위해서는 메시지를 주고받아야 한다.
2) 워커에서 메인 UI 스레드로 데이터를 보내기 위해서는 postMessage() 메서드를 사용한다.
3) 메인 UI 스레드에서 데이터를 보내는 방법과 워커에서 데이터를 보내는 방법은 서로 동일하다.
4) 데이터 송수신 작업이 종료되면 자동으로 워커가 종료된다.
4번
워커는 객체에 대하여 terminate() 메서드를 사용하여 종료해야 한다.
12. 공유 워커에서 프로세스를 공유하여 사용하기 위한 조건으로 맞는 것은?
1) 객체 생성
2) 자바스크립트 파일명
3) 프로세스 이름
4) 스레드 이름
2번
공유 워커는 객체를 따로 생성하더라도 같은 이름의 자바스크립트 파일명과 워커 이름을 사용하면 백그라운드 프로세스를 공유하게 된다.
13. port 속성을 사용하여 메인 UI 스레드와 공유 워커와의 통신을 할 때 전달된 데이터를 받기
위해 사용하는 이벤트 핸들러는?
1) onmessage
2) onconnect
3) ongetmessage
4) ondata
2번
port 속성은 메인 UI 스레드와 공유 워커와의 통신을 위한 채널이라고 할 수 있다. 이렇게 port 속성을 사용하여 전달한 데이터는 공유 워커에서 onconnect 이벤트 핸들러를 사용하여 전달 받아야 한다.
14. 다음 중 현재 웹 소켓을 지원하지 않는 브라우저는?
1) 익스플로러
2) 파이어폭스
3) 크롬
4) 사파리
1번
익스플로러는 현재 웹 소켓을 지원하지 않음
15. 다음 중 웹 소켓에서 사용하지 않는 이벤트는?
1) onopen
2) onclose
3) onmessage
4) onconnect
4번 웹 소켓과 관련된 이벤트는 다음과 같다.
이벤트 설명
onopen 연결이 설정되면 호출
onclose 연결이 끊어지면 호출
onmessage 서버에서 데이터를 보내면 호출
13장 연습문제
1. 정보를 알고자 하는 파일의 객체를 구하기 위해서는 우선 선택한 파일의 객체가 저장되어 있는 ( FileList ) 객체를 구해야 한다.
2. input 요소를 사용할 경우 ( change ) 이벤트가 발생했을 경우 파일 객체를 가져올 수 있다.
3. FileReader 객체를 사용하여 파일에 접근할 경우 읽을 파일을 찾지 못하면 ( NOT-FOUND-ERR ) 오류가 발생한다.
4. 오프라인에서도 웹 사이트 이용이 가능하게 하기 위해서 여러 페이지와 파일들을 캐시로 저장한다. 웹 사이트에서 사용하는 모든 페이지와 파일들을 캐시로 저장할 수는 없다. 파일들을 캐시로 저장하기 위해서 반드시 필요한 것이 바로 ( 매니페스트 ) 파일이다.
5. 매니페스트 파일에서 ( NETWORK ) 섹션은 반드시 온라인 상태에서만 접근할 수 있는 파일들을 지정하는 부분이다. 즉 CACHE 섹션과 반대되는 부분이라고 할 수 있다.
6. 웹에서는 읽기 전용으로 파일에 접근하기 때문에 파일의 수정이나 삭제는 할 수 없다. (○)
7. 드래그 앤 드롭을 할 경우에는 드래그 이벤트가 발생할 경우 파일 객체를 가져올 수 있다. (○)
8. FileReader 객체는 UTE-8 형식의 문자열로 변환하여 저장한다. (○)
9. 메인 페이지에 매니페스트 파일을 지정하면 해당 페이지 호출 이후부터 캐시가 동작한다. (○)
10. 매니페스트 파일을 지정한 페이지는 따로 매니페스트 파일의 CACHE 섹션에 페이지 이름을 입력해야 캐시가 된다. (×)
이름을 입력하지 않아도 자동으로 캐시가 된다.
1. 다음 중 파일의 정보를 알 수 있는 속성이 아닌 것은?
1) name
2) type
3) lastModifiedDate
4) CreateDate
4번
CreateDate 속성은 존재하지 않는다.
2. 다음 중 FileReader 객체와 관련 없는 이벤트 핸들러는?
1) onload
2) onprogress
3) onerror
4) onmessage
4번
onmessage는 FileReader 객체와 관련 없다.
3. 다음 중 읽기가 중지되었을 경우 발생하는 FileReader 객체의 오류 값은?
1) SECURITY_ERR
2) ABORT_ERR
3) NOT_READABLE_ERR
4) ENCODING_ERR
2번
① 보안상 안전하지 못하거나, 사용자가 파일을 선택한 후 파일에 변경이 있을 때
③ 파일 권한 등으로 인하여 파일에 접근할 수 없을 때
④ Data URL 길이가 URL 길이의 상한을 초과할 때
4. 다음 중 에러에 의한 캐시 무효화를 나타내는 status 속성의 값은?
1) IDLE
2) CHECKING
3) UPDATEREADY
4) OBSOLETE
4번
① 최신 캐시 이용 상태
② 업데이트 체크 중
③ 최신 캐시를 이용할 수 있음
5. 다음 중 오프라인 접근과 관련된 설명 중 잘못된 것은?
1) 애플리케이션 캐시의 상태를 알기 위해서는 status 속성을 사용한다.
2) 매니페스트 파일에서 FALLBACK 섹션은 대체되는 리소스를 지정하는 부분이다.
3) 매니페스트 파일은 .manifest 확장자를 가진 파일이다.
4) 매니페스트 파일에서 CACHE MANIFEST 부분은 생략이 가능하다.
4번
매니페스트 파일에서 CACHE MANIFEST 부분은 파일 작성시 반드시 포함되어야 하는 부분이다.
14장 연습문제
1. 스마트폰에는 기본적으로 ( GPS )가 내장되어 있으므로 정확한 위치를 파악할 수 있다.
2. 현재 위치 정보를 얻기 위해서는 navigator 객체의 ( getCurrentPosition( ) ) 메서드를 사용해야 한다.
3. ( maximumAge ) 속성은 유효 기간을 설정하는 역할을 하는데 만약 현재의 위치 정보가 지정한 유효기간보다 오래 되었다면 해당 정보는 폐기하고 새로운 위치 정보 확인을 시도하게 된다.
4. JQTouch 모바일 웹 UI 라이브러리를 참조하여 개발을 하기 위해서는 ( JQuery ) 라이브러리를 참조해야 한다.
5. 우리가 일반적으로 모바일에서 사용하는 애플리케이션들을 ( 네이티브 앱(native App ) 라고 한다.
6. WiFi 나 IP 주소 정보 등을 사용하여 위치 정보를 파악할 수 있다. (○)
7. 위치 정보는 개인정보이기 때문에 사용자의 허가가 없으면 정상 동작하지 않는다. (○)
8. timestamp 속성은 위치 정보를 얻은 시각을 1950년 1월1일부터의 밀리세컨드로 표현한다. (×)
1950년 → 1970년
9. watchPosition( ) 메서드는 현재의 위치를 계속 추적하는 역할을 한다. 현재 위치 추적은 자동으로 일정 시간 동안 동작한다. (×)
현재 위치의 추적은 clearPosition( ) 메서드를 호출할 때까지 계속 실행이 된다.
10. 지오로케이션 API를 사용하면 현재 위치의 정보를 알 수 있다. 이러한 정보를 텍스트가 아닌 지도로 나타내려면 지도 서비스를 위한 API를 사용해야 한다. (○)
1. 다음 중 getCurrentPosition() 메서드의 속성과 설명이 잘못 연결된 것은?
1) coords.latitude - 위도
2) coords.longitude - 경도
3) coords.altitude – 위도, 경도의 오차
4) coords.heading - 디바이스 장치의 진행 방향
3번
coords.altitude – 표고
2. 다음 중 getCurrentPosition() 메서드에 지정할 수 없는 옵션은?
1) code
2) enableHighAccuracy
3) timeout
4) maximumAge
1번
code 속성은 에러 코드를 출력하는 역할을 한다.
3. 다음 지오로케이션 API에 대한 설명 중 잘못된 것은?
1) 위치 정보를 얻을 수 없을 경우에는 POSITION_UNAVAILABLE 에러가 발생한다.
2) clearPosition() 메서드는 getCurrentPosition() 메서드의 리턴 값을 인수로 사용한다.
3) coords.speed 속성을 사용하여 디바이스의 미터/초 단위 진행 속도를 알 수 있다.
4) watchPosition() 메서드는 getCurrentPosition() 메서드와 동일한 인수를 사용한다.
2번
clearPosition() 메서드는 watchPosition() 메서드의 리턴 값을 인수로 사용한다.
4. 다음 중 JQTouch 라이브러리를 적용하는 순서로 맞는 것은?
1. JQTouch 라이브러리 다운로드 2. 웹 페이지 화면 구성
3. JQTouch 라이브러리 참조 4. JQTouch 객체 생성
5. UI 스타일 지정
1) 1-2-3-4-5
2) 3-2-5-1-4
3) 1-3-5-4-2
4) 1-4-3-5-2
3번
JQTouch 홈페이지(http://www.jqtouch.com/)에 접속하여 라이브러리를 다운받은 후 해당 라이브러리를 참조하고 객체를 생성하여 웹 앱을 만들 수 있다.
5. 다음 중 모바일과 관련된 설명이 잘못된 것은?
1) 데스크탑과 마찬가지로 모바일에서도 익스플로러 브라우저를 가장 많이 사용하고 있다.
2) 안드로이드와 IOS, 심비안 등의 모바일 OS들이 서로 호환이 되지 않으므로 하나의
어플리케이션이라도 각각의 OS에 맞게 따로 개발을 해야만 한다.
3) 모바일에서 HTML5 활용도가 커질 수밖에 없는 이유 중 하나는 운영체제에 독립적이라는 것이다.
4) 웹 기술로 만든 어플리케이션을 웹 앱(Web App)이라고 한다.
1번
데스크 탑에서는 익스플로러를 가장 많이 사용하지만 모바일에서는 그렇지 않다. 대부분의 모바일이 HTML5 지원이 잘 되고 있는 오페라 브라우저와 WebKit 기반의 안드로이드 브라우저, 아이폰 사파리 브라우저를 사용하고 있다.
'컴퓨터과학[4-2] > HTML5_출석' 카테고리의 다른 글
| HTML5 - Web Worker, Web Socket, Geolocation (0) | 2017.08.25 |
|---|---|
| HTML5 - API (offline web application, File, Web storagy) (0) | 2017.08.25 |
| HTML5 - [13] audio 요소와 video 요소 (0) | 2017.08.24 |
| HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션 (0) | 2017.08.18 |
| HTML5 - [11] Canvas arc(원) arcTo(원호) 베지에곡선 (0) | 2017.08.18 |
댓글