• 한국방송통신대학교(Korea National Open University)
  • 출처와 한계
  • 한국방송통신대학교 안내
  • 컴퓨터과학과 안내
  • 평가 운영 방식
  • 학습 가이드
  • 과목별 강의 정리
    • 데이터정보처리입문
      • 강의별 핵심 정리
      • 핵심 암기표
      • 키워드 압축 카드
      • 빈칸 테스트
      • 연습문제
        • 정답
    • HTML5웹프로그래밍
      • 강의별 핵심 정리
      • 핵심 암기표
      • 키워드 압축 카드
      • 빈칸 테스트
      • 연습문제
        • 정답
    • Java프로그래밍
      • 강의별 핵심 정리
      • 핵심 암기표
      • 키워드 압축 카드
      • 빈칸 테스트
      • 연습문제
        • 정답
    • 파이썬프로그래밍기초
      • 강의별 핵심 정리
      • 핵심 암기표
      • 키워드 압축 카드
      • 빈칸 테스트
      • 연습문제
        • 정답
      • 강의 체크포인트
    • 유비쿼터스컴퓨팅개론
      • 강의별 핵심 정리
      • 핵심 암기표
      • 키워드 압축 카드
      • 빈칸 테스트
      • 연습문제
        • 정답

한국방송통신대학교(Korea National Open University)

한국방송통신대학교(KNOU) 컴퓨터과학과의 학교·학과 안내, 주요 과목 강의별 정리, 평가 운영 방식, 시험 대비용 암기표를 한 곳에 모은 위키 문서다.

출처와 한계

본 문서의 강의별 정리·연습문제·암기표는 U-KNOU 강의 페이지의 학습개요·학습목표·연습문제·정리하기·참고자료를 교재 및 멀티미디어 강의에서 가져와 시험 대비용으로 재구성한 것이다. 시험 범위와 평가 방식은 학기마다 바뀔 수 있으므로 응시 전 반드시 학교 공지사항으로 최종 확인한다. 강의 개편이 있는 경우 최신 내용은 학교 공지에서 확인한다.

원본 자료 저장소: https://github.com/currenjin/knou-archive

한국방송통신대학교 안내

KNOU(Korea National Open University)는 원격 학사 시스템을 운영하는 국립대학이다. 온라인 강의(U-KNOU)와 출석수업, 지역 학습관 운영을 결합해 학기는 1·2학기 체제로 진행하고, 평가는 출석수업(또는 대체시험), 과제물, 형성평가, 기말시험으로 구성한다.

공식 안내는 학교 사이트를 참고한다.

• 학교 홈페이지: https://www.knou.ac.kr/
• U-KNOU(강의 사이트): https://ucampus.knou.ac.kr/

컴퓨터과학과 안내

컴퓨터과학과는 정보컴퓨터과학대학 소속으로, 프로그래밍 언어(Java, Python), 웹 프로그래밍(HTML5), 데이터 처리·분석, 컴퓨팅 응용 영역(유비쿼터스 등)을 다룬다. 이 문서에서 다루는 과목은 학과 커리큘럼의 일부이며, 전체 과목 안내는 학과 페이지를 참고한다.

• 학과 안내(컴퓨터과학과): https://cs.knou.ac.kr/

평가 운영 방식

학습 가이드

각 강의의 학습목표와 연습문제부터 훑은 뒤, 헷갈리는 강의는 학습개요·주요용어로 되돌아가 다시 읽는다. 연습문제는 정답을 가리고 풀어본 뒤 맞춘다. 강의별 정리만으로 부족하면 각 과목 끝에 붙어 있는 핵심 암기표·시험범위 암기 리스트·키워드 압축 카드를 활용한다.

과목별 강의 정리

데이터정보처리입문

우선순위: 통계자료 검색·엑셀 함수/그래프·R/Python 분석 흐름을 절차 중심으로 암기

강의별 핵심 정리

강의록 PDF·보충자료(1~15강) + 강의노트 + 연습문제 + 기말 기출 기준. 14·15강은 파이썬(아나콘다) 활용 기준.

1강 데이터 분석과 컴퓨터

• 효율적인 정보 수집·가치판단·활용 능력이 필수인 사회 = 지식정보화사회
• 데이터분석 절차: 문제의 정의 → 조사·실험의 계획 → 데이터의 수집 → 데이터의 정리·분석 → 분석결과의 평가
• 정보처리에 컴퓨터 프로그램 언어를 반드시 알아야 하는 것은 아니다(GUI 패키지로 가능) / 다만 기본개념·방법론·소프트웨어 활용법은 숙지해야 함
• 범용 통계패키지: SPSS(GUI 환경, 쉬운 분석처리) / SAS(방대한 자료처리·다양한 분석절차) / R(객체지향·대화형 통계분석·그래프 강점, 무료) / 파이썬(데이터과학용 프로그래밍 언어)
• 주의: 스프레드시트 형태 입력은 엑셀 등의 특징이며, 파이썬을 "스프레드시트형 입력 언어"로 설명하면 틀림
• 주요 사이트: www.spss.co.kr / www.sas.com / R 공식 = www.r-project.org / www.anaconda.com(파이썬) / kosis.kr

2강 데이터 입력과 점검

• 데이터(data): 관심 주제에 대해 수집된 구조화된 정보(수치·문자·그림 등 표현양식 무관) / 수집법 = 조사·실험·관찰 (데이터가 숫자로만 이루어진 것은 아님)
• 케이스(case): 특정 조사단위로부터 얻어진 정보의 집합체(=행, 응답자) / 변수(variable): 각 조사단위에서 측정된 개별 속성(=열, 설문문항)
  • 예) 4문항 설문을 100명에게 → 케이스 100개 / 변수 4개
• 측정의 4가지 수준(척도):

| 척도 | 의미 | 예 | |—|—|—| | 명목척도 | 분류·확인 목적의 기호, 대소·연산 무의미 | 성별, 전공분야, 소속 지역대학, 좋아하는 과목 | | 순서척도 | 서열·대소 구분만 의미, 간격은 모름 | 만족도(매우만족~매우불만족), 계란 대/중/소 | | 구간척도 | 차이(간격)는 의미, 비(比)는 무의미, 0이 임의적 | 섭씨온도, 습도, 지능지수 | | 비율척도 | 차이와 비(比) 모두 의미, 절대 0 존재 | 키, 몸무게, 나이, 급여 |

• 변수의 측정수준은 적합한 통계분석 기법 선택에 영향을 미친다(영향 없다 = 틀림)
• 데이터 오류 점검법: 입력 범위 벗어난 케이스 확인 / 변수 간 논리적 연관성 확인 / 각 케이스를 설문지와 대조 (응답 누락이 있다고 해당 설문지를 무조건 분석에서 제외하지는 않음)

3강 통계정보의 검색 및 활용 (1)

• 국가통계정보·데이터제공 사이트를 인터넷으로 검색하는 강의
• 주요 사이트 암기:

4강 통계정보의 검색 및 활용 (2)

• 기술통계량과 통계그래프 학습 + 웹 활용 분석
• 핵심 순서: 자료 정렬 → 평균/중앙값 계산 → 편차 계산 → 분산·표준편차 계산 → 상대비교가 필요하면 변동계수 → 그래프 선택

4강 계산 루틴

• 예제 자료: 2, 4, 4, 6, 8
• 표본평균: x̄ = (Σxᵢ) / n
  • 계산: (2+4+4+6+8)/5 = 24/5 = 4.8
  • 주의: 절댓값·지수 붙은 식은 오답
• 편차: 각 값에서 평균을 뺀 값 xᵢ − x̄
  • 2-4.8=-2.8, 4-4.8=-0.8, 4-4.8=-0.8, 6-4.8=1.2, 8-4.8=3.2
• 편차제곱합: 편차를 제곱해서 더함
  • (-2.8)²+(-0.8)²+(-0.8)²+1.2²+3.2² = 7.84+0.64+0.64+1.44+10.24 = 20.8
• 표본분산: s² = Σ(xᵢ − x̄)² / (n − 1)
  • 계산: 20.8/(5-1) = 5.2
  • 주의: 표본분산 분모는 n−1, 편차는 그냥 더하지 말고 제곱해서 더함
• 표본표준편차: s = √s²
  • 계산: √5.2 ≈ 2.28
  • 의미: 분산은 제곱 단위, 표준편차는 원자료 단위로 돌아온 산포
• 변동계수(CV): CV = 표준편차 / 평균 또는 %로 표준편차 / 평균 × 100
  • 계산: 2.28/4.8 ≈ 0.475 = 47.5%
  • 사용: 측정단위·평균 크기가 다른 두 집단의 상대적 산포 비교

4강 정렬·사분위수 루틴

• 중앙값: 자료를 정렬했을 때 가운데 값
  • 2, 4, 4, 6, 8의 중앙값 = 4
  • 이상치(예: 490)에 영향을 거의 안 받아 평균보다 안정적
• 사분위수: 정렬된 자료를 4등분하는 기준값
  • Q1 = 제1사분위수 = 아래쪽 25% 지점, 즉 하위 절반의 중앙값
  • Q2 = 제2사분위수 = 전체 중앙값 = median
  • Q3 = 제3사분위수 = 아래쪽 75% 지점, 즉 상위 절반의 중앙값
  • 감각: Q1보다 작은 값이 대략 25%, Q2보다 작은 값이 대략 50%, Q3보다 작은 값이 대략 75%
• 사분위수 손계산법(시험용)
  1. 자료를 작은 값부터 정렬한다.
  2. 전체 중앙값을 찾는다. 이것이 Q2다.
  3. 중앙값을 기준으로 왼쪽 절반의 중앙값을 찾는다. 이것이 Q1이다.
  4. 중앙값을 기준으로 오른쪽 절반의 중앙값을 찾는다. 이것이 Q3다.
  5. 자료 개수가 홀수이면 보통 전체 중앙값은 양쪽 절반 계산에서 제외한다.
• 예제 1: 홀수 개 자료 2, 4, 4, 6, 8
  • Q2 = 가운데 값 = 4
  • 왼쪽 절반 2, 4의 중앙값 = (2+4)/2 = 3 → Q1=3
  • 오른쪽 절반 6, 8의 중앙값 = (6+8)/2 = 7 → Q3=7
• 예제 2: 짝수 개 자료 1, 2, 4, 7, 9, 10
  • Q2 = 가운데 두 값 평균 = (4+7)/2 = 5.5
  • 왼쪽 절반 1, 2, 4의 중앙값 = 2 → Q1=2
  • 오른쪽 절반 7, 9, 10의 중앙값 = 9 → Q3=9
• 다섯숫자요약: 최솟값 / 제1사분위수(Q1) / 중앙값(Q2) / 제3사분위수(Q3) / 최댓값
  • 예제 1의 다섯숫자요약 = 2 / 3 / 4 / 7 / 8
  • 평균·분산·표준편차는 다섯숫자요약에 포함되지 않음
  • Q1·Q3 계산법은 교재/도구별로 약간 달라질 수 있음. 시험에서는 보통 문제에서 주어진 방식이나 강의 방식에 맞춘다.
• 사분위범위(IQR): Q3 - Q1, 가운데 50% 자료가 퍼진 폭
  • 예제 1의 IQR = 7-3 = 4
  • IQR이 클수록 가운데 절반이 더 넓게 퍼져 있다.
• 상자그림: 다섯숫자요약을 그림으로 표시
  • 상자 왼쪽/아래쪽 경계 = Q1, 상자 안 선 = 중앙값(Q2), 상자 오른쪽/위쪽 경계 = Q3
  • 상자 길이 = Q3-Q1 = IQR

4강 그래프 선택 감각

• 히스토그램: 연속형 자료의 분포 모양·치우침·봉우리 확인
• 줄기-잎 그림: 원자료 값을 보존하면서 분포 확인
• 상자그림: 중앙값·사분위수·이상치 확인
• 산점도: 두 수치형 변수의 관계 확인

5강 문서작성

• 한글 2018 사용법(문서·표 작성, 수식편집기)
• 각주: 낱말이 있는 페이지 아래쪽에 추가 설명 / 미주: 문서 맨 마지막에 위치
• 블록 지정(F-키): F3 = 칸 단위 블록, F4 = 줄 단위 블록
• 한자 변환: 한글로 입력 후 [입력]-[한자로 변환], F9(또는 한자키)로 대신 / 두 글자 이상 단어는 F3로 블록 지정 후 변환 (F5로 한자입력을 대신한다는 설명은 틀림)
• 다단 편집(신문·잡지식 세로 분단), 그림 삽입 기능 제공
• 수식편집기 입력어:
  • 카이제곱 통계량 chi^2 — 행렬·합 표기에서 chi 사용
  • 행 구분(나란히 표기) = & / 분수 = over (예: 관측도수 over 기대도수)
  • 경우 나눔(중괄호로 조건별 정의) = cases (예: f(x) = cases{1, & 0 leq x leq 1 # 0, & 아닐 때}), 줄 바꿈 = #

6강 엑셀을 이용한 데이터 처리 (1)

• 엑셀 = 행·열 데이터 분석용 대표 스프레드시트: 그래프 표현 / 통계분석 / 데이터베이스 관리도구 기능 보유 (인터넷 검색 기능은 핵심 기능 아님)
• 함수식은 등호(=)로 시작, 값·셀참조·함수로 새 값 생성 / 함수 이름은 대문자로만 입력해야 하는 것은 아님(대소문자 무관)
• 통합문서(workbook) = 하나의 파일(워크시트·차트시트·매크로시트 포함), 책 한 권에 비유 / 워크시트(worksheet) = 한 페이지 / 시트 이름은 변경 가능
• 셀(cell): 열과 행이 만나는 지점, 셀주소(예: A1 = A열·1행)를 가짐
• 수식입력줄: 선택 셀 정보 표시, 데이터 입력·수정 및 수식 입력 부분
• 이웃하지 않은 셀 다중 선택 = Ctrl 키를 누른 채 클릭

7강 엑셀을 이용한 데이터 처리 (2)

• 엑셀 연산자, 함수 기능·형식, IF 함수, 데이터 분석도구 학습
• =IF(조건, 참일때, 거짓일때) 형식 — 예) =IF(B2<60, "불합격", "합격")(60 미만이면 불합격) / ELSE는 사용 안 함
• 평균: =AVERAGE(B2:C2) — 반드시 =로 시작 (AVERAGE(...)만 쓰면 수식 아님)
• 합계 조건판정: =IF(SUM(B2:C2)>=130, "합격", "불합격") — 예) 71+65=136 ≥ 130 → 합격
• 절대참조 =$B$2+$C$2: 아래로 드래그·복사해도 참조 셀이 고정되어 값이 그대로(예: D3에도 B2+C2=136)
• 통계 함수: SUM / AVERAGE / MEDIAN(중앙값) / STDEV(표준편차)

8강 엑셀을 이용한 그래프 그리기 (1)

• 그래프 = 데이터의 정보·의미를 시각적으로 요약해 분석결과 이해를 도움
• 정성적 데이터(명목·순서척도) / 정량적 데이터(구간·비율척도, 연속형)
• 원 그래프(pie chart): 항목별 비율을 면적 비율로 표시, 전체 대비 항목 비교·특정 항목 강조에 적합
• 성별 등 범주형 도수분포 시각화 = 막대그래프 + 원그래프
• 시계열(시간 흐름) 데이터의 추세·경향 파악 = 꺾은선 그래프(시계열에 가장 적합) / 원 그래프는 시계열 추세 파악에 부적합
• 간격이 일정한 시계열 → 꺾은선형, 두 수치형 변수 관계 → 분산형으로 구분

9강 엑셀을 이용한 그래프 그리기 (2)

• 도수분포표 → 히스토그램, 산점도, 상관분석 학습
• 도수분포표(frequency table): 겹치지 않는 계급(범주)에 속한 관측치 개수 요약 — 정성적·정량적 데이터 모두 적용 가능(정성적에 못 쓴다 = 틀림)
• 히스토그램(histogram): 연속형 데이터의 분포·특징, 계급구간 위에 상대도수 비례 직사각형 / 연속형은 계급의 개수·폭 결정이 중요
• 산점도(scatter plot): 두 연속형 변수의 관계를 보는 첫 단계 그래프, 차트마법사에서 분산형 선택 / 시간-전압처럼 두 수치형 변수의 XY 변화도 분산형
• 상관계수(r): 두 변수의 선형관계 강도·방향
  • r > 0(예 0.9): x 증가 시 y도 직선관계로 증가(양의 상관) / r < 0: x 증가 시 y 감소 / 절댓값이 1에 가까울수록 강함, −1 ≤ r ≤ 1(1.02 같은 값은 불가능)

10강 엑셀 활용 (1)

• 엑셀 함수 기능, 날짜/시간 함수, 텍스트 함수 활용
• MID(문자열, 시작, 개수): 중간 추출 — 예) =MID(A2,2,2), A2="대한민국" → "한민"
• LEFT(문자열, n) = 왼쪽 n글자 / RIGHT(문자열, n) = 오른쪽 n글자 — 예) 학과코드 첫 글자 판정 =IF(LEFT(A2,1)="A", "통계·데이터과학", "컴퓨터")
• YEAR(NOW())−YEAR(G2): 현재 연도에서 생년의 연도를 빼 나이(만 나이 근사)를 구함 / NOW()는 인수 없이 현재 날짜·시각 반환
• SUM 기반 점수계산: 예) =SUM(D2:F2)-5*G2(합계에서 결석일수×5 차감)
• SUMPRODUCT(배열1, 배열2): 같은 행끼리 곱한 뒤 모두 합산 — 예) A={1,2,3}, B={3,2,1} → 1·3+2·2+3·1 = 10
• 채우기 기능: 연속·규칙적 숫자를 쉽게 입력 / DATE(year, month, day) = 날짜 일련번호

11강 엑셀 활용 (2)

• 원리합계 계산, 함수 그래프, 목표값 찾기, 적분 근사
• 셀 참조 3종:

| 참조 | 표기 | 복사 시 동작 | |—|—|—| | 상대참조 | A1, B2 | 행·열 모두 따라 이동 | | 절대참조 | $A$1 | 행·열 모두 고정 | | 혼합참조 | $A1, B$2 | $ 붙은 쪽만 고정 |

• 목표값 찾기: 함수가 축과 만나는 점, 즉 f(x)=0의 해(방정식 해)를 구하는 기능
• 함수 f(x) 개형 그리기 = 차트마법사에서 분산형 선택
• 환율 변환처럼 고정 셀이 있을 때 혼합참조 사용 — 예) C6 = B6*B$2(환율 셀의 행만 고정해 아래로 채움)
• 복리 원리합계: 원리합계 = p × (1 + r)^n (p=원금, r=연이율, n=기간) — 채우기용 셀식 예) =$B$1*(1+B$2)^$A5(원금 절대고정, 이율은 행 고정, 기간은 열 고정)

12강 R을 활용한 자료분석 (1)

• R = 무료 통계시스템, 대화형 언어로 통계분석·그래프 함수 다수 내장 (관련 사이트 www.r-project.org, www.rstudio.com, www.rcommander.com)
• attach(ex.data): 데이터 객체의 변수들을 변수명으로 직접 사용 / 해제 = detach()
• tapply(분석변수, 그룹변수, 함수): 그룹별 함수 적용 — 예) 성별별 급여 평균 tapply(salary, sex, mean)
• read.table("경로", header=T): 텍스트 파일 읽기(첫 줄이 변수명이면 header=T)
• head(ex.data): 데이터의 앞부분 미리보기
• library(xlsx): 설치한 패키지를 메모리에 올려 사용(가동) / 설치는 install.packages()

13강 R을 활용한 자료분석 (2)

• Function 문, 정규분포, 이산형·연속형 그래프 학습
• 사용자 정의 함수: 함수명 <- function(인자, ...) { ... ; return(값) }, 인자에 기본값 지정 가능(예: n3=5)
• list(v1=..., v2=...) 로 여러 결과 묶고, 결과$v1 처럼 $로 원소 접근
  • 예) power.value(2, 1/2, 2)에서 $v3 = 2^5 = 32(n3 기본값 5), $v1 = 2^(1/2) = 1.414
• 함수 정의 시 괄호 짝이 안 맞으면(예: (function(x){x*x}) 오류 발생
• boxplot(ex.data): 상자그림 / stem(ex.data): 줄기-잎 그림 / hist(): 히스토그램

14강 파이썬을 활용한 자료분석 (1)

• 파이썬 = 객체지향, 문법이 쉽고 확장성 좋아 데이터과학에서 R과 함께 널리 사용
• 설치: 아나콘다 www.anaconda.com 에서 배포판 내려받기(Spyder·Jupyter Notebook 포함)
• 패키지 설치·관리: DOS(명령) 창에서 pip install 패키지명 (예: pip install tensorflow)
• 리스트 인덱스는 0부터 — 예) a=[1,2,3,4,5]에서 a[4] → 5
• 함수 정의: def 함수명(인자): 후 들여쓰기 본문 — 예) hello2("Jeong") → Hello Jeong !
• 딕셔너리: 중괄호 {} 와 콜론 : 사용 — 올바른 예 me = {'height':180, 'weight':70} (대괄호 []나 = 사용은 틀림)

15강 파이썬을 활용한 자료분석 (2)

• pandas로 데이터 읽기·기술통계·그래프 작성 (import pandas as pd)
• 파일 읽기: pd.read_csv("...csv", header=0)(CSV) / pd.read_excel("...xlsx", header=0)(엑셀)
• 변수 선택: nex8.iloc[:, 1:] — 위치 기반 인덱싱으로 첫 변수(id) 제외하고 나머지 가져옴
• 기술통계량: nex8.describe() — count/mean/std/min/25%/50%/75%/max 출력
• 막대그래프: import matplotlib.pyplot as plt 후 plt.bar(x, height) — 예) plt.bar(edu_freq.index, edu_freq["count"])
• 빈도표: pd.crosstab(index=nex8["edu"], columns="count")

핵심 암기표

키워드 압축 카드

빈칸 테스트

1. 데이터 분석 절차는 ( ) → ( ) → ( ) → ( )이다.
2. 데이터는 ( ), 정보는 ( )이다.
3. 범주형은 ( ), 양적은 ( ) 자료다.
4. 모집단은 ( ), 표본은 ( )이다.
5. 평균은 이상치에 ( ), 중앙값은 이상치에 ( ).
6. 절대참조 표기는 ( )이다.
7. 막대그래프는 ( ), 꺾은선그래프는 ( ), 원그래프는 ( ), 산점도는 ( )에 쓴다.
8. pd.read_csv()는 ( ), describe()는 ( )이다.

연습문제

Q1. 일반적인 데이터분석 절차이다. ( )안에 순서대로 가장 적합한 것은?

지문: ( a ) - 조사, 실험의 계획 - 데이터의 수집 - ( b ) - 분석결과의 평가

1. a : 문제의 정의, b : 설문지 평가
2. a : 설문지 작성, b : 데이터의 정리, 분석
3. a : 전문가와의 상담, b : 데이터의 분석
4. a : 문제의 정의, b : 데이터의 정리, 분석

Q2. 컴퓨터를 통하여 데이터 정보를 효율적으로 처리하기 위해 요구되는 사항이 아닌 것은?

1. 컴퓨터를 쉽게 사용할 수 있어야 한다.
2. 정보를 검색하고 수집․분석하기 위해서는 반드시 컴퓨터 프로그램 언어를 알아야 한다.
3. 데이터 분석에 대한 기본개념과 방법론들을 숙지하여야 한다.
4. 데이터 분석을 위한 다양한 소프트웨어의 활용법을 숙지하여야 한다.

Q3. 다음 중 범용 통계패키지에 대한 설명으로 잘못된 것은?

1. SPSS는 GUI 환경아래에서 통계분석 및 자료처리가 이루어지므로 쉽게 분석처리를 할 수 있다.
2. SAS는 방대한 양의 자료 처리 기능이 뛰어나며 다양한 통계 분석 절차를 제공하고 있다.
3. 파이썬은 미국에서 개발된 프로그램 언어로 스프레드시트 형태의 데이터 입력을 취하고 있다.
4. R은 객체지향 프로그래밍 언어로서 대화형 통계분석과 그래프 기능이 뛰어나다.

Q4. 오늘날과 같이 효율적인 정보의 수집, 수집된 정보의 가치판단, 정보활용 능력이 필수적으로 요구되는 사회를 가장 잘 나타낸 말은?

1. 유비쿼터스사회
2. 전자정보화사회
3. 지식정보화사회
4. 전자통신사회

Q5. R 통계패키지를 다운받고자 한다. R 공식 사이트는 ?

1. www.r-package.org
2. www.r-project.org
3. www.r-package.com
4. www.r-project.com

지문: 다음 설문지를 기준으로 한다.

설문	응답
문항1. 당신의 나이는 몇 세입니까?	( ) 세
문항2. 당신의 성별은?	1. 남자 / 2. 여자
문항3. 당신은 현재의 전공에 만족합니까?	1. 매우 만족 / 2. 약간 만족 / 3. 약간 불만족 / 4. 매우 불만족
문항4. 당신의 전공분야는 무엇입니까?	1. 인문학 / 2. 사회과학 / 3. 자연과학 / 4. 공학 / 5. 농학 / 6. 기타

Q6. 설문문항에서 명목척도에 해당하는 것은?

원문 이미지: 이미지 해석: 위 설문지의 문항은 다음과 같다.

| 설문 | 응답 | |—|—| | 문항1. 당신의 나이는 몇 세입니까? | ( ) 세 | | 문항2. 당신의 성별은? | 1. 남자 / 2. 여자 | | 문항3. 당신은 현재의 전공에 만족합니까? | 1. 매우 만족 / 2. 약간 만족 / 3. 약간 불만족 / 4. 매우 불만족 | | 문항4. 당신의 전공분야는 무엇입니까? | 1. 인문학 / 2. 사회과학 / 3. 자연과학 / 4. 공학 / 5. 농학 / 6. 기타 |

1. 문항1, 문항3
2. 문항2, 문항3
3. 문항2, 문항4
4. 문항3, 문항4

Q7. 주어진 설문지를 이용하여 100명의 학생들에게 응답을 얻었다. 데이터의 구성에 대한 올바른 설명은?

원문 이미지: 이미지 해석: 위 설문지의 문항은 다음과 같다. 100명에게 응답을 얻었으므로 케이스=응답자 100명, 변수=설문문항 4개로 본다.

| 설문 | 응답 | |—|—| | 문항1. 당신의 나이는 몇 세입니까? | ( ) 세 | | 문항2. 당신의 성별은? | 1. 남자 / 2. 여자 | | 문항3. 당신은 현재의 전공에 만족합니까? | 1. 매우 만족 / 2. 약간 만족 / 3. 약간 불만족 / 4. 매우 불만족 | | 문항4. 당신의 전공분야는 무엇입니까? | 1. 인문학 / 2. 사회과학 / 3. 자연과학 / 4. 공학 / 5. 농학 / 6. 기타 |

1. 4개의 케이스와 100개의 변수로 구성된다.
2. 100개의 케이스와 4개의 변수로 구성된다.
3. 50개의 케이스와 4개의 변수로 구성된다.
4. 4개의 케이스와 50개의 변수로 구성된다.

Q8. 다음의 데이터에 대한 설명 중 올바른 것끼리 짝지어진 것은?

지문: Ⅰ. 데이터는 어떤 관심 주제에 대한 구조화된 정보(information)이다. Ⅱ. 데이터 수집의 대표적인 방법으로는 조사, 실험, 관찰 등을 들 수 있다. Ⅲ. 데이터는 숫자로만 이루어져 있다.

1. Ⅰ, Ⅱ
2. Ⅰ, Ⅲ
3. Ⅱ, Ⅲ
4. Ⅰ, Ⅱ, Ⅲ

Q9. 다음 측정 수준에 대한 설명 중 옳지 않은 것은?

1. 명목척도에서 각 조사단위에 부여된 숫자는 구분을 목적으로 부여된 기호에 불과하다.
2. 섭씨온도, 습도, 지능지수 등은 구간척도로 측정된 값이다.
3. 변수의 측정수준이 적합한 통계 분석 기법의 선택에 영향을 미치지는 않는다.
4. 계란을 크기에 따라 대․중․소로 구분하면 순서척도로 측정된 것이다.

Q10. 데이터를 입력한 후, 제대로 입력되었는지 점검하고자 한다. 데이터의 오류를 점검하기 위한 방법이 아닌 것은?

1. 각 변수의 입력 범위를 벗어난 케이스를 확인해 본다.
2. 변수간의 논리적 연관성을 고려하여 확인한다.
3. 각 케이스를 조사된 설문지와 비교하면서 점검한다.
4. 설문항목 중 하나라도 응답하지 않은 경우가 있다면 해당 설문지는 분석에서 제외한다.

Q11. 통계·데이터과학과에 재학 중인 학생들을 대상으로 통계조사를 실시하였다. 다음에 제시된 변수를 조사하였는데, 이 중 명목척도로 측정된 변수는 몇 개인가?

지문:

• 학생의 소속 지역대학
• 학교 생활만족도(아주 만족, 만족, 보통, 불만족, 아주 불만족)
• 수강 신청한 과목 중 제일 좋아하는 교과목

1. 없음
2. 1개
3. 2개
4. 3개

Q12. 한국사회과학데이터센터 사이트는?

1. http://ww.ksdc.re.kr
2. http://ecos.bok.or.kr/
3. http://lib.stat.cmu.edu/DASL
4. http://www.itl.nist.gov/div898/strd/

Q13. 국가경제에 관한 통계들을 제공하는 한국은행 경제시스템 사이트는?

1. http://kosis.kr/
2. http://ecos.bok.or.kr/
3. http://kostat.go.kr/
4. http://laborstat.molab.go.kr/

Q14. 통계청 사이트는?

1. http://kosis.kr/
2. http://ecos.bok.or.kr/
3. http://kostat.go.kr/
4. http://laborstat.molab.go.kr/

Q15. 다음 중 카네기 멜론 통계학과에서 운영하는 사이트로서 다양한 데이터를 제공하는 사이트는?

1. http://kosis.kr/
2. http://ecos.bok.or.kr/
3. http://lib.stat.cmu.edu/DASL
4. http://www.itl.nist.gov/div898/strd/

Q16. NIST(National Institute of Standards and Technology)에서 여러 통계 분석 등과 관련하여 유용한 데이터를 제공하는 사이트는?

1. http://ww.ksdc.re.kr
2. http://ecos.bok.or.kr/
3. http://lib.stat.cmu.edu/DASL
4. http://www.itl.nist.gov/div898/strd/

Q17. 다음 중 표본평균을 구하는 공식은?

원문 이미지:

1. $\bar{x} = \frac{\sum

   x_i

   }{n}$

2. $\bar{x} = \frac{\sum x_i^c}{n}$
3. $\bar{x} = \frac{\sum x_i}{n}$

4. $\bar{x} = \frac{

   \sum x_i

   }{n}$

Q18. 자료의 개수나 측정단위가 다른 두 개 이상의 자료에 대한 표본집단 간의 상대적인 산포를 비교할 때 이용되는 측도로, 두 집단의 단위가 다르거나, 단위는 같지만 평균의 차이가 클 때 두 그룹의 산포를 비교하는 데 유용하게 이용되는 측도는?

1. 중앙값
2. 표준편차
3. 표준오차
4. 변동계수

Q19. 탐색적 자료분석의 관점에서 살펴볼 때 한 묶음의 자료를 정리하는 숫자로서 다섯숫자요약이란 다음 중 무엇인가?

1. 중앙값, 평균, 분산, 제1사분위수, 제3사분위수
2. 중앙값, 평균, 표준편차, 제1사분위수, 제3사분위수
3. 최소값, 최대값, 중앙값, 제1사분위수, 제3사분위수
4. 최소값, 최대값, 평균, 제1사분위수, 제3사분위수

Q20. 다음 중 표본분산을 구하는 공식은?

원문 이미지:

1. $s^2 = \frac{\sum (x_i + \bar{x})}{n - 1}$
2. $s^2 = \frac{\sum (x_i - \bar{x})}{n - 1}$
3. $s^2 = \frac{\sum (x_i + \bar{x})^2}{n - 1}$
4. $s^2 = \frac{\sum (x_i - \bar{x})^2}{n - 1}$

Q21. 조사된 자료가 다음과 같다. 중앙값은?

지문: 22 5 21 16 18 20 23 24 32 490 36

1. 20
2. 21
3. 22
4. 23

Q22. 다음 괄호 안에 알맞은 용어로 짝 지어진 것은?

지문: 문서를 작성하다 보면 전문적인 용어에 대한 추가적인 설명이 필요한 경우가 있다. 이 때 이용할 수 있는 것이 ( ㉠ )와(과) ( ㉡ )이다. ( ㉠ )는(은) 낱말이 있는 페이지의 아래쪽에 추가 설명이 위치하며, ( ㉡ )는(은) 문서의 맨 마지막에 온다는 점에서 차이가 있다.

1. ㉠ : 각주 ㉡ : 미주
2. ㉠ : 미주 ㉡ : 각주
3. ㉠ : 장평 ㉡ : 간격
4. ㉠ : 간격 ㉡ : 장평

Q23. 수식편집창의 다음 ( ) 안의 ㉠, ㉡, ㉢에 적합한 것은?

지문: ( ㉠ )^2 ~ ( ㉡ ) =~ sum {( 관측도수 - 기대도수 )^2 } ( ㉢ ) 기대도수 # ( ㉡ ) =~ sum { ( f_{ij} - {hat f}{ij} )^2 } ( ㉢ ) {hat f}{ij}} 수식편집기창을 이용하여 다음 수식을 작성하고자 한다.

1. ㉠ : chi, ㉡ : &, ㉢ : vert
2. ㉠ : chi, ㉡ : &, ㉢ : over
3. ㉠ : theta, ㉡ : #, ㉢ : vert
4. ㉠ : theta, ㉡ : &, ㉢ : over

Q24. 수식편집창의 다음 ( ) 안의 a, b 에 적합한 것은?

지문: f(x) = ( a ) { 1, & 0 leq x leq 1 ( b ) 0, & 아닐 ~때 } 한글 2018의 수식편집기창을 이용하여 다음 수식을 작성하고자 한다.

1.

   a=cases, b=&

2.

   a=vert, b=&

3.

   a=cases, b=#

4.

   a=vert, b=#

Q25. 다음은 한글 2018 사용법에 대한 설명이다. 옳은 설명을 모두 고른 것은?

지문: Ⅰ. 복사나 이동을 위한 블록 지정에서 F3는 칸 단위 블록 설정, F4는 줄 단위 블록을 지정할 수 있다. Ⅱ. 신문이나 잡지 등에서 사용되고 있는 다단 편집의 기능은 제공하고 있다. Ⅲ. 그림을 삽입하여 문서를 작성할 수 있다.

1. Ⅰ, Ⅱ
2. Ⅰ, Ⅲ
3. Ⅱ, Ⅲ
4. Ⅰ, Ⅱ, Ⅲ

Q26. 다음은 한글 2018 사용법에서 한자 변환에 대한 설명이다. 옳은 설명을 모두 고른 것은?

지문: Ⅰ. 한자로 된 단어를 입력하고자 하는 경우는 먼저 한글로 해당 단어를 입력하고 [입력] - [한자로 변화]을 이용하여 변환한다. Ⅱ. [F5] 키를 이용하면 [입력] - [한자 입력]을 대신할 수 있다. Ⅲ. 두 글자 이상의 단어는 [F3] 키로 블록으로 잡아 한자로 변환시킬 수 있다.

1. Ⅰ, Ⅱ
2. Ⅰ, Ⅲ
3. Ⅱ, Ⅲ
4. Ⅰ, Ⅱ, Ⅲ

Q27. 다음은 엑셀에 대한 함수 사용방법에 대한 설명이다. 옳은 설명끼리 짝지어진 것은?

지문: 가. 값, 셀참조, 함수 등을 사용하여 새로운 값을 생성한다. 나. 함수식은 등호(=)로 시작한다. 다. 엑셀에서 함수 이름은 대문자로만 입력해야 한다.

1. 가, 나
2. 가, 다
3. 나, 다
4. 가, 나, 다

Q28. 다음은 엑셀의 통합문서(workbook)와 워크시트(worksheet)에 대한 내용이다. 잘못된 것은?

1. 통합문서는 데이터 입력이나 분석 작업을 하여 그 결과를 저장하는 하나의 파일을 의미한다.
2. 통합문서는 워크시트(worksheet), 차트시트(chart sheet), 매크로시트(macro sheet)를 포함한다.
3. 통합문서를 한 권의 책에 비유한다면 하나의 워크시트는 한 페이지를 의미한다.
4. 워크시트는 항상 고정된 이름을 가지며, 한번 정해지면 바꿀 수 없다.

Q29. 선택된 셀의 정보를 보여주고, 데이터를 입력하거나 수정할 수 있으며, 계산을 위해서 수식을 입력할 수 있는 부분을 무엇이라 하는가?

1. 메뉴표시줄
2. 도구모음
3. 워크시트
4. 수식입력줄

Q30. 데이터를 입력한 후 이웃하지 않은 셀들을 선택하고자 한다. 올바른 방법은?

1. ALT 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
2. CTRL 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
3. SHIFT 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.
4. TAB 키를 누른 상태에서 마우스로 원하는 셀들을 선택한다.

Q31. 다음 중 엑셀의 중요한 기능이라고 할 수 없는 것은?

1. 그래프 표현 기능을 가지고 있다.
2. 통계분석 기능을 가지고 있다.
3. 인터넷 검색기능을 가지고 있다.
4. 데이터베이스의 관리도구 기능을 가지고 있다.

Q32. 엑셀에서 B2셀의 값이 60보다 작으면 “불합격”, 60이상이면 “합격”을 D2셀에 표시하고자 한다. 적합한 엑셀함수 사용은? 1.

   =(IF(B2<60) "합격“ ELSE "불합격”)

2.

   =(IF(B2<60) "불합격“ ELSE "합격”)

3.

   =IF(B2<60, "합격“, ”불합격“)

4.

   =IF(B2<60, "불합격“, ”합격“)

Q33. B2와 C2 셀에 데이터를 입력한 후 두 값의 평균점수를 구하고자 한다. 적합한 수식입력은? 1.

   AVERAGE(B2:C2)

2.

   =AVERAGE(B2:C2)

3.

   STDEV(B2:C2)

4.

   =STDEV(B2:C2)

Q34. 데이터를 입력한 후 그림과 같이 각 케이스에 대하여 평균점수를 구하고자 한다. (A) 부분에 적합한 수식입력은?

원문 이미지: 이미지 해석: 엑셀 표에는 학생별 번호, 통계학(B열), 수학(C열), 평균(D열) 열이 보인다. A 부분은 D2 셀의 평균 계산칸이다.

행	번호(A)	통계학(B)	수학(C)	평균(D)
2	1	71	65	A
3	2	63	58
4	3	74	88
5	4	65	87
6	5	86	92
7	6	87	80
8	7	84	79
9	8	77	70
10	9	85	77
11	10	59	45
12	11	61	66
13	12	73	72
14	13	68	64
15	14	81	78

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오.

1.

   AVERAGE(B2:C2)

2.

   =AVERAGE(B2:C2)

3.

   MEDIAN(B2:C2)

4.

   =MEDIAN(B2:C2)

Q35. D2 셀에 =IF(SUM(B2:C2)>=130, "합격“, ”불합격“)를 입력하였을 때 그 결과는?

원문 이미지: 이미지 해석: 엑셀 표의 첫 행 데이터는 B2=71, C2=65이다. 따라서 SUM(B2:C2)=136이고, 136 >= 130 조건은 참이다.

셀	값
B2(통계학)	71
C2(수학)	65
SUM(B2:C2)	136

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오.

1. 140
2. 70
3. 합격
4. 불합격

Q36. D2 셀에 =$B$2+$C$2를 입력한 후 드래그&드롭 기능을 이용하여 D11 셀까지 채워 넣었다. 이 때 D3 셀의 결과는?

원문 이미지: 이미지 해석: 엑셀 표의 첫 행 데이터는 B2=71, C2=65이다. 수식 =$B$2+$C$2는 절대참조라서 아래로 채워 넣어도 계속 B2+C2를 계산한다.

셀	값
B2(통계학)	71
C2(수학)	65
복사 후 D3 결과	136

지문: ※ (3 ~ 5) 학생들 30명에 대한 통계학 점수와 수학 점수 자료를 다음과 같이 입력하였다. 물음에 답하시오.

1. 136
2. 121
3. 오류 발생
4. 알 수 없음

Q37. 다음과 같은 성별 도수분포를 그래프로 나타내고자 한다. 적합한 그래프끼리 묶인 것은?

원문 이미지: 이미지 해석: 성별 도수분포표이다.

| 구분 | 도수 | 백분율 | |—|—:|—:| | 남자 | 27 | 67.5% | | 여자 | 13 | 32.5% | | 합계 | 40 | 100% |

1. 막대그래프, 원그래프
2. 히스토그램, 원그래프
3. 막대그래프, 방사형 차트
4. 원그래프, 분산형 차트

Q38. 통계청 홈페이지를 방문하여 최근 5년간의 매월 소비자 물가지수 데이터를 구하여 적합한 그래프를 엑셀로 그려서 전체적인 경향을 파악하고자 한다. 가장 알맞은 차트의 종류는 무엇인가?

1. 원형
2. 히스토그램
3. 방사형
4. 꺾은선형

Q39. 시간의 흐름에 따라 관측된 시계열 데이터의 추세 변화나 경향을 파악하고자 한다. 다음 중 이와 같은 분석 목적에 가장 적합하지 않은 그래프는?

1. 꺾은선 그래프
2. 원 그래프
3. 세로 막대형 그래프
4. 분산형 그래프

Q40. 사람들이 즐겨보는 TV 프로그램에 대한 비율을 다음과 같이 조사하였다. 이러한 경우 전체에 대한 항목별 비율을 비교하거나, 특정 항목을 강조하기 하기 위해 가장 적합한 그래프는?

지문: 뉴스 : 33.3%, 연속극 : 36.3%, 스포츠 : 9.1%, 오락 : 11.5%, 기타 : 9.9%

1. 히스토그램
2. 산점도
3. 원 그래프
4. 꺾은선 그래프

Q41. 엑셀을 이용하여 간격이 일정한 시계열 데이터의 경향을 파악하고자 한다. 엑셀 차트 중에서 가장 적합한 차트 유형은?

1. 세로 막대형이나 가로 막대형
2. 영역형
3. 분산형
4. 꺾은선형

Q42. 엑셀 함수를 이용하여 구한 시간의 흐름에 따른 전압 값을 다음과 같은 그래프로 표시하였다. 이와 같은 그래프를 얻기 위해서 사용된 엑셀 차트의 유형은 무엇인가?

원문 이미지: 이미지 해석: 그래프 제목은 시간에 따른 축전지의 전압 변화이다. 가로축은 시간(단위: 초), 세로축은 전압이며, 시간 0초 부근 약 10V에서 시작해 시간이 지날수록 0V에 가까워지는 점들이 선으로 연결되어 있다. 연속적인 두 수치 변수의 변화를 표시한 XY 형태의 그래프이다.

1. 히스토그램
2. 세로 막대형
3. 원형
4. 분산형

Q43. 두 연속인 변수 X와 Y 사이의 상관계수를 구했더니 0.9가 나왔다. 올바른 해석은?

1. X값이 커지면 Y값은 직선관계를 가지고 커진다.
2. X값이 커지면 Y값은 직선관계를 가지고 작아진다.
3. X값이 커지면 Y값은 곡선관계를 가지고 커진다.
4. X값이 커져도 Y값은 변화가 없다.

Q44. 두 변수들 사이의 관계를 살펴보기 위해 산점도를 그리고자 한다. 차트마법사의 차트 종류 입력상자에서 선택할 차트 종류는?

1. 세로 막대형이나 가로 막대형
2. 영역형
3. 분산형
4. 꺾은선형

Q45. 도수분포표에 대한 다음 설명 중 옳지 않은 것은?

1. 겹치지 않는 몇 개의 범주 또는 계급에 속한 관측치의 개수를 요약하여 작성한 표이다.
2. 연속형 데이터에 대한 분석에서 도수분포표를 기초로 히스토그램을 그릴 수 있다.
3. 연속형 데이터에 대해 도수분포표를 작성할 때는 계급의 개수와 폭을 결정하는 것이 중요하다.
4. 정성적 데이터에 대한 분석에는 활용할 수 없다.

Q46. 다음의 산점도에 대한 상관계수로 가장 적합할 것으로 생각되는 값은?

원문 이미지: 이미지 해석: 산점도에서 x가 커질수록 y도 거의 직선 형태로 함께 증가한다. 점들이 상승 직선 주변에 촘촘히 모여 있으므로 강한 양의 선형 상관에 해당한다. r은 1에 가까운 양수로 보는 것이 적절하다. 1.

   r = -0.87

2.

   r = 0.25

3.

   r = 0.92

4.

   r = 1.02

Q47. A2 셀에 “대한민국”이라고 입력되어 있다. "=MID(A2, 2, 2)"의 결과로 알맞은 것은?

1. 대
2. 대한
3. 한민
4. 민국

Q48. G2 셀에 어떤 사람의 생년월일이 “1980-12-5”로 같이 입력되어 있다고 한다. 엑셀 함수 “=YEAR(NOW())-YEAR(G2))"의 결과를 바르게 설명한 것은?

1. 현재 시점의 연도가 표시된다.
2. 현재 시점의 나이를 구한다.
3. 위의 함수식에 NOW()는 인수가 없기 때문에 잘못된 함수이다.
4. 이 사람의 생년월일 중에서 연도에 해당하는 1980이 표시된다.

Q49. 학과코드의 첫 번째 자리 알파벳이 A이면 통계·데이터과학과, B이면 컴퓨터학과 학생이다. 학과 셀에 학과를 표기하고자 한다. C2 셀에 알맞은 함수식은?

원문 이미지: 이미지 해석: 학과별 학생 성적표이다. 학과코드(A열)의 첫 글자를 보고 학과(C열)를 채우는 문제이다.

행	학과코드(A)	학생 이름(B)	학과(C)	시험점수(D)	과제물(E)	태도점수(F)	결석일수(G)	최종점수(H)
2	A1	김현정		95	100	95	0
3	A2	장승기		55	80	82	5
4	B1	이성혜		98	80	85	2
5	B2	이다정		95	82	96	0
6	A2	박미진		84	64	78	1
7	B1	황대건		90	80	75	5

지문: ※ 학과별 학생의 성적 데이터를 워크시트에 입력하였다. 다음 물음에 답하여라.

1.

   =IF(RIGHT(A2,1)=“A”, “통계·데이터과학”, “컴퓨터”)

2.

   =IF(RIGHT(A2,1)=“A”, “컴퓨터”, “통계·데이터과학”)

3.

   =IF(LEFT(A2,1)=“A”, “통계·데이터과학”, “컴퓨터”)

4.

   =IF(LEFT(A2,1)=“A”, “컴퓨터”, “통계·데이터과학”)

Q50. 최종 점수는 시험점수와 과제물, 태도점수의 합계에서 결석일수에 5를 곱한 수를 뺀 것으로 계산하고자 한다. H2 셀에 알맞은 함수식은?

원문 이미지: 이미지 해석: 학과별 학생 성적표이다. H열 최종점수는 시험점수(D열) + 과제물(E열) + 태도점수(F열) - 결석일수(G열) × 5로 계산해야 한다.

행	학과코드(A)	학생 이름(B)	시험점수(D)	과제물(E)	태도점수(F)	결석일수(G)	최종점수(H)
2	A1	김현정	95	100	95	0
3	A2	장승기	55	80	82	5
4	B1	이성혜	98	80	85	2
5	B2	이다정	95	82	96	0
6	A2	박미진	84	64	78	1
7	B1	황대건	90	80	75	5

지문: ※ 학과별 학생의 성적 데이터를 워크시트에 입력하였다. 다음 물음에 답하여라.

1.

   =AVERAGE(D2:F2)-5*G2

2.

   =AVERAGE(D2:F2)+5*G2

3.

   =SUM(D2:F2)-5*G2

4.

   =SUM(D2:F2)+5*G2

Q51. 다음과 같이 워크시트에 값이 입력되어 있을 때 ‘=SUMPRODUCT(A1:A3, B1:B3)’을 D1 셀에 입력하면 얻게 되는 계산값은 얼마인가?

원문 이미지: 이미지 해석: 워크시트의 값은 다음과 같다. SUMPRODUCT(A1:A3, B1:B3)은 같은 행의 값을 곱한 뒤 모두 더한다.

| 행 | A열 | B열 | |—|—:|—:| | 1 | 1 | 3 | | 2 | 2 | 2 | | 3 | 3 | 1 |

1. 10
2. 12
3. 14
4. 16

Q52. 함수 f(x) = -x³ + 2x² - 2x + 3의 개형을 (-3, 3) 범위에서 그렸더니 2 근처에서 축을 통과한다는 것을 알았다. 엑셀을 활용하여 (-3, 3) 범위에서 f(x) = 0의 정확한 해를 구하고자 한다면 어떤 기능을 이용해야 하는가?

1. 함수마법사 기능
2. 꺾은선형 그래프
3. 데이터분석 기능
4. 목표값 찾기 기능

Q53. 다음과 같이 셀 C7에 입력되어 있는 수식을 드래그 & 드롭으로 C11까지 채워서 1월부터 6월까지의 미달러($) 기준의 수출액을 원화(￦) 기준으로 바꾸고자 한다. 셀 C6에 입력할 수식으로 맞는 것은?

원문 이미지: 이미지 해석: 환율과 월별 수출액 표이다. B2에는 환율 1,090이 있고, B6:B11에는 미달러 기준 수출액이 있다. C6:C11에는 원화 기준 수출액을 계산한다.

| 셀 | 내용 | 값 | |—|—|—:| | B2 | 환율 | 1,090 | | B6 | 1월 미달러($) | 12,000 | | C6 | 1월 원화(￦) | 13,080,000 | | B7 | 2월 미달러($) | 11,000 | | B8 | 3월 미달러($) | 15,000 | | B9 | 4월 미달러($) | 14,500 | | B10 | 5월 미달러($) | 16,000 | | B11 | 6월 미달러($) | 15,000 | 1.

   =B6*B2

2.

   =B$6*B2

3.

   =B6*B$2

4.

   =B$6*B$2

Q54. 함수 f(x) = -x³ + 2x² - 2x + 3의 개형을 (-3, 3) 범위에서 그리고자 한다. 차트마법사의 차트 종류 입력상자에서 선택할 차트 종류로 알맞은 것은?

1. 세로 막대형이나 가로 막대형
2. 영역형
3. 분산형
4. 꺾은선형

Q55. 복리로 계산될 때 연이율 r, 기간이 n인 경우 현재 금액 p에 대한 일정 기간 후의 원리합계는 p × (1 + r)^n으로 계산할 수 있다. 원금이 1,000만원인 경우에 연 4.5%와 연 5.0%로 향후 20년까지 경과하였을 때 원리합계가 얼마인지 계산하고자 한다. 채워넣기를 이용해서 계산한다고 할 때 B5 셀에 알맞은 함수식은? 1.

   =$B$1*(1+B2)^A5

2.

   =$B$1*(1+B$2)^$A5

3.

   =$B$1*(1+B$2)^A$5

4.

   =$B$1*(1+$B2)^$A$5

Q56. 데이터 객체 ex.data의 변수들을 직접 사용하고자 한다. 유용한 명령은 ? 1.

   load(ex.data)

2.

   detach(ex.data)

3.

   unload(data)

4.

   attach(ex.data)

Q57. 그룹변수인 성별(sex)의 값에 따라 변수 salary의 평균(mean)을 구하는 명령은 ? 1.

   sapply(salary, sex, mean)

2.

   sapply(mean, sex, salary)

3.

   tapply(salary, sex, mean)

4.

   tapply(mean, sex, salary)

Q58. > ( b )(ex.data)

1. head
2. list
3. print
4. output

Q59. ex.data = ( a )("c:/data/example.txt", header=T)

지문: 다음과 같은 텍스트파일을 읽어들이는 R 명령은 ?

1. scan
2. read.table
3. data.frame
4. read.xlsx

Q60. package xlsx를 인스톨하였다. 이를 가동시키기 위한 명령은 ? 1.

   system(xlsx)

2.

   use(xlsx)

3.

   library(xlsx)

4.

   load(xlsx)

Q61. 다음 R 명령 수행결과는 ?

power.value <- function(x,n1,n2,n3=5)
{ n1.val = x^n1
n2.val = x^n2
n3.val = x^n3
value = list(v1=n1.val, v2=n2.val, v3=n3.val)
return(value)
}
> aval = power.value(2, 1/2, 2)
> aval$v3

1. 1.414
2. 8
3. 16
4. 32

Q62. 다음 R 명령 수행결과는 ?

power.value <- function(x,n1,n2,n3=5)
{ n1.val = x^n1
n2.val = x^n2
n3.val = x^n3
value = list(v1=n1.val, v2=n2.val, v3=n3.val)
return(value)
}
> aval = power.value(2, 1/2, 2)
> aval$v1

1. 1.414
2. 8
3. 16
4. 32

Q63. 다음 R 명령 수행결과는 ?

> sq.value <- (function(x) { x*x }
> sq.value(2)

1. 1.414
2. 2
3. 4
4. 8

Q64. 상자그림을 그리는 명령은 ? 1.

   stem(ex.data)

2.

   boxplot(ex.data)

3.

   box(data)

4.

   box.plot(ex.data)

Q65. 파이썬을 설치하기 위한 아나콘다 사이트는 ?

Q66. Python 패키지를 설치하고 관리하는 프로그램이다. Dos 창에서 ( ) 안에 맞는 명령은 ?

C:\anaconda3>( ) install tensorflow

Q67. 다음 파이썬 프로그래밍에서 a[4] 의 결과는 ?

>>> a = [1,2,3,4,5]
>>> a[4]

Q68. 다음과 같이 파이썬 함수문을 작성하였다. hello2("Jeong") 의 결과는 ?

def hello2(object):
    print("Hello " + object + " !")

hello2("Jeong")

Q69. 파이썬에서 딕셔너리로 선언하고자 한다. 적합한 것은 ? 1.

   me = [‘height’ : 180, ‘weight’: 70 ]

2.

   me = {‘height’ : 180, ‘weight’: 70 }

3.

   me = {‘height’ = 180, ‘weight’ = 70 }

4.

   me = [‘height’ = 180, ‘weight’ = 70 ]

Q70. 파이썬에서 nex8.head( ) 의 결과가 다음과 같다. 여기서 변수 id를 제거하고 나머지 변수를 가져오기 위한 명령 ( )은 ?

nex8.head(2)
Out:
id sex age edu salary
0 1 1 21 2 150
1 2 2 22 1 100
nex8 = ( )
nex8.head(2)
Out:
sex age edu salary
0 1 21 2 150
1 2 22 1 100

Q71. 파이썬에서 엑셀 파일을 읽기 위한 명령 ( )는 ?

import pandas as pd
nex8 = ( )("c:/data/dataintro/nex8-1.xlsx, header=0)

Q72. 변수 edu 의 막대그림을 그리고자 한다. ( ) 명령은 ?

원문 이미지: 이미지 해석: edu 변수의 빈도 막대그래프이다. x축은 edu 값 1, 2, 3이고, y축은 빈도(count)이다. 막대 높이는 대략 edu=1 → 2, edu=2 → 4, edu=3 → 4이다.

nex8.head(3)
Out:
id sex age edu salary
0 1 1 21 2 150
1 2 2 22 1 100
2 3 1 33 2 200
edu_freq = pd.crosstab(index=nex8["edu"], columns="count")
import matplotlib.pyplot as plt
( )(edu_freq.index, edu_freq["count"] )

Q73. 다음 출력결과와 같이 데이터객체 nex8의 각 변수의 기술통계량을 구하고자 한다. ( ) 명령은 ?

nex8.head(3)
Out:
id sex age edu salary
0 1 1 21 2 150
1 2 2 22 1 100
2 3 1 33 2 200
( )
Out:
sex age edu salary
count 10.000000 10.000000 10.000000 10.000000
mean 1.400000 34.800000 2.200000 243.000000
std 0.516398 10.347302 0.788811 98.211789
min 1.000000 21.000000 1.000000 100.000000
25% 1.000000 29.000000 2.000000 177.500000
50% 1.000000 33.000000 2.000000 220.000000
75% 2.000000 40.500000 3.000000 297.500000
max 2.000000 55.000000 3.000000 410.000000

Q74. 파이썬에서 csv 텍스트 파일을 읽기 위한 명령 ( )는 ?

import pandas as pd
nex8 = ( )("c:/data/dataintro/nex8-1.csv", header=0)

정답

1. 4
2. 2
3. 3
4. 3
5. 2
6. 3
7. 2
8. 1
9. 3
10. 4
11. 3
12. 1
13. 2
14. 3
15. 3
16. 4
17. 3
18. 4
19. 3
20. 4
21. 3
22. 1
23. 2
24. 3
25. 3
26. 2
27. 1
28. 4
29. 4
30. 2
31. 3
32. 4
33. 2
34. 2
35. 3
36. 1
37. 1
38. 4
39. 2
40. 3
41. 4
42. 4
43. 1
44. 3
45. 4
46. 3
47. 3
48. 2
49. 3
50. 3
51. 1
52. 4
53. 3
54. 3
55. 2
56. 4
57. 3
58. 1
59. 2
60. 3
61. 4
62. 1
63. 3
64. 2
65. www.anaconda.com
66. pip
67. 5
68. Hello Jeong !
69. 2
70. nex8.iloc[:, 1:]
71. pd.read_excel
72. plt.bar
73. nex8.describe()
74. pd.read_csv

HTML5웹프로그래밍

우선순위: HTML 의미론·CSS 선택자/박스모델·JS DOM/BOM·Canvas/API를 속성/메서드 단위로 구분

강의별 핵심 정리

강의록(1~15강) + 연습문제 기준. HTML 의미론 / CSS 선택자·박스모델 / JS DOM·BOM / Canvas·Web API를 속성·메서드 단위로 정리.

1강 웹 프로그래밍 개요 & HTML5 요소: 텍스트

• 웹 = 인터넷 위에서 동작하는 하이퍼텍스트 서비스로 "인터넷 ⊃ 웹". 작동 원리는 서버(응답)-클라이언트(요청) 구조이며 클라이언트(브라우저)는 요청을 보내고 받은 HTML을 파싱·렌더링해 화면에 표시. 흐름: URL 입력 → DNS 조회 → 요청 → 응답 → 렌더. 실무 표준은 HTTPS
• 웹 페이지 3요소 = HTML(구조·내용) / CSS(시각적 표현·디자인) / JavaScript(동작·상호작용) → 관심사의 분리 원칙
• 요소 = 시작 태그 + 내용 + 종료 태그. 전역 속성: id(정체성, 중복 불가) / class(스타일 적용) / title(툴팁) / data-*(숨김 데이터) / role·aria-*(접근성)
• 작성 규칙: 대소문자 구분 안 함(소문자 권장) / 확장자 .html·.htm / 연속 공백은 하나로 처리 / 중첩 순서 준수
• 기본 구조: <!DOCTYPE html>(HTML5 선언), <html lang="ko">, <head>(메타), <body>(화면)
• meta charset="UTF-8"은 다국어 깨짐 방지 필수, meta viewport는 모바일 반응형 필수. meta keywords는 현대 SEO에서 사실상 안 씀 — 대신 og:title 등 Open Graph가 SNS 공유 미리보기에 중요
• hr은 단순 수평선이 아니라 주제 전환을 뜻하는 의미적 구분선 / 단순 시각선은 CSS border-bottom으로 처리
• 제목 h1~h6: h1은 페이지당 1개, 순서 건너뛰지 말고 순차 사용, 글씨 키우는 디자인 용도 금지(크기는 CSS)
• 물리(표현) ↔ 논리(의미) 대응: b↔strong / i↔em / s↔del / u↔ins. (span↔div는 인라인/블록 컨테이너 차이일 뿐 물리/논리 관계가 아님)
• 블록 요소(div 등): 한 줄 전체(너비 100%) 차지 / 위아래 줄바꿈 / 폭·높이 조절 가능. 인라인 요소(span·a·strong·img): 내용만큼만 차지

2강 HTML 요소: 리스트, 그림, 하이퍼링크, 테이블

• ul+li(순서 무의미) / ol+li(순서 자체가 의미) / dl+dt/dd: dt=용어·키, dd=설명·값
• 내비게이션 기본 패턴은 ul > li > a 구조
• 리스트 불릿 제거는 list-style: none;(메뉴 만들 때 기본 패턴), 추가로 padding: 0; margin: 0;로 초기화
• img: src(필수) / alt(접근성 필수, 장식용은 alt="") / border 금지(CSS로) / usemap 비권장 / loading="lazy"(지연 로딩)
• 반응형 이미지: max-width: 100%; height: auto; → 부모보다 커짐 방지 + 비율 찌그러짐 방지. srcset/sizes(브라우저가 자동 선택), picture(포맷·그림 분기)
• a: href(필수) / target / download(동일 출처 파일만). target="_blank"이면 보안 위해 rel="noopener noreferrer" 반드시 함께
• 앵커 이동: 링크는 href="#위치이름", 목적지는 id="위치이름". 블록 링크는 a 안에 블록 요소 가능하나 a 안에 또 다른 a/button은 금지
• 이미지맵은 좌표 고정 → 반응형 문제로 지양. iframe은 외부 페이지 삽입(유튜브·지도·결제창), title 속성 권장
• 테이블: th(제목 셀, 굵게·가운데 정렬 기본) / td(데이터 셀) / caption(표 전체 제목, 상단 중앙, 접근성 핵심)
• thead/tbody/tfoot은 시각 장식이 아니라 행을 의미적으로 그룹핑(머리글·본문·바닥글)해 구조·스타일링·출력에 도움

3강 HTML 요소: 미디어, 시멘틱 요소

• audio/video 속성: src / autoplay / controls / loop / muted / preload. controls 항상 권장, preload="metadata" 권장
• autoplay는 브라우저가 차단하므로 muted와 함께 써야 동작 (<audio autoplay muted>)
• source: 단일 src 대신 여러 포맷 제공 → 브라우저 호환성 확보. 위에서부터 재생 시도(용량 작고 호환 좋은 것 먼저), type 명시 권장
• video 추가 속성: width / height / poster(로딩 중 빈 화면 방지) / playsinline(모바일 강제 전체화면 방지)
• 재생 구간 지정: src="파일명#t=시:분:초,시:분:초" (동작 편차로 제한적 사용)
• track: 자막·캡션 제공. src(.vtt) / kind(subtitles=번역자막 / captions=청각장애인 / descriptions=시각장애인) / srclang / label / default
• 시멘틱 요소의 핵심 목적 = 브라우저/검색엔진/개발자에게 역할·의미를 명확히 전달 (접근성·SEO·유지보수)
• 문서 구조화 요소: header(머리말) / footer(꼬리말) / nav(내비, 보통 ul+li+a) / aside(부가 정보) / section(하나의 주제, 헤딩 하나) / article(독립 배포·공유 가능 콘텐츠) / main(핵심 콘텐츠, 문서당 1번)
• figure+figcaption: 독립 콘텐츠와 캡션이 뗄 수 없는 관계임을 기계에 전달 (이미지·코드블록·도표·인용문 등). figcaption은 figure의 첫·마지막 자식
• details+summary: 아코디언 UI, open 속성으로 기본 펼침
• time: 날짜·시간에 의미 부여. datetime="YYYY-MM-DD"가 기계가 읽는 값
• progress: value 속성을 빼면 파란 막대가 좌우로 움직이는 불확정(indeterminate) 상태 애니메이션 표시

4강 HTML 요소: 웹 폼

• 웹 폼 = 프론트엔드와 백엔드의 접점(UX·접근성·보안 고려)
• form 속성: action / method(get/post) / enctype / autocomplete / novalidate
  • get은 검색·필터·조회(URL 공유 가능), post는 데이터 변경·민감정보(로그인·회원가입·글쓰기·결제)
• input type 종류: 텍스트(text/password/email/tel/url/number/search) / 선택(checkbox/radio/file/range/color) / 날짜(date/month/week/time/datetime-local) / 버튼(submit/reset/button/hidden)
• 주요 속성: type/value/placeholder/id / name/required/checked/maxlength·minlength/min·max / readonly/autofocus/accept
• placeholder는 입력 시작 시 사라지는 힌트 → label 대체 금지. value는 초기값(버튼에서는 표시 글자), alt는 type="image" 버튼의 대체 텍스트
• inputmode는 모바일 가상 키보드 모양 결정 (인증번호 등은 type="text" + inputmode="numeric" 선호)
• label(접근성 핵심): for+입력요소 id 연결(권장) 또는 label 안에 입력요소 포함
• fieldset은 관련 입력을 그룹으로 묶음(회색 테두리), 제목은 legend(첫 자식). 체크박스·라디오에 실무 필수
• 라디오 같은 그룹 조건 = 동일한 name 값 (배타적 선택)
• datalist 연동 = input의 list 속성과 datalist의 id를 같은 값으로
• textarea(긴 입력, rows/cols/wrap), range(슬라이더, min/max/step/value), output(실시간 계산값, name/for), password는 autocomplete="current-password"/"new-password"

5강 CSS: 개요, 선택자, 색상

• 기본 구문: 선택자 { 속성: 값; }. 적용: 외부 파일(.css, 실무 표준) / 내부 <style> / 인라인
• 명시도 점수: !important(무조건 승리, 지양) > 인라인 1000 > id 100 > class·가상클래스·속성선택자 10 > 타입·가상요소 1 > 전체(*) 0
  • 인라인 지양 이유 = 유지보수·재사용 불가·관심사 분리 위배 (명시도가 낮아서가 아님 — 오히려 1000점으로 높아 덮어쓰기 어려움)
  • .text(10) vs p(1) 충돌 시 클래스가 적용됨
• 기본 선택자: 전체(*) / 요소(타입) / 클래스(.) / 아이디(#) / 속성([속성], [속성="값"], [속성*=], [속성^=], [속성$=])
  • required만 가진 input 선택은 input[required](속성 선택자)
• id는 유일성 강조 → 스타일보다 앵커·라벨 연결·JS 제어용
• 가상 클래스(상태): :hover/:focus/:checked/:nth-child / 가상 요소(부분): ::before/::after/::placeholder
• 최신 선택자: :is(), :where()(명시도 0), :has()(특정 자식 가진 부모 선택)
• 결합자: 자손(공백) / 자식(>) / 인접 형제(+) / 일반 형제(~) / 그룹(,)
  • "바로 밑 직계 자식"은 ul > li
• 색상: 색상명(학습용) / 16진수 #RRGGBB(AA)(실무 기본) / rgb()·rgba() / hsl()·hsla()(인간 친화적, 테마용)
• 키워드: currentColor(현재 글자색을 따라감) / transparent(완전 투명한 검은색)
• CSS 변수: :root에 --변수명 선언, var(--변수명) 호출
• opacity는 자식까지 투명 → 배경만 투명하게 할 땐 rgba()/hsla()

6강 CSS: 글꼴, 텍스트, 리스트, 테이블

• 폰트 속성: font-family(폴백 나열) / font-size / font-style / font-variant / font-weight(100~900, 400=normal·700=bold) / font(단축) / @font-face(woff2 권장, font-display: swap 필수)
• rem = 루트(html) 기준 상대 단위(보통 1rem=16px) / em = 부모 요소 기준 → font-size는 접근성 위해 rem 권장, clamp()로 반응형
• 한글 본문 가독성: font-size: 16px(1rem); line-height: 1.5~1.6 조합
• font 단축에는 line-height 포함 가능 → font-size 뒤에 슬래시로 표기 (font: 두께 크기/줄간격 서체)
• 텍스트 속성: line-height(단위 없는 숫자 1.5~1.6) / letter-spacing(한글은 -0.02em) / text-align / text-decoration / text-transform / white-space / word-break(한글 keep-all) / overflow-wrap: break-word(긴 URL)
• 말줄임은 text-overflow: ellipsis → 한 줄 말줄임 공식 = white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 리스트 속성: list-style-type / list-style-position / list-style-image / list-style(단축). 커스텀 마커는 ::marker 또는 ::before
• 메뉴(GNB) 초기화: ul { list-style: none; padding: 0; margin: 0; }
• 테이블 속성: border-collapse(collapse=테두리 합침, 실무 필수) / table-layout / border-spacing / caption-side / empty-cells
• table-layout: fixed = 내용 길이와 무관하게 지정 폭 강제 → 렌더링 속도·안정성↑ (auto는 내용에 따라 자동 조정). colgroup/col로 열 너비 세부 조절
• 줄무늬: :nth-child(even), 반응형: overflow-x: auto(가로 스크롤) 또는 미디어쿼리 카드 전환

7강 CSS: 박스 모델, 테두리

• 박스 4계층: content → padding → border → margin
• box-sizing 계산: 기본값 content-box에서 실제 너비 = width + 좌우 padding + 좌우 border (예: 200+10+10+1+1 = 222px). border-box면 지정 width가 곧 실제 너비(콘텐츠+패딩+테두리 포함). 실무는 box-sizing: border-box 초기화 필수
• margin(투명한 바깥 여백, 요소 간 간격·중앙정렬, 상하 블록 병합 발생) vs padding(안쪽 여백, 배경색 칠해짐, 병합 없음, 클릭 영역 확장)
  • 왼쪽 바깥 여백으로 밀어내기 = margin-left
  • 블록 가로 중앙 정렬 = margin: 0 auto; (인라인·width 없는 요소엔 동작 안 함)
• 크기 보호: max-width(상한) / min-height(하한)
• position: static(기본) / relative(자신 기준) / absolute(조상 기준, 공중에 뜸) / fixed(뷰포트 고정) / sticky(스크롤 고정), z-index(겹침 순서)
• display: block/inline/inline-block/none. 현대 레이아웃: flex(1차원), grid(2차원)
  • grid 3열 = grid-template-columns: 1fr 1fr 1fr; (fr=남은 공간 비율)
• 기타: overflow / visibility / float·clear / resize
• border(두께·스타일·색상 단축), 투명색(transparent)으로 삼각형
• border-radius: 50%(원/타원), 9999px(알약·캡슐 — 너비 가변에도 양끝 반원 유지), 슬래시로 타원 곡선
• outline: 공간 차지 안 함(레이아웃 영향 X) → focus 표시·디버깅
• box-shadow: 가로·세로 오프셋, blur, spread, 색상. inset 키워드 = 안쪽 그림자(눌린 효과) (text-shadow는 inset 미지원)

8강 CSS: 배경, 그라데이션, 변형

• 배경 4대 속성: background-color / background-image / background-repeat / background-position
• background-size: contain(잘림 없이 비율 유지하며 최대로, 여백 생길 수 있음) / cover(빈틈없이 채움, 잘릴 수 있음) / 100% 100%(찌그러짐)
• background-attachment(scroll/fixed/local), background-clip(border-box/padding-box/content-box/text — 칠해지는 범위 제한), background-origin(시작 기준점)
• 다중 배경(레이어 겹침), background 단축
• linear-gradient: 각도·방향(to bottom 등). 0deg=위(12시), 시계방향 증가, 90deg=오른쪽(to right), 기본값 180deg(to bottom). 중단점(%)으로 하드 스톱
• radial-gradient(중심→바깥, circle/ellipse, 비네팅), conic-gradient(중심 기준 시계방향 회전 — 컬러휠·파이차트·도넛차트)
• 반복: repeating-linear/radial/conic-gradient()(사선·물결·격자 패턴)
• 2D 변형 함수: translate(이동) / rotate(회전) / scale(크기) / skew(비틀기) / matrix() — 레이아웃 흐름 안 깸
  • 정중앙 배치: top:50%; left:50%; transform: translate(-50%, -50%) (translate의 %는 자기 자신 크기 기준)
• transform-origin(변형 기준축), perspective(부모에 px, 원근감)·perspective-origin
• backface-visibility: hidden = 180도 뒤집힌 카드 뒷면 숨김(플립 카드)

9강 CSS: 전환, 애니메이션, 다단

• 전환(transition): 상태 A→B를 일정 시간에 걸쳐 부드럽게. 주로 :hover/:focus에 반응
• 구성: transition-property(대상 속성 — all 지양, 구체 명시) / transition-duration(0이면 즉시) / transition-timing-function(가감속 곡선 — ease/linear/ease-in/ease-out/steps) / transition-delay
• 성능: width/height/margin 변화는 피하고 GPU 가속 transform·opacity 사용. transition 코드는 :hover가 아닌 원본 요소에 작성해야 양방향 전환
• 애니메이션: @keyframes(0%~100% 시나리오) + animation-*
  • name / duration / iteration-count(infinite) / direction: alternate(요요·왕복, 짝수회 역방향) / fill-mode(forwards=마지막 상태 유지) / timing-function / delay / play-state: paused(일시정지·running)
• 최적화: will-change, CSS 변수+키프레임 모듈화
• 다단(column): column-width(최소 너비 제시 → 단 개수 자동 조절, 반응형) / column-count(개수 고정) / columns(단축)
• column-gap(단 간격) / column-rule(구분선) / column-span: all(다단 가로지름) / column-fill: balance(기본값, 모든 단 높이 균등 재분배)

10강 자바스크립트 언어

• JS = 동적 기능 담당 범용 스크립트 언어, 자바(Java)와는 완전히 다름(동적 타입)
• 적용: <head>에 외부 .js를 <script defer>로 연결(실무 표준 — 파싱과 병렬 다운로드, 실행은 파싱 후), type="module"
• 변수: const(재할당 불가) 기본, 재할당 필요할 때만 let, var 금지. 원시 타입(값 복사) vs 참조 타입(주소 복사)
• 연산자: 엄격 일치 ===(타입+값, 권장) — 10 == "10"은 true(강제 형변환), 10 === "10"은 false. 선택적 체이닝 ?. / 널 병합 ??
  • 단축 평가: "" || "환영합니다" → falsy(""/0/null/undefined)면 오른쪽 반환 → "환영합니다" (기본값 패턴)
• 배열 순회·메서드: for...of(순서 있는 데이터) / for...in(객체 키, 배열엔 비권장) / forEach(단순 실행)
  • map(1:1 가공 새 배열, 원본 보존) / filter(조건 추출) / reduce(누적 단일값) / includes(존재 확인)
  • push/pop은 배열 뒤를 다루며 원본 변경, unshift/shift는 앞을 다룸. 원본 변형 메서드(splice/sort) 대신 전개 연산자(...)로 복제
• 함수: 호이스팅 부작용 막으려 함수 표현식·화살표 함수(() => {}) 권장. 콜백 함수는 비동기·이벤트 처리 기반
• 객체: 일회성은 리터럴 {}, 재사용 템플릿은 class. 접근은 점 표기(.), 변수 키는 대괄호([]) 필수
• 내장 객체: String(includes/replace/slice/trim/split 체이닝) / Array / Date(getTime·toLocaleString·toISOString) / Math / JSON
• 이벤트: addEventListener로 등록. e.preventDefault() = 기본 동작 취소(폼 제출·링크 이동 막고 JS가 통제)

11강 문서 객체 모델과 브라우저 객체 모델

• DOM = HTML을 객체 트리로 변환한 인터페이스. 브라우저는 DOM(구조)+CSSOM(스타일)을 합쳐 렌더 트리 구성
• 요소 접근: querySelector()(CSS 선택자), querySelectorAll()은 NodeList 반환 → forEach 바로 사용 가능, getElementById
• 내용 조작: innerHTML(스크립트 실행 위험) 대신 textContent(순수 텍스트, 안전) 권장. 속성은 점 표기 또는 setAttribute()
• data-* 속성은 JS에서 element.dataset.속성명(카멜케이스 변환)으로 읽음 (예: data-product-code → dataset.productCode)
• 스타일 조작: style 직접 수정은 지양 → classList의 add()/remove()/toggle()로 클래스 제어(실무 표준). toggle()은 있으면 제거·없으면 추가
  • 인라인 스타일 직접 수정 시 하이픈 CSS 속성은 카멜케이스: style.backgroundColor
• 삽입·삭제: createElement()+append(), remove(). 자식 전체 비우기는 replaceChildren()(인자 없이 호출)이 가장 빠르고 안전
• 성능: 대량 조작은 DocumentFragment(메모리 임시 바구니)에 모은 뒤 한 번만 부착
• BOM = 브라우저 창 제어 API. 최상위 window 아래 document/location/history/navigator
  • location: location.href에 URL 대입 시 이동(뒤로 가기 가능), replace(덮어쓰기, 뒤로 가기 불가), 쿼리는 URLSearchParams
  • history: back()/forward()/go() / navigator: 브라우저·기기 정보, clipboard.writeText()·readText()(공유·복사)
• 타이머: setTimeout()(한 번) / setInterval()(반복 — 카운트다운·스톱워치). 메모리 누수 방지 위해 clearTimeout()/clearInterval() 필수
• 이벤트 위임(event delegation): 부모 하나에만 리스너 등록 → 동적 자식 이벤트까지 처리(이벤트 버블링 활용)

12강 캔버스 (1)

• <canvas> = JS 고속 픽셀 드로잉 컨테이너. 좌표계는 좌측 상단 (0,0), 오른쪽·아래로 갈수록 x·y 증가. getContext('2d')로 컨텍스트 획득
• 해상도 분리: canvas.width/height(내부 픽셀 수)와 style.width/height(표시 크기)가 다르면 흐려짐. DPR 보정 = window.devicePixelRatio만큼 버퍼를 키우고 ctx.scale()로 압축
• 즉시 실행 사각형: fillRect(x,y,w,h)(면) / strokeRect()(테두리) / clearRect()(투명하게 지움 — 애니메이션 프레임 초기화 필수)
• 상태 머신 save()/restore(): 붓 상태(색상·두께·변환)를 스택에 백업·복구. 그려진 픽셀(그림)은 저장 안 됨 — Undo 아님
• 패스 기반: beginPath()(이전 경로 단절·리셋, 새 시작 선언 — 생략 시 이전 경로 누적) → moveTo(x,y) → lineTo(x,y) → closePath()(시작·끝 연결) → fill()/stroke()로 화면 표시
• 칠+테두리 순서: fill() 먼저, stroke() 나중 (선은 경로 중앙에서 양옆으로 퍼지므로 채우기를 먼저 해야 테두리 두께가 안 깎임)
• arc(x, y, 반지름, 시작각, 종료각, 방향): 각도는 라디안. 0라디안 = 3시 방향, 기본 시계 방향(counterclockwise=false). 부채꼴은 moveTo(중심)→arc→closePath, 파이 차트는 각도 누적
• Path2D(경로 저장·재사용)
• 색상: fillStyle/strokeStyle, globalAlpha(0.0~1.0, 전체 일괄 투명도)
• 선 스타일: lineCap(끝 모양 — round=둥근 끝) / lineJoin / lineWidth. setLineDash([10,5])(점선) + lineDashOffset(패턴 시작 위치 이동 → 흐르는 점선 애니메이션)

13강 캔버스 (2)

• 그라디언트: createLinearGradient(x0,y0,x1,y1) / createRadialGradient() / createConicGradient() + addColorStop(offset, 색)
  • createLinearGradient(0,0,200,0)은 y 고정·x만 변화 → 왼쪽→오른쪽 수평 방향. 오프셋 동일하게 주면 하드 스톱(파이차트 등)
• createPattern(이미지, 'repeat') = 외부 이미지·오프스크린 캔버스를 도장처럼 반복(질감·도트)
• 그림자: shadowColor / shadowBlur(흐림·가우시안 블러 반경) / shadowOffsetX / shadowOffsetY. 오프셋 0+밝은색 = 네온
• 합성: globalCompositeOperation(source-in=마스킹, destination-out=스포트라이트 지우개, multiply=색상 필터)
• 텍스트: fillText(text,x,y)(내부 칠) / strokeText()(외곽선). font / textAlign(수평 정렬, center) / textBaseline(수직 기준). measureText()로 너비 측정(중앙 정렬·줄바꿈 직접 구현)
• drawImage()(반드시 onload 후): 인자 3개 drawImage(img,dx,dy)(원본 그대로) / 5개 (img,dx,dy,dw,dh)(크기 조절) / 9개 (img,sx,sy,sw,sh,dx,dy,dw,dh)(잘라서 늘리기)
• 도형 변환 = 좌표계 자체를 이동(누적되므로 save()/restore() 필수)
  • translate(원점 이동) / rotate(원점 기준 라디안 회전 — 제자리 회전은 translate로 중심 옮긴 뒤) / scale(비율, -1 대입 시 좌우·상하 대칭 거울 모드)
  • scale(2,2) 적용 시 선 두께(lineWidth)도 2배로 굵어짐 (그리드 자체가 확대되므로)

14강 HTML API (1)

• <video>·<audio>는 HTMLMediaElement 인터페이스 공유 → 제어 동일. autoplay는 muted 함께 써야 동작
• 속성: currentTime(재생 위치) / duration(전체 길이) / volume / playbackRate(배속) / paused(일시정지 여부 true/false)
• 메서드: play() / pause(). stop() 없음 → 정지는 pause() 후 currentTime = 0
• 이벤트: timeupdate(재생 중 지속 발생 — 진행률 바) / loadedmetadata(길이 등 로딩 완료) / waiting·playing(버퍼링 스피너) / volumechange(음량 UI 동기화)
• 드래그앤드롭 3요소: 출발지(draggable="true") / 목적지(드롭존) / dataTransfer(데이터 운반 임시 바구니)
• 출발지: dragstart → e.dataTransfer.setData('text/plain', id)로 저장
• 목적지(가장 중요): dragover·drop에서 e.preventDefault() 필수 (기본은 드롭 거부·새 탭 열기 → 차단해야 정상 드롭)
• 데이터 추출: drop에서 getData(). e.dataTransfer.files(FileList) = 바탕화면에서 끌어온 파일 (텍스트가 아니므로 getData('file') 아님). dragenter/dragleave로 시각적 하이라이트

15강 HTML API (2)

• 웹 스토리지: 클라이언트에 키-값으로 저장. 쿠키 단점(매번 서버 전송, 4KB) 극복 → 서버 전송 없이 도메인당 약 5MB
• localStorage(브라우저 닫아도 영구, 탭 간 공유 — 다크모드·자동로그인) vs sessionStorage(탭 종료 시 소멸, 탭마다 격리 — 일회성 폼 백업)
• 메서드: setItem(key,value) / getItem(key)(읽기 표준) / removeItem(key) / clear()(전체) / key() / length
• storage 이벤트는 변경한 현재 탭이 아니라 같은 영역을 쓰는 다른 탭/창에서만 발생 (탭 간 통신용)
• 직렬화 필수: 스토리지는 문자열만 저장 → 객체·배열은 JSON.stringify()로 넣고 JSON.parse()로 꺼냄 (setItem('user', JSON.stringify(user)))
• 위치 정보(Geolocation): GPS·Wi-Fi로 위도·경도 파악. 반드시 HTTPS(또는 localhost) + 사용자 동의 필요
• navigator.geolocation.getCurrentPosition(성공, 실패, 옵션)(한 번) / watchPosition()(이동 시마다 실시간 추적 — 종료 시 clearWatch() 필수)
• 성공 콜백 position에서 position.coords.latitude(위도)·position.coords.longitude(경도), 시각은 position.timestamp. 옵션 enableHighAccuracy: true(배터리 소모↑, GPS 강제·정밀)
• Leaflet.js 연동 4단계: ①빈 컨테이너(<div id="map">) 준비 ②L.map().setView([위도,경도], 줌)(이미 있으면 setView만) ③L.tileLayer()(OpenStreetMap 타일) ④L.marker([위도,경도]).addTo() + bindPopup().openPopup()

핵심 암기표

키워드 압축 카드

빈칸 테스트

1.

   HTML은 (     ), CSS는 (     ), JavaScript는 (     )이다.

1. <meta charset="UTF-8">은 ( )을 막는다.
2. div는 ( ), span은 ( ) 컨테이너다.
3. tr은 ( ), th는 ( ), td는 ( )이다.
4. CSS 우선순위는 ( ) > ( ) > ( ) > ( )이다.
5. 박스 모델은 ( ) → ( ) → ( ) → ( ) 순서다.
6. DOM은 ( ) 객체 모델, BOM은 ( ) 객체 모델이다.
7. localStorage는 ( ), sessionStorage는 ( ) 저장이다.

연습문제

Q1. 서버-클라이언트 구조에서 클라이언트의 역할로 가장 적절한 것은?

1. 데이터를 저장하고 서버 소프트웨어를 실행한다.
2. HTTP 규약을 정의하는 역할을 한다.
3. DNS 서버를 직접 운영한다.
4. 요청을 보내고, 받은 HTML 코드를 해석해 화면에 표시한다.

Q2. 다음 중 meta 요소의 설명으로 틀린 것은? 1.

   charset="utf-8"은 다국어 깨짐을 방지하기 위한 필수 설정이다.

1. viewport 설정은 모바일 반응형 웹 환경 대응을 위한 필수 설정이다.
2. keywords 속성은 현대 검색엔진 최적화(SEO)에서 가장 중요한 요소이다.
3. og:title 등의 Open Graph는 SNS 공유 시 미리보기 정보를 정의한다.

Q3. 다음 중 문장의 주제가 전환될 때 의미적 구분선의 역할로 사용되는 요소는?

1. br
2. hr
3. line
4. border

Q4. 제목 요소(h1~h6)의 사용 규칙으로 옳은 것은?

1. 큰 크기의 제목을 원할 때는 h2/h3보다 h1을 사용하는 것이 권장된다.
2. h2 다음에 h4로 건너뛰어도 SEO에 유리하다.
3. h1은 대표 제목으로 페이지당 1개 사용을 원칙으로 한다.
4. 제목 요소의 스타일은 HTML에서만 변경해야 한다.

Q5. 다음 중 물리적 요소와 이를 대체하는 논리적 요소의 짝이 잘못 연결된 것은?

1. b - strong
2. i - em
3. s - del
4. span - div

Q6. 위 지문과 같은 특징을 갖는 요소는?

지문:

• 한 줄을 모두 차지한다.(너비 100%)
• 위아래 줄바꿈이 발생한다.
• 크기(폭, 높이) 조절이 가능하다.

1. div
2. span
3. a
4. strong

Q7. 다음 중 리스트의 불릿(기호)을 없애기 위해 실무에서 가장 많이 사용하는 CSS 속성은? 1.

   list-style-type: disc;

2.

   list-style: none;

3.

   text-decoration: none;

4.

   display: none;

Q8. 정의-설명 리스트에서 "설명/값"에 해당하는 요소는?

1. dt
2. dd
3. ol
4. caption

Q9. 위 지문 중 img 요소의 srcset 속성이나 picture 요소를 언급하지 않았을 때, 반응형 환경에서 이미지를 유연하게 만드는 CSS 설정에서 (가)와 (나)에 알맞은 내용은?

img {
( 가 ): 100%;
height: ( 나 );
}

1. (가) width, (나) 100%
2. (가) max-width, (나) auto
3. (가) min-width, (나) auto
4. (가) width, (나) fixed

Q10. a 요소에서 target="_blank" 속성을 사용할 때 실무 보안 규칙으로 가장 적절한 것은? 1.

   rel="nofollow"를 반드시 함께 사용한다.

1. download 속성을 반드시 함께 사용한다. 3.

   rel="noopener noreferrer"를 반드시 함께 사용한다.
   

   4.

   aria-hidden="true"를 반드시 함께 사용한다.
   

Q11. 동일한 페이지 내의 특정 위치(id="section1")로 이동하는 앵커 링크의 올바른 표현은? 1.

   <a href="section1">이동</a>

2.

   <a href="#section1">이동</a>

3.

   <a link="#section1">이동</a>

4.

   <a target="section1">이동</a>

Q12. 표의 '제목 셀'을 생성하며, 기본적으로 굵게 표시되고 가운데 정렬되는 요소는?

1. th
2. td
3. caption
4. head

Q13. thead, tbody, tfoot 요소의 사용 목적에 대한 올바른 설명은?

1. 시각 효과를 위해 색상을 바꾸는 요소이다.
2. 표의 행을 의미적으로 그룹핑해 구조 이해 및 스타일링과 출력에 도움을 준다,
3. 표를 렌더링하기 위해서 반드시 사용해야 한다.
4. 각 영역으로 구분한 후 영역 제목을 부여하기 위한 요소이다.

Q14. audio 요소에서 자동 재생을 시도할 때의 기본 전제로서 가장 적절한 코드 형태는?(단, src 속성 표현은 생략한다.) 1.

   <audio autoplay></audio>

2.

   <audio autoplay muted></audio>

3.

   <audio autoplay loop></audio>

4.

   <audio autoplay preload="auto"></audio>

Q15. 미디어 표현에서 source 요소를 사용하는 가장 핵심적인 목적은?

1. CSS 적용을 쉽게 하려고
2. autoplay를 강제하기 위해
3. 서로 다른 포맷을 제공해 브라우저 호환성을 확보하기 위해
4. controls 속성의 UI를 숨기기 위해

Q16. 시멘틱 요소를 사용하는 핵심 목적(실무 중심)으로 가장 적절한 것은?

1. 디자인을 자동으로 예쁘게 만들기 위해
2. 파일 용량을 줄이기 위해
3. 자동 재생을 보장하기 위해
4. 브라우저/검색엔진/개발자에게 역할(의미)을 명확히 전달하기 위해

Q17. figure 요소의 핵심 역할로 가장 적절한 것은?

1. 독립 콘텐츠와 캡션이 떼려야 뗄 수 없는 관계임을 알린다.
2. 이미지를 크게 보이게 한다.
3. 이미지가 깨지면 자동 복구한다.
4. alt를 대신한다.

Q18. time 요소에서 기계가 읽는 값을 나타내기 위한 속성은?

1. date
2. datetime
3. value
4. content

Q19. progress 요소에서 value 속성을 사용하지 않았을 때 나타나는 현상은?

1. 아무것도 표시되지 않아 동작을 비활성화하는 효과를 가진다.
2. 진행률이 기본값인 0%로 표시된다.
3. 파란 막대가 좌우로 움직이는 불확정 상태 애니메이션이 재생된다.
4. 무조건 진행률 100%로 표시되어 작업의 완료를 알려준다.

Q20. 다음 중 form 요소의 속성 표현 method="get"을 적용하기에 가장 적합한 상황에 해당하는 것은?

1. 회원가입 처리
2. 로그인 처리
3. 게시글 작성
4. 상품 목록 검색 및 필터링

Q21. input 요소의 텍스트 입력 필드에서 사용자가 입력을 시작하면 사라지는 힌트 텍스트를 제공하는 속성은?

1. title
2. alt
3. placeholder
4. value

Q22. inputmode 속성의 목적은?

1. 서버 전송 형식을 바꾸는 것
2. 모바일에서 적절한 키보드 레이아웃을 유도하는 것
3. 자동 검증을 끄는 것
4. 텍스트 입력에 사용하려는 언어의 종류를 지정하기 것

Q23. fieldset 요소의 역할로 올바른 것은?

1. 입력을 그룹으로 묶는다.
2. 입력을 숨긴다.
3. 전송을 차단한다.
4. 자동완성을 끈다.

Q24. input 요소에서 radio 입력을 같은 그룹으로 만드는 핵심 조건은?

1. id가 같아야 한다.
2. name이 같아야 한다.
3. pattern이 같아야 한다.
4. group이 같아야 한다.

Q25. datalist 요소와의 연동을 위해서 input 요소에서 반드시 지정해야 할 속성은?

1. id
2. data
3. list
4. options

Q26. 인라인 스타일(inline style) 방식의 적용을 실무에서 가급적 지양해야 하는 이유로서 적절하지 못한 것은?

1. 유지보수가 매우 어렵기 때문이다.
2. 스타일의 재사용이 불가능하기 때문이다.
3. 외부 스타일 시트보다 명시도 점수가 낮아 적용이 안 되기 때문이다.
4. 구조(HTML)와 표현(CSS)의 분리 원칙에 어긋나기 때문이다.

Q27. 위 지문의 코드에서 화면에 출력될 "안녕하세요"의 글자 색상은?

지문:

<style>
.text { color: blue; }
p { color: red; }
</style>
<p class="text">안녕하세요</p>

1. red
2. blue
3. black
4. red와 blue의 혼합색

Q28. 다음 중 필수 입력 속성(required)이 있는 input 요소만 골라내어 스타일을 적용하기 위한 올바른 CSS 선택자 표현은? 1.

   input:required { ... }

1. input[required] { … }
2. input.required { … }
3. input #required { … }

Q29. 다음 코드 중 ul 바로 밑에 있는 li들만 선택하기 위한 결합자의 표현으로 올바른 것은? 1.

   ul > li

1. ul li
2. ul + li
3. ul ~ li

Q30. 현재 글자 색상(color)을 그대로 가져와서 테두리 등에 사용하게 해주는 키워드는?

1. inherit
2. auto
3. transparent
4. currentColor

Q31. 다음 중 rem 단위 설명으로 옳은 것은?

1. 루트(html) 기준 상대 단위
2. 부모 요소 기준 상대 단위
3. 색상 단위
4. 화면 너비 기준 상대 단위

Q32. 다음 중 한글의 문단 가독성이라는 관점에서 기본적인 설정 조합으로 가장 적절한 것은? 1.

   font-size: 12px; line-height: 1;

2.

   font-size: 16px; line-height: 1.5;

3.

   font-size: 40px; line-height: 0.8;

4.

   font-size: 8px; line-height: 1;

Q33. 폰트 단축 속성(font)에 포함될 수 있는 속성은? 1.

   letter-spacing

1. border-collapse
2. line-height
3. list-style

Q34. 말줄임 표시를 위한 CSS 속성은?

1. text-align
2. text-transform
3. text-decoration
4. text-overflow

Q35. 내비게이션 메뉴(GNB) 등을 만들 때 리스트 초기화 코드로 가장 적절한 것은? 1.

   ul { list-style: disc; }

2.

   ul { list-style: none; padding: 0; margin: 0; }

3.

   ul { display: inline; border: 1px solid black; }

4.

   ul { vertical-align: middle; }

Q36. 테이블에서 열 너비 계산을 단순화해 레이아웃을 안정화할 때 쓰는 속성은?

1. table-layout: fixed
2. table-layout: nowrap
3. table-layout: hidden
4. table-layout: ellipsis

Q37. 브라우저의 기본 box-sizing 설정("box-sizing: content-box;")에서 주어진 스타일이 적용되는 요소의 실제 렌더링 가로 너비는 얼마인가?

.box {
width: 200px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
}

1. 200px
2. 202px
3. 220px
4. 222px

Q38. 요소의 왼쪽 바깥쪽 여백을 30px 벌려서 다른 요소를 오른쪽으로 밀어내고 싶을 때 사용하는 속성은?

div {
_______ : 30px;
}

1. margin-left
2. padding-left
3. border-left
4. spacing-left

Q39. 특정 블록 요소(.box)를 부모 컨테이너(.container)의 '가로 중앙'에 오도록 정렬할 때 margin 속성을 활용하려고 한다. 이에 알맞은 코드 표현은?

.container {
width: 800px;
}
.box {
width: 400px;
___________
}

1.

   margin: auto 0;

2.

   margin: 0 auto;

3.

   margin-left: 50%;

4.

   padding: 0 auto;

Q40. grid에서 열을 3개로 나누는 가장 명확한 선언은? 1.

   grid-template-columns: 1fr 1fr 1fr;

2.

   grid-columns: 3;

3.

   columns: grid(3);

4.

   grid-template-rows: 1fr 1fr 1fr;

Q41. 알약 형태(pill shape)의 둥근 버튼을 만들기 위해, 버튼의 너비가 유동적으로 변해도 양쪽 끝이 항상 완벽한 반원 형태를 유지하도록 실무에서 주로 사용하는 border-radius 속성 값은? 1.

   border-radius: 50%;

2.

   border-radius: 100%;

3.

   border-radius: 9999px; (또는 매우 큰 px 값)

4.

   border-radius: auto;

Q42. box-shadow 속성에서 그림자를 박스 '바깥쪽'이 아니라 박스 '안쪽'으로 생기게 해서, 버튼이 꾹 눌린 듯한 효과를 낼 때 쓰는 단어(키워드)는?

1. inside
2. inset
3. inner
4. internal

Q43. 배경 이미지가 잘려 나가지 않고 온전히 다 보이도록, 요소의 크기에 맞춰 원본 비율을 유지한 채 최대 크기로 이미지를 맞추는 background-size 속성값은?

1. cover
2. contain
3. 100% 100%
4. auto

Q44. 배경 이미지나 배경색이 테두리(border) 영역에는 칠해지지 않고, '패딩(padding) 영역까지만' 칠해지도록 제한 범위를 설정하는 CSS 속성은?

1. background-origin
2. background-attachment
3. background-clip
4. box-sizing

Q45. linear-gradient(90deg, red, blue)에서 각도 지정 90deg가 의미하는 진행 방향은?

1. 아래쪽에서 위쪽으로 (to top)
2. 왼쪽에서 오른쪽으로 (to right)
3. 오른쪽에서 왼쪽으로 (to left)
4. 위쪽에서 아래쪽으로 (to bottom)

Q46. 피자 조각을 나눈 것처럼 중심점을 기준으로 시계 방향으로 360도 돌아가며 색상이 변하는 CSS 그라디언트 함수로서, '컬러 휠'이나 '파이 차트'를 만들 때 쓰이는 것은?

1. radial-gradient
2. rotate-gradient
3. sweep-gradient
4. conic-gradient

Q47. 위 지문에서 요소를 화면의 정중앙에 완벽하게 배치할 때, 'top: 50%; left: 50%;' 로 밀어낸 후 요소 자기 자신의 크기 절반만큼 다시 위/왼쪽으로 당겨오기 위해 사용하는 (A)에 알맞은 것은?

.modal {
position: absolute;
top: 50%; left: 50%;
transform: ___(A)___;
}

1.

   translate(-50%, -50%)

2.

   translate(50%, 50%)

3.

   translate(-50vw, -50vh)

4.

   margin(-50%, -50%)

Q48. CSS로 카드를 뒤집는 효과(Flip Card)를 만들었을 때, 카드가 180도 회전하여 뒷면을 보이고 있을 때 그 뒷면의 내용(거울처럼 뒤집힌 글자)이 보이지 않게 숨겨주는 속성은?

.card-face {
_________: hidden;
}

1. visibility
2. opacity
3. display
4. backface-visibility

Q49. 위 지문에서 요소의 상태가 변할 때, 특정 CSS 속성에만 부드러운 애니메이션 효과를 주고자 할 때 대상을 지정하기 위해 밑줄 친 부분에 들어갈 속성은?

.box {
_________: background-color;
transition-duration: 1s;
}

1. transition-target
2. transition-type
3. transition-property
4. transition-name

Q50. 전환 속도를 처음엔 느리게, 중간엔 빠르게, 끝날 땐 부드럽게 등 속도의 흐름(가감속)을 조절하는 속성은?

1. transition-timing-function
2. transition-speed-curve
3. transition-pace
4. transition-flow

Q51. 위 지문에서 애니메이션이 정방향(0→100)으로 실행된 후, 다시 툭 끊겨 처음으로 돌아가지 않고 역방향(100→0)으로 부드럽게 되돌아오는 '요요 효과'를 주는 속성값은?

.box {
animation-direction: ________;
}

1. reverse
2. alternate
3. normal
4. backwards

Q52. 위 지문에서 진행 중인 애니메이션을 마우스 오버 시 일시 정지하고 싶을 때 사용하는 속성은?

.box:hover {
_________: paused;
}

1. animation-stop
2. animation-play-state
3. animation-status
4. animation-control

Q53. 다단 레이아웃에서 단의 개수를 고정하지 않고, 각 단의 너비가 최소 300px은 되어야 한다라고 브라우저에 최적의 너비를 제시하는 속성은? 1.

   column-width: 300px;

2.

   min-width: 300px;

3.

   column-min: 300px;

4.

   column-size: 300px;

Q54. 텍스트의 분량에 따라 단의 높이가 결정될 때, 브라우저가 알아서 모든 단의 높이를 최대한 비슷하게(균등하게) 맞추도록 내용을 재분배하는 속성은? 1.

   column-height: auto;

2.

   columns: equal;

3.

   column-distribute: even;

4.

   column-fill: balance;

Q55. 위 지문의 자바스크립트에서 값이 중간에 변할 수 있는 일반적인 변수를 선언할 때 사용하는 가장 모던하고 올바른 키워드는?

________ score = 100;
score = 80;

1.

   const

2.

   let

3.

   var

1. int

Q56. 위 지문에서 논리 연산자의 단축 평가를 활용한 코드이다. 변수 result에 할당되는 값은?

const userMsg = "";
const defaultMsg = "환영합니다";
const result = userMsg || defaultMsg;

1. "" (빈 문자열)
2. undefined
3. true
4. "환영합니다"

Q57. 위 지문에서 자바스크립트의 비교 연산자 '=='와 '==='를 적용하였을 때 (A)와 (B) 문장의 결과값으로 올바른 것은?

console.log(10 == "10"); // (A)
console.log(10 === "10"); // (B)

1. (A) true, (B) false
2. (A) false, (B) false
3. (A) true, (B) true
4. (A) false, (B) true

Q58. 위 지문의 배열에 데이터를 추가하고 삭제하는 내장 메서드들의 동작을 바르게 설명한 것은?

const fruits = ["Apple", "Banana"];
fruits.push("Cherry");
fruits.pop( );

1. push는 배열의 맨 앞에 요소를 추가하고, pop은 맨 앞의 요소를 제거한다.
2. push는 배열의 맨 뒤에 요소를 추가하고, pop은 맨 뒤의 요소를 제거한다.
3. 위 동작을 마치면 원본 배열은 ["Cherry"]가 된다.
4. 배열의 원본은 유지되며 새로운 배열이 반환된다.

Q59. 위 지문의 배열에서 기존 원본을 훼손(수정)하지 않고, 각 요소를 콜백 함수로 가공하여 완전히 새로운 똑같은 길이의 배열을 만들어 반환하는 함수형 메서드는?

const nums = [1, 2, 3];
const doubled = nums.________(n => n * 2); // [2, 4, 6]

1.

   forEach( )

2.

   filter( )

3.

   map( )

4.

   reduce( )

Q60. 사용자가 폼 전송 버튼(<button type="submit">)을 눌렀을 때, 페이지가 새로고침되며 서버로 데이터가 넘어가는 브라우저의 '기본 동작'을 강제로 취소시키는 메서드는?

form.addEventListener('submit', function(e) {
e._________________; // 기본 동작 중지
console.log('페이지 이동 없이 JS 로직 실행');
});

1.

   stopPropagation( )

2.

   cancelEvent( )

3.

   preventDefault( )

4.

   stopBubbling( )

Q61. 위 지문 중 배열 순회 시 최신 브라우저에서 forEach 메서드를 별도의 변환 없이 바로 사용할 수 있는 DOM 컬렉션은?

const items = document.__________________('li');
items.forEach(item => console.log(item));

1. getElementsByTagName
2. getElementById
3. getElementsByClassName
4. querySelectorAll

Q62. 개별 <input> 요소 100개에 각각 이벤트를 걸지 않고, 부모인 <form> 요소 하나에만 이벤트를 걸어 동적으로 추가되는 자식들의 이벤트까지 모두 처리하는 기법을 일컫는 표현은?

1. 이벤트 버블링 차단
2. 이벤트 위임
3. 콜백 분리
4. 클로저

Q63. 위 지문에서 classList를 사용하여 요소에 특정 클래스가 있으면 제거하고, 없으면 추가하기 위해 사용하는 메서드는?

box.classList.____________('active');

1. switch
2. replace
3. toggle
4. contains

Q64. 위 지문에서 DOM 요소의 인라인 스타일을 직접 수정할 때, 하이픈이 포함된 CSS 속성명(background-color)은 자바스크립트에서 어떻게 작성해야 하는가?

box.style.___________________ = "gold";

1. background-color
2. background_color
3. BackgroundColor
4. backgroundColor

Q65. 위 지문에서 쇼핑 장바구니처럼 <div> 안의 모든 상품(자식 요소)을 한 번에 싹 지워버리려 한다. 성능이 가장 뛰어나고 깔끔한 최신 메서드 호출 방식은?

const cart = document.querySelector('#cart');
cart.__________________;

1.

   innerHTML = ""

2.

   removeChildren( )

3.

   replaceChildren( )

4.

   clearAll( )

Q66. 위 지문에서 현재 웹 페이지의 주소(URL) 정보를 읽거나, 다른 페이지로 강제 이동시킬 때 사용하는 BOM의 핵심 객체와 속성은?

// 방송대로 페이지 이동
________________ = 'https://www.knou.ac.kr';

1. window.navigator.href
2. window.history.move
3. location.href
4. document.move

Q67. ctx.save( ) 메서드를 호출했을 때 스택에 저장되는 대상이 아닌 것은?

1. 좌표계의 이동, 회전, 스케일 변환 상태
2. fillStyle, strokeStyle, globalAlpha 등의 색상 속성
3. 캔버스 도화지에 이미 색칠된 픽셀(그림) 데이터
4. lineWidth와 lineCap 등의 선 스타일

Q68. 패스(Path) 기반 방식으로 그림을 그릴 때 새로운 밑그림을 시작하겠다는 의미의 선언으로 이전 경로들과의 연결을 끊는 리셋 버튼 역할을 하는 필수 메서드는? 1.

   ctx.moveTo( )

2.

   ctx.closePath( )

3.

   ctx.beginPath( )

4.

   ctx.resetPath( )

Q69. 다각형의 내부 색상(노란색)과 테두리(파란색, 두께 5)를 모두 그릴 때, 테두리 두께가 색상에 덮이지 않고 온전하게 5px 굵기를 유지하기 위한 올바른 메서드 호출 순서는? 1.

   ctx.stroke( ); 후 ctx.fill( );

2.

   ctx.fill( ); 후 ctx.stroke( );

1. 순서는 전혀 상관없다. 4.

   ctx.closePath( );를 생략하면 된다.
   

Q70. 원이나 부채꼴을 그리는 ctx.arc( ) 함수에서 기본적으로 각도를 재는 방향과 기준점(0라디안)은 어디인가?

1. 12시 방향 기준, 시계 방향
2. 12시 방향 기준, 시계 반대 방향
3. 3시 방향 기준, 시계 방향
4. 3시 방향 기준, 시계 반대 방향

Q71. 위 지문에서 굵은 선을 그렸을 때 선의 끝부분 모서리 형태를 지정하는 속성으로, 둥근 버튼 형태 UI를 그릴 때 주로 사용하는 스타일 값은 무엇인가?

ctx.______________ = "round";

1. lineJoin
2. lineShape
3. lineCap
4. strokeType

Q72. 위 지문 중 포토샵처럼 점선이 스르륵 흐르는 듯한 애니메이션을 구현할 때, 점선의 패턴 설계도를 왼쪽이나 오른쪽으로 미세하게 밀어주는 역할을 하는 속성은?

ctx.setLineDash([10, 5]);
ctx._________________ = offset; // 패턴 시작 위치를 당기거나 밈

1. lineWidth
2. lineDashOffset
3. linePatternStart
4. strokeOffset

Q73. 위 지문은 선형 그라디언트를 생성하는 코드의 일부이다. 그라디언트가 그려지는 방향은 어떻게 되는가?

const grad = ctx.createLinearGradient(0, 0, 200, 0);
grad.addColorStop(0, "black");
grad.addColorStop(1, "white");

1. 왼쪽에서 오른쪽으로 (수평)
2. 위에서 아래로 (수직)
3. 좌상단에서 우하단으로 (대각선)
4. 중앙에서 바깥쪽으로 (방사형)

Q74. 위 지문의 캔버스에서 외부 이미지를 불러와 타일처럼 반복되는 패턴 객체를 생성하는 메서드는?

const pattern = ctx.__________________(img, 'repeat');

1. createPattern
2. makePattern
3. buildPattern
4. drawPattern

Q75. 위 지문에서 그림자의 경계선을 칼같이 자르지 않고, 뿌옇게 퍼지도록 만드는 속성은 무엇인가?

ctx.______________ = 10; // 10픽셀만큼 흐려짐

1. shadowSpread
2. shadowOpacity
3. shadowRadius
4. shadowBlur

Q76. 위 지문에서 지정된 X 좌표를 기준으로 텍스트를 "가운데 정렬(수평 중앙)" 시키기 위해 사용하는 속성은?

ctx.__________________ = "center";
ctx.fillText("가운데 정렬", 150, 100);

1. textBaseline
2. textAlign
3. horizontalAlign
4. justifyContent

Q77. 위 지문의 캔버스에 외부에서 가져온 사진이나 이미지를 그려넣는 가장 기본적이고 널리 쓰이는 메서드는 무엇인가?

ctx.________(img, 0, 0);

1.

   paintImage( )

2.

   insertImage( )

3.

   showImage( )

4.

   drawImage( )

Q78. ctx.scale(2,2)를 적용한 후 도형을 그렸다. 도형의 크기가 2배 커지는 것 외에 또 어떤 속성이 2배로 영향을 받아 시각적으로 달라지는가?

1. 도형 내부의 투명도
2. 선의 두께
3. 그림자 반경
4. 채우기 색상

Q79. 위 지문에서 모던 브라우저 정책상 오디오나 비디오를 웹페이지 접속 시 자동으로 재생(autoplay)되게 하려면, 사용자 경험을 위해 반드시 함께 명시해야 하는 속성은 무엇인가?

지문:

<video src="bgm.mp4" autoplay __________________></video>

1. loop
2. controls
3. muted
4. preload

Q80. 위 지문의 자바스크립트에서 비디오나 오디오 객체를 선택하여 현재 '일시정지' 상태인지 아닌지를 확인하기 위해 사용하는 프로퍼티는 무엇인가?

if (video.__________) {
console.log("현재 영상이 멈춰있습니다.");
}

1. isPaused
2. paused
3. stopped
4. notPlaying

Q81. 위 지문의 HTML5 미디어 API에는 stop( ) 메서드가 존재하지 않는다. 자바스크립트로 영상을 완전히 정지시키고 재생 위치를 맨 처음(0초)으로 되돌리는 로직으로 올바른 것은?

function stopVideo( ) {
video.pause( );
________________;
}

1.

   video.reset( );

2.

   video.time = 0;

3.

   video.currentTime = 0;

4.

   video.reload( );

Q82. 위 지문에서 드래그 앤 드롭 통신의 핵심으로, 드래그가 시작될 때 데이터를 담고 드롭될 때 데이터를 꺼낼 수 있게 해주는 '수레(바구니)' 역할을 하는 이벤트 객체 내부의 프로퍼티 이름은 무엇인가?

card.addEventListener('dragstart', (e) => {
e._____________.setData('text/plain', card.id);
});

1. dataObject
2. dataTransfer
3. dragBasket
4. payload

Q83. 위 지문에서 드래그 앤 드롭 구현 시, 목적지 영역에 요소를 내려놓기 위해 타겟의 dragover와 drop 핸들러에서 기본 동작의 차단 목적으로 반드시 사용해야 하는 메서드는?

column.addEventListener('dragover', (e) => {
_____________________;
});

1.

   e.allowDrop( )

2.

   e.preventDefault( )

3.

   e.stopPropagation( )

4.

   e.accept( )

Q84. 컴퓨터 바탕화면에 있는 이미지 파일을 끌어다가 브라우저 화면 안으로 떨어뜨렸다. 이때 목적지의 drop 이벤트 내에서 넘어온 파일 데이터를 꺼내보려면 어떤 객체를 확인해야 하는가?

1. window.droppedFiles 2.

   e.dataTransfer.getData('file')
   

   3.

   e.target.files
   

   4.

   e.dataTransfer.files
   

Q85. 위 지문에서 자바스크립트 객체를 웹 스토리지에 에러 없이 온전하게 보관하기 위한 실무 표준 코드로 (가)에 적합한 것은?

const user = { name: '홍길동' };
(가) // 객체 저장

1.

   localStorage.setItem('user', user);

2.

   localStorage.setItem('user', JSON.parse(user));

3.

   localStorage.setItem('user', JSON.stringify(user));

4.

   localStorage.setItem('user', user.toString());

Q86. 웹 스토리지에 저장된 캔버스 환경설정 정보를 가져오려고 한다. 이를 위한 메서드의 올바른 사용은? 1.

   const mode = localStorage.getValue('theme');

2.

   const mode = localStorage.getItem('theme');

3.

   const mode = localStorage.get('theme');

4.

   const mode = localStorage.fetchItem('theme');

Q87. window.addEventListener('storage', …) 이벤트가 브라우저에서 발생하는 정확한 시점은 언제인가?

1. 현재 보고 있는 탭에서 데이터가 저장/수정/삭제되었을 때
2. 스토리지 저장 용량 한도를 초과하여 데이터를 저장하려고 할 때
3. 웹 페이지가 로드되어 클라이언트에 스토리지가 생성될 때
4. 같은 스토리지 영역을 사용하는 다른 탭이나 창에서 스토리지가 변경되었을 때

Q88. 배달 라이더 앱에서처럼 사용자가 이동할 때마다 브라우저가 알아서 연속적으로 위치 변화를 감지해서 콜백을 실행해 주는 실시간 위치 추적 메서드는? 1.

   navigator.geolocation.getCurrentPosition( )

2.

   navigator.geolocation.observeLocation( )

3.

   navigator.geolocation.watchPosition( )

4.

   navigator.geolocation.liveTracking( )

Q89. 위 지문에서 위치 정보를 얻어올 때 3번째 인자로 옵션(options) 객체를 전달한다. 이 중 배터리 소모가 심해지더라도 기지국 대신 GPS 센서를 강제로 깨워 최대한 오차 없는 정밀한 위치를 원할 때 사용하는 속성은?

const options = {
_____________________: true
};

1. enableHighAccuracy
2. useGPS
3. highPrecision
4. maximumAccuracy

Q90. 위 지문에서 getCurrentPosition( )이 성공해서 position 객체를 콜백으로 받았고, 여기서 가장 핵심적인 위도와 경도 데이터를 뽑아내려고 한다. 이때 밑줄 친 부분에 들어갈 객체는?

const lat = position._________.latitude;
const lng = position._________.longitude;

1. coords
2. location
3. data
4. gps

정답

1. 4
   • 해설: 클라이언트(브라우저)는 요청을 보내고, 서버가 응답한 HTML을 파싱/렌더링하여 화면에 표시한다.
2. 3
   • 해설: meta 요소의 keywords 속성은 현대 SEO 관점에서 사실상 사용되지 않고, 대신에 OG가 훨씬 중요하게 사용된다.
3. 2
   • 해설: hr 요소는 단순히 수평선을 그리는 것이 아니라, 주제의 전환이라는 의미적 구분선 기능을 수행한다. 따라서 단순히 시각적인 수평선을 그리는 경우라면 CSS border-bottom 속성을 사용한다.
4. 3
   • 해설: 헤딩 요소는 사용 규칙(h1은 페이지당 오직 1개 사용, 순서를 건너뛰지 말고 순차적으로 사용, 디자인 용도(글씨를 크게 하는 용도)로 사용 금지)을 준수하여 사용한다. HTML 요소의 스타일 변경은 CSS로 처리하는 것이 기본적인 원칙이다.
5. 4
   • 해설: b-strong, i-em, s-del, u-ins는 각각 표현 중심(물리적)과 의미 중심(논리적)의 대응 관계이다. 하지만 span과 div는 인라인 컨테이너와 블록 컨테이너의 차이일 뿐 논리/물리적 관계가 아니다.
6. 1
   • 해설: 주어진 특징은 블록 요소에 대한 설명이다. div는 블록 요소이고, 나머지(span, a, strong)는 모두 인라인 요소이다.
7. 2
   • 해설: 'list-style: none;'을 사용하여 불릿을 제거하는 것이 내비게이션 등을 만들 때 사용하는 기본 패턴이다.
8. 2
   • 해설: dl은 "정의-설명" 구조의 리스트를 만들기 위한 것으로, 자식 요소로 '용어/키'를 표시하는 dt 요소와 '설명/값'을 나타내는 dd를 사용한다.
9. 2
   • 해설: 'max-width: 100%;'는 이미지가 부모 영역보다 커지는 것을 방지하고, 'height: auto;'는 이미지의 비율이 찌그러지는 것을 방지하기 위한 것이다. 이 속성들을 사용하면 화면 크기에 따라 이미지의 크기가 자동으로 늘어나고/줄어드는 기능을 만들 수 있다.
10. 3
    • 해설: 새 창 열기(target="_blank")을 사용할 때는 보안 취약점 방지를 위해 rel="noopener noreferrer"를 함께 사용하는 것이 규칙이다.
11. 2
    • 해설: 내부 앵커로 이동할 때는 href 속성에 #을 붙인 이름("#section1")을 값으로 지정하고, 이를 목적지 요소에서 id 속성값으로 사용한다.
12. 1
    • 해설: th(table header) 요소는 열이나 행의 제목을 나타내는 셀이다. 반면 caption은 표 전체의 제목을 기본적으로 표 상단 중앙에 나타내는 것으로, 표 의미를 요약해 주는 접근성 핵심 요소이다.
13. 2
    • 해설: thead/tbody/tfoot 요소는 표에서 행 단위 콘텐츠를 각각 머리글, 본문, 바닥글 영역으로 명시적인 구분/그룹핑을 위한 것으로, 시각적인 "장식"이 아니라 구조 구분용이다.
14. 2
    • 해설: 최신 브라우저는 브라우저 정책상 미디어의 자동 재생(autoplay)을 강제로 차단한다. 즉 사용자의 조작 없는 자동 재생을 제한한다. 따라서 이를 사용하려면 반드시 muted 속성을 함께 명시해야 한다.
15. 3
    • 해설: 브라우저마다 미디어 파일의 지원 상황이 다를 수 있으므로 audio/video 요소의 단일 src 속성 대신 source 요소로 사용하여 대체 소스를 제공하며, 이는 브라우저 호환성을 확보하기 위한 실무적 접근 방법이다.
16. 4
    • 해설: 시멘틱 요소는 브라우저, 검색엔진, 개발자에게 이 부분이 어떤 역할을 하는지 명확한 의미를 전달하기 위한 것이며, 이는 접근성, 검색엔진 최적화(SEO) 및 유지보수와 밀접하게 연결되어 있다.
17. 1
    • 해설: figure는 '독립적인 콘텐츠+캡션'이라는 결합의 의미를 브라우저/검색엔진에 전달한다. 따라서 캡션이 필요 없는 경우에는 현실적으로 figure를 사용하지 않으며, 이미지, 코드 블록, 도표, 인용문 등이 독립적인 콘텐츠에 해당한다.
18. 2
    • 해설: time은 날짜/시간에 의미를 부여하기 위한 요소로서, 검색엔진이 이를 정확히 인식하게 하여 검색 결과에 날짜를 표시할 때 주로 사용한다. 이때 요소의 텍스트는 단순히 사람의 이해를 돕기 위한 것이고, 속성 datetime="YYYY-MM-DD"를 사용하면 검색엔진이나 캘린더 앱이 날짜를 정확히 인식할 수 있다.
19. 3
    • 해설: progress 요소는 진행 중인 작업의 진행률을 표시하기 위한 것으로, 자바스크립트와의 연동을 통해서 value의 지속적인 업데이트가 필수적이다. 만약 요소에서 value 속성을 사용하지 않으면 작업 완료 시간을 예측할 수 없는 '불확정 상태'로 간주하여, 브라우저는 자동으로 파란 막대가 좌우로 왔다 갔다 하는 애니메이션이 재생된다.
20. 4
    • 해설: 검색이나 조회 기능은 URL 공유가 가능해야 하므로 속성값 get이 적합하며, 데이터 변경이나 민감 정보(예: 로그인, 글쓰기, 회원가입, 결제, 대량 데이터 등)는 post 값을 사용한다.
21. 3
    • 해설: placeholder 속성은 입력하기 전에 희미하게 보이는 예시/힌트 텍스트를 제공하지만, 입력 시 사라지므로 label 요소를 대체하는 방법으로 사용하면 안 된다. 참고로 alt 속성은 이미지 버튼(type="image")의 대체 텍스트를 나타낸다. value 속성은 입력창에 미리 채워져 있을 초기값 또는 현재값을 의미하며, 버튼(submit, button 등)에서는 버튼 위에 표시될 글자(‘버튼 이름’)가 된다.
22. 2
    • 해설: inputmode 속성은 모바일 키보드의 모양을 결정하는 속성이다. 즉 모바일 기기(아이폰, 안드로이드)에서 입력창을 눌렀을 때 어떤 모양의 가상 키보드를 띄울지를 브라우저에게 알려준다. 신용카드 번호나 인증 번호처럼 순수 숫자만 필요한 경우, type="number" 대신 type="text"와 inputmode="numeric" 조합을 실무적으로 선호한다.
23. 1
    • 해설: 폼 안에서 관련된 입력 요소들을 하나의 그룹으로 묶고, 그 그룹의 제목을 붙여주는 요소이다. 특히 체크박스나 라디오 버튼을 사용할 때는 접근성을 위해 반드시 사용해야 한다. 그룹의 제목 지정은 legend 요소를 사용하며, 이 요소는 fieldset 요소의 첫 번째 자식 요소로 사용해야 한다.
24. 2
    • 해설: radio 버튼은 같은 그룹에서 오직 하나의 항목만 선택("배타적 선택") 가능하며, 그룹이 여러 개이면 그룹마다 하나씩 그룹 수만큼 선택할 수 있다. 이때 동일한 그룹에 속하는 항목들은 동일한 name 속성값으로 지정해야 한다.
25. 3
    • 해설: 선택 리스트인 datalist 요소를 사용하기 위해서는 input 요소와의 연동이 필수적이며, 이를 위해서는 input 요소의 list 속성과 datalist 요소의 id 속성을 동일한 값으로 지정한다.
26. 3
    • 해설: 인라인 스타일은 명시도 점수가 1,000점으로 매우 높아 오히려 다른 스타일로 덮어쓰기가 어렵다.
27. 2
    • 해설: 클래스 선택자(.text)와 요소/타입 선택자(p)가 충돌된 경우이다. 이때 명시도 점수를 계산하면 클래스 선택자는 10점, 타입 선택자는 1점이므로 점수가 더 높은 클래스 스타일이 적용된다.
28. 2
    • 해설: 속성 선택자는 기본적으로 '[ ]'를 사용해서 표현하며, 특정 속성의 존재 여부만으로 선택할 때는 '[속성명]' 문법을 사용한다. 이 밖의 주요 속성 표현 패턴으로는 '[속성="값"]', '[속성*="값"]', '[속성^="값"]', '[속성$="값"]' 등이 있다.
29. 1
    • 해설: ul 바로 밑에 있는 li들만 선택한다는 것은 직계 자식 요소만 골라낸다는 의미이며, 자식 결합자는 > 기호를 사용한다. ② 자손 결합자, ③ 인접 형제 결합자, ④ 일반 형제 결합자에 해당한다.
30. 4
    • 해설: 키워드 currentColor를 사용하면 글자 색상이 바뀔 때 테두리나 아이콘 색도 자동으로 함께 바뀐다. transparent는 완전 투명한 검정색을 나타낸다.
31. 1
    • 해설: rem은 최상위 요소(루트 요소, html) 크기에 비례하는 단위로서, 보통 1rem=16px이다. 반면 em은 부모 요소 크기에 비례하는 단위이며, 이는 버튼 내부의 패딩/마진 같이 컴포넌트 내부 미세 조정에 제한적으로 사용하는 것이 바람직하다.
32. 2
    • 해설: 본문을 기준으로 글자 크기 1rem 그리고 줄간격 1.5~1.6(한글 기준)이 가독성 원칙에 가장 부합한다.
33. 3
    • 해설: font는 글꼴 관련 font-*의 단축 속성으로, "font: [스타일] [변형] [두께] 크기 / 줄간격 서체;" 형식을 사용한다. 이때 폰트와 직접 관련된 속성 이외에 line-height 값이 함께 지정될 수 있으며, 이때에는 반드시 font-size 값 뒤에 슬래시를 사용해서 값을 표현해야 한다.
34. 4
    • 해설: 기본적으로 말줄임(…) 표시를 위한 속성은 text-overflow이다. 실제 한 줄 말줄임을 위해서는 "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"와 같이 3가지 속성을 하나의 공식처럼 반드시 함께 사용한다.
35. 2
    • 해설: 리스트의 기본 기호와 들여쓰기를 모두 제거해야 메뉴 디자인을 자유롭게 할 수 있다. 기본 불릿/기호를 없애기 위해서는 "ul, ol { list-style-type: none; }"을 사용한다.
36. 1
    • 해설: table-layout 속성은 테이블 각 셀의 너비를 계산하는 방식과 관련된 속성으로, 테이블의 렌더링 속도와 디자인 고정을 위해 매우 중요하게 사용된다. 이때 속성값으로 fixed로 지정(실무 추천)하면 내용물의 길이에 상관없이 지정한 폭을 강제로 유지할 수 있어 테이블의 안정성을 높일 수 있다. 한편 auto로 지정하면 내용물의 길이에 따라 각 칸의 너비가 자동으로 조정된다.
37. 4
    • 해설: 기본값인 content-box에서는 width(200) + 좌우 패딩(20) + 좌우 테두리(2) = 222px이 실제 차지하는 가로 너비가 된다. 한편, 속성값 border-box의 경우에는 지정한 width 값에 콘텐츠, 패딩, 테두리의 크기까지 모두 포함되므로 실제 렌더링 가로 너비는 width의 크기와 같다.
38. 1
    • 해설: 바깥 여백'은 margin이고, '왼쪽'은 left이므로 margin-left을 사용해야 한다. margin은 요소와 다른 요소 사이의 간격을 벌릴 때 사용하며, padding은 콘텐츠와 테두리 사이의 공간으로, 요소의 배경색이나 테두리 안쪽 공간을 넓힐 때 사용한다.
39. 2
    • 해설: 'margin: 0 auto;'는 위아래 마진을 0으로, 좌우 마진을 브라우저가 남은 공간을 반씩 나누어 갖도록(auto) 해서 블록 요소를 가로 중앙에 배치하는 가장 고전적이고 확실한 방법으로 실무에서 많이 사용된다. 이 방법은 인라인 요소나 width가 없는 요소에서는 동작하지 않는다.
40. 1
    • 해설: 'grid-template-columns: 1fr 1fr 1fr;'는 열의 개수와 크기를 정의한다. 크기를 지정하는 fr 단위는 남은 공간의 비율을 의미하며, '1fr 1fr 1fr'은 남은 공간을 1:1:1 비율로 3등분한다.
41. 3
    • 해설: 속성값 50%을 지정하면 완전한 원/타원이 되고, 9999px 처럼 요소의 실제 높이보다 훨씬 큰 px 값을 지정하면 브라우저가 그릴 수 있는 최대치의 반원을 그려 양쪽 끝이 둥근 캡슐/알약 모양이 된다.
42. 2
    • 해설: inset 키워드를 쓰면 안쪽으로 파고드는 내부 그림자가 만들어진다. 참고로, text-shadow 속성은 inset 키워드를 지원하지 않는다.
43. 2
    • 해설: contain은 이미지가 잘리지 않는 한도 내에서 요소를 꽉 채우도록 비율을 유지하며 늘어난다. 하지만, 빈 여백이 생길 수 있다. cover는 빈틈없이 박스를 꽉 채우지만 이미지가 잘릴 수 있으며, 100% 100%는 박스 크기에 억지로 끼워 맞추기 때문에 찌그러짐이 발생할 수 있다.
44. 3
    • 해설: background-clip은 배경색이나 이미지가 그려지는(칠해지는) 범위를 지정한다. padding-box로 설정하면 투명한 테두리나 점선 테두리 밑으로 배경이 비치지 않는다.
45. 2
    • 해설: CSS 선형 그라디언트에서 0deg는 위쪽(12시)이며, 시계 방향으로 증가한다. 따라서 90deg는 오른쪽(3시 방향, to right)을 의미하며, 기본값은 180deg(to bottom)이다.
46. 4
    • 해설: conic-gradient( )는 원뿔(cone)을 위에서 내려다본 것처럼 각도(deg, turn)를 기준으로 색상이 회전하는 그라디언트 함수입니다. linear-gradient( )는 색상이 한 방향으로 변하며, radial-gradient( )는 중심점에서 바깥쪽으로 퍼저 나가는 원형/타원형의 그라디언트이다.
47. 1
    • 해설: translate 내부의 % 값은 부모가 아닌 요소 자기 자신의 너비와 높이를 기준으로 한다. 따라서 각 방향으로 -50%를 주면 자신의 크기 절반만큼 정확히 역이동하여 완벽한 중앙 정렬이 이룰 수 있다.
48. 4
    • 해설: 요소가 3D 회전하여 사용자와 등지게(뒷면이 보이게) 되었을 때, 해당 면을 렌더링하지 않고 투명하게 처리하는 속성 표현은 'backface-visibility: hidden;'이다.
49. 3
    • 해설: 전환 효과를 적용할 CSS 속성(예: width, opacity 등)을 지정할 때는 transition-property를 사용하며, 이와 함께 transition-duration 속성을 0이 아닌 값으로 지정해야 전환 효과를 부여할 수 있다.
50. 1
    • 해설: transition-timing-function은 애니메이션의 속도 변화(가속과 감속)를 제어하는 속성이며, 보기에서 언급한 나머지 것들은 실제로 존재하지 않는다.
51. 2
    • 해설: 속성값 alternate는 반복 실행될 때 홀수 번째는 정방향, 짝수 번째는 역방향으로 진행하여 매끄러운 왕복 효과를 연출한다.
52. 2
    • 해설: animation-play-state은 애니메이션의 재생 상태를 paused(일시 정지) 또는 running(재생)으로 제어하는 속성이다.
53. 1
    • 해설: column-width는 단의 최적 너비(가이드라인)를 지정하는 속성으로, 공간이 허락하는 한 이 너비 이상을 유지하며 단의 개수를 자동으로 늘리거나 줄여서 반응형 다단을 구성할 수 있다.
54. 4
    • 해설: column-fill 속성의 기본값인 balance는 내용이 부족하더라도 모든 단의 높이를 균형 있게 맞추기 위해 내용을 적절히 쪼갠다.
55. 2
    • 해설: ES6 이후부터는 값이 변할 수 있는 변수를 만들 때 버그가 많은 var 대신 안전한 let을 사용하는 것이 표준이다. 한편 변하지 않는 고정된 값(상수)을 선언할 때는 const 키워드를 사용한다.
56. 4

    • 해설: 논리합(

      ) 연산자는 왼쪽 피연산자가 falsy 값("", 0, null, undefined 등)이면 오른쪽 피연산자를 그대로 반환합니다. 빈 문자열은 falsy이므로 defaultMsg가 변수에 할당된다. 이는 매개변수 기본값 설정에 자주 쓰이는 패턴이다.

57. 1
    • 해설: '=='(느슨한 비교)는 브라우저가 값의 타입을 강제로 변환하여 비교하므로 true가 나온다. 하지만 '==='(엄격한 비교)는 타입과 값이 모두 일치해야 하므로 false가 된다. 실무에서는 버그 방지를 위해 항상 ===를 사용한다.
58. 2
    • 해설: push( )와 pop( )은 햄버거 통(스택)처럼 배열의 맨 마지막 꼬리 부분을 다루는 메서드이며, 맨 앞부분을 다루는 것은 unshift( )와 shift( )이다. 이 메서드들은 원본 배열 자체를 변경한다.
59. 3
    • 해설: map( )은 배열의 모든 요소를 순회하며 가공한 결괏값들로 꽉 채워진 '새로운 배열'을 반환하는 메서드이다.
60. 3
    • 해설: e.preventDefault( )를 호출하면 요소가 가진 원래의 기능(<a>의 링크 이동이나 <form>의 제출 등)이 작동하지 않고 취소하여 JS가 통제권을 쥐게 한다.
61. 4
    • 해설: querySelectorAll( )이 반환하는 NodeList는 최신 브라우저에서 forEach 메서드를 자체 지원하여 코드가 훨씬 간결해진다.
62. 2
    • 해설: 부모 요소에 단 하나의 리스너만 등록하여, 새로 추가되는 동적 자식 요소의 이벤트까지 메모리 낭비 없이 한 번에 자동 관리하는 방식을 이벤트 위임(event delegation)이라 한다.
63. 3
    • 해설: classList.toggle('클래스명')은 스위치처럼 클래스의 존재 여부를 파악해 가감(Add/Remove)을 알아서 처리해 주는 핵심 메서드이다.
64. 4
    • 해설: 자바스크립트 객체의 속성으로 CSS 속성을 제어할 때는 마이너스(-) 기호 연산과 헷갈리지 않게 하이픈을 빼고 카멜케이스(낙타체)인 backgroundColor로 작성해야 합니다.
65. 3
    • 해설: element.replaceChildren( ) 메서드에 인자를 넣지 않고 호출하면, 내부의 모든 자식 요소가 가장 빠르고 안전하게 삭제된다.
66. 3
    • 해설: location 객체의 href 속성에 새로운 URL을 대입하면 해당 주소로 페이지가 이동한다.
67. 3
    • 해설: "캔버스(도화지)에 그려진 그림(픽셀)은 저장되지 않는다. 오직 '붓의 상태'와 '도화지의 상태'만 저장된다." save( )와 restore( )는 Undo 기능이 아니다. 스타일링 설정이 꼬이는 부작용 없이 안전하게 그림을 그리기 위해서는, 그리기 전에 ctx.save( )를 호출하고, 그림을 다 그린 직후 ctx.restore( )로 마무리하는 것이 중요하다.
68. 3
    • 해설: 패스 기반 방식을 시작할 때 beginPath( )를 생략하면 이전 경로를 계속 기억하여 의도치 않은 그림이 그려지게 된다. 따라서 다른 그림을 그릴 때마다 beginPath( )로 시작하는 것은 새로운 설계도의 시작을 알린다는 의미를 갖는 매우 중요한 선언이다.
69. 2
    • 해설: 캔버스에서 선은 경로의 중앙을 기준으로 양옆으로 퍼집니다. 테두리를 먼저 그리고(stroke) 면을 채우면(fill), 채우는 색상이 테두리의 안쪽 절반을 덮어버려 선이 얇아 보인다. 따라서 채우기를 먼저 한 뒤 테두리를 그리는 것이 정석이다.
70. 3
    • 해설: 캔버스에서 0라디안은 시계의 3시 방향이며, counterclockwise 속성이 기본값 false일 때 각도는 시계 방향(아래쪽)으로 증가한다.
71. 3
    • 해설: 선의 시작점과 끝점 양끝 모양을 결정하는 속성은 lineCap이며, "round"로 설정하면 선의 굵기 반만큼 둥근 반원이 끝에 추가된다.
72. 2
    • 해설: lineDashOffset 속성은 지정된 점선 패턴이 어디서부터 시작할지 오프셋 거리를 지정한다. 애니메이션 함수에서 이 값을 계속 증가/감소시키면 선이 움직이는 듯한 시각적 환상을 줄 수 있다.
73. 1
    • 해설: createLinearGradient(x0, y0, x1, y1)에서 y좌표는 0으로 고정이고 x좌표만 0에서 200으로 변하므로, 왼쪽에서 오른쪽으로 변하는 수평 그라디언트가 된다.
74. 1
    • 해설: 이미지를 반복 패턴으로 만들어주는 메서드는 createPattern(이미지변수, 반복방식)이다.
75. 4
    • 해설: 그림자의 흐림 정도(가우시안 블러 반경)를 설정하는 속성은 shadowBlur이다.
76. 2
    • 해설: 텍스트의 수평 정렬(좌, 우, 중앙 등)을 담당하는 속성은 textAlign이다.
77. 4
    • 해설: 이미지를 캔버스에 렌더링하는 내장 메서드의 이름은 drawImage이다.
78. 2
    • 해설: scale( )은 캔버스 그리드 픽셀 자체를 확대하므로, 명시된 선 두께(lineWidth=1)도 똑같이 스케일(두 배 확대)이 적용되어 2픽셀 두께로 굵게 렌더링된다.
79. 3
    • 해설: 사용자 동의 없는 소리 자동 재생은 브라우저가 차단하므로, autoplay는 반드시 소리를 끄는 muted 속성과 함께 사용해야 동작한다.
80. 2
    • 해설: 미디어의 일시정지 상태 여부를 true 또는 false로 반환하는 속성은 paused이다.
81. 3
    • 해설: 미디어를 멈추고(pause) 현재 재생 시점을 의미하는 currentTime 속성에 0을 대입하여 재생 헤드를 맨 앞으로 옮기는 것이 정지(stop)의 구현 방식이다.
82. 2
    • 해설: 출발지와 목적지 사이에서 데이터를 운반하는 핵심 객체는 이벤트 객체 내의 dataTransfer이다.
83. 2
    • 해설: 브라우저는 기본적으로 다른 요소 위에 데이터를 떨어뜨리는 것을 거부한다. 따라서 dragover 이벤트에서 e.preventDefault( )를 호출해 기본 거부 동작을 취소해야만 drop 이벤트가 정상적으로 발생한다.
84. 4
    • 해설: 운영체제에서 브라우저로 드롭된 파일들은 텍스트 데이터가 아니므로, dataTransfer 객체의 files 프로퍼티(배열 형태의 FileList)에 고스란히 담겨 들어온다.
85. 3
    • 해설: 웹 스토리지는 "오직 문자열로만 저장할 수 있다"라는 데이터 타입의 한계가 존재한다. 따라서 객체나 배열을 문자열로 안전하게 변환하여 스토리지에 넣으려면 무조건 JSON.stringify( )를 사용해야 한다. 반대로 스토리지에서 꺼내와서 자바스크립트 객체로 변환하기 위해서는 JSON.parse( )를 사용한다.
86. 2
    • 해설: 웹 스토리지에서 데이터를 읽어오는 표준 메서드는 getItem(key)이다. 물론 내장 메서드가 아닌 객체 속성(점 표기)이나 대괄호( [ ] )를 사용하는 방법도 존재하지만, 스토리지 자체 메서드/속성과 이름이 겹칠 위험이 있으므로 실무에서는 사용하지 않는다.
87. 4
    • 해설: storage 이벤트는 데이터를 변경한 '현재 탭'에서는 절대 발생하지 않고, 오직 같은 도메인을 공유하는 '다른 탭/창'에서만 발생한다. 이는 탭 간의 통신을 위해 만들어졌기 때문이다.
88. 3
    • 해설: 사용자의 위치가 변경될 때마다 계속해서 위치를 가져오는 실시간 추적 메서드는 watchPosition( )이며, 목적지에 도착했거나 백그라운드 전환 시에는 반드시 clearWatch( )를 수행하여 추적을 종료한다.
89. 1
    • 해설: 더 많은 배터리가 소모되고 속도가 좀 느리더라도 매우 정확한 위치 측정이 필요한 경우에는 ‘enableHighAccuracy : true’ 옵션을 사용한다.
90. 1
    • 해설: 성공 콜백으로 반환된 position 객체 내부의 coords (coordinates) 객체를 통해서 위도, 경도, 정확도 등의 실제 정보를 얻을 수 있다. 단 위치가 파악된 시간 정보(1970.1.1.부터 경과된 밀리초 단위 시간)는 position.timestamp를 통해 얻는다.

Java프로그래밍

우선순위: 객체지향/상속/인터페이스/제네릭/컬렉션/스트림/JDBC를 구분해서 암기

강의별 핵심 정리

강의록(lecture-notes.md 1~15강) + 연습문제 + 시험직전 암기 기준. 객체지향/상속/인터페이스/제네릭/컬렉션/스트림/JDBC를 구분해서 암기.

1강 Java와 객체지향 프로그래밍

• Java 프로그램의 기본 구성단위는 클래스이며, 변수 자료형 검사가 엄격하다.
• Java 소스(A.java)는 컴파일되어 바이트코드(.class)가 되고, 이 바이트코드가 Java 플랫폼(JVM)에서 실행된다.
• 플랫폼 독립적: 똑같은 바이트코드가 Java 플랫폼이 설치된 다양한 하드웨어/운영체제에서 수정 없이 실행된다.
• 컴파일 시 소스 안의 클래스마다 .class 파일이 생성된다. 예) public class A {} class B {}를 컴파일하면 A.class와 B.class가 모두 생성된다.
• Java 프로그래밍을 위해서는 JDK를 설치해야 한다.
• Java 플랫폼 = Java VM + Java API로 구성된다.
• main() 메서드 형식은 public static void main(String[] args)이다.
• 클래스는 동종 객체를 추상화시켜 표현한 틀이며 데이터(필드)와 메서드로 구성된다. 객체는 특정 클래스의 인스턴스이다.
• 화면 출력 기본형: System.out.println("Hello, World!");

2강 Java 기본 문법(1)

• 기본형 키워드 8가지: byte / short / int / long / float / double / char / boolean. (boolean은 클래스 이름이 아님 — Integer·String·System은 클래스)
• 정수 리터럴 진법 표기: 10진수(10), 8진수(앞에 0 — 예 00001010=8진수), 16진수(0x0A), 2진수(0b0000_1010). 0x0A와 0b0000_1010는 10진수 10과 같지만 00001010(8진수)은 값이 다르다. 숫자 사이 _ 구분자 허용.
• 정수 리터럴은 기본적으로 int형으로 인식된다.
• 변수 종류: 인스턴스 변수(객체가 소유) / 클래스 변수(static, 같은 클래스 객체들이 공유) / 지역 변수 / 파라미터.
• 클래스와 배열은 대표적 참조형이며, 참조형 변수에는 참조값(주소값)이 저장된다.
• 묵시적 형변환: 자료 손실이 없고 컴파일러가 자동 수행. 명시적 형변환: 손실 가능, 직접 캐스팅.
• 명령행 매개변수: main()에 전달되는 인자로, 실행 시 클래스 이름 뒤에 나열한다.
• 점프문(분기문): break / continue / return.
• 향상된 for문: for (int value : a) { ... } 형태로 배열/컬렉션 순회.

3강 Java 기본 문법(2), 클래스와 상속(1)

• 배열은 원소의 초기화 과정이나 생성 과정을 거쳐야 사용할 수 있다.
• 올바른 배열 선언 예: int[][] c = new int[5][];. (int a[10] = new int[];, int b[] = new int(10);, int[5] d = {...};는 모두 문법 오류 — 선언부 []에 크기를 넣지 않음)
• 배열 크기는 배열이름.length로 표현한다. (필드이므로 괄호 없음 — String length()와 구별)
• 문자열 변수/리터럴에 + 연산을 적용하면 두 문자열이 연결된 문자열이 된다.
• 두 정수 변수 i, j를 분리해 출력하려면 System.out.println(i + " " + j); (단순히 i + j는 합이 출력됨).
• Scanner 클래스로 키보드/파일로부터 문자열·기본형 값을 편리하게 입력받는다.
• 접근 제어자 4종: public / protected / (생략=default) / private.
• protected 필드는 같은 클래스 / 같은 패키지 / 다른 패키지의 자식 클래스에서 접근 가능. 다른 패키지의 무관한 클래스에서는 접근 불가.
• 클래스 정의 시(내부 클래스가 아니면) 접근 제어자로 생략과 public만 지정 가능.
• 접근 제어자가 생략된 클래스/필드는 같은 패키지 내에서만 사용 가능.
• 생성자는 이름을 클래스 이름과 같게 하고 반환형을 지정하지 않는다. 예) Circle(...) { this.radius = radius; }

4강 클래스와 상속(2)

• 모든 객체가 공유하는 데이터는 static 데이터 필드로 정의한다. static 메서드는 객체 없이 클래스 이름으로 호출 가능.
• 데이터 필드 초깃값은 선언문 / 초기화 블록 / 생성자를 통해 지정한다.
• final 정리:
  • final 클래스는 자식 클래스를 정의할 수 없다.
  • final 메서드는 자식 클래스에서 재정의(오버라이딩) 불가.
  • final 변수는 한 번만 값을 정하는 상수로 사용된다.
  • final 클래스라도 객체 생성은 가능하다(상속만 금지). → "final 클래스의 객체를 생성할 수 없다"는 틀린 설명.
• 상수 선언은 static final: 예) static final double PI = 3.14; (Java에 const 키워드는 없음).
• 오버로딩: 한 클래스에서 이름이 같고 매개변수 목록이 달라 구별되는 여러 메서드.
• 오버라이딩: 부모로부터 상속받은 메서드의 몸체를 자식이 다시 정의. 접근 범위를 더 좁게 만들 수 없다.
• 숨은 인자 this는 현재 객체를 가리킨다. this()는 같은 클래스의 다른 생성자를, super()는 부모 클래스 생성자를 호출한다.

5강 인터페이스와 다형성

• 몸체가 없는 메서드 = 추상 메서드. 추상 클래스 또는 인터페이스에 포함될 수 있다.
• 인터페이스는 추상 메서드로만 구성된다. 단 default 인스턴스 메서드와 static 메서드는 몸체가 있어야 한다.
• 묶는 기준: 의미적으로 유사 → 추상 클래스, 기능적으로 유사 → 인터페이스.
• 상속 키워드: 클래스 상속은 extends, 인터페이스 구현은 implements. (클래스가 인터페이스를 구현 → implements, 인터페이스가 인터페이스를 상속 → extends)
• 다형성은 메서드 오버라이딩/오버로딩, 클래스 간 상속과 형변환, 인터페이스 구현과 형변환, 메서드 동적 바인딩으로 구현된다.
• 열거 자료형(enum): 여러 상수값을 미리 정의하는 자료형, 각 상수값은 하나의 객체와 같다.
• 익명 클래스: 이름 없는 클래스로, 일회성으로 상속/구현을 통해 자식 객체를 생성하는 용도로만 사용. 예) new CSuper() { ... } → CSuper를 상속받는 익명 클래스를 정의하면서 동시에 그 객체를 생성.

6강 제네릭과 람다식

• 제네릭 타입: 자료형을 매개변수로 가지는 클래스/인터페이스. 컴파일 시점에 명확한 자료형 검사를 수행해 실행 오류를 줄인다.
• 타입 파라미터(<T>)는 필드의 자료형, 메서드 반환형, 메서드 인자의 자료형으로 사용될 수 있다.
• 제네릭의 타입 인자에는 참조형(클래스)만 올 수 있다. Data<int>는 문법 오류 → 포장 클래스 Data<Integer>로 써야 한다. (Data<String>, raw type Data 등은 허용)
• 제네릭 메서드: 자료형을 매개변수로 가지는 메서드.
• 람다식: 매개변수를 갖는 코드 블록으로, 익명 클래스 객체 생성 부분을 수식화한 것. 함수형 인터페이스 구현 객체 생성에 효율적.
  • 올바른 형태: (int a, int b) -> { return (a + b); } / (int a, int b) -> a + b / (a, b) -> (a + b).
  • 잘못된 형태: (a, b) -> return (a + b) — 화살표 뒤가 식이면 return·; 없이 식만, 문장 블록이면 { }로 감싸야 한다.
• 람다식의 결과 타입에 해당하는 인터페이스를 타깃 타입이라 한다.
• 표준 함수형 인터페이스 Supplier<T>의 추상 메서드는 T get().

7강 패키지와 예외처리

• 패키지: 관련 있는 클래스/인터페이스의 묶음으로 계층 구조를 이룬다.
• 소스 파일 맨 위에 패키지 지정: package myprogram.game; (클래스명은 붙이지 않음).
• 다른 패키지의 클래스를 단순 이름으로 쓰려면 import 사용: import java.util.Scanner; 또는 import java.util.*;
• 필요한 클래스/패키지는 환경 변수 CLASSPATH 경로상에서 찾을 수 있어야 한다.
• 예외: 실행 중 발생하는, 심각하지 않지만 정상 흐름을 벗어난 비정상 상황.
• checked Exception은 발생 가능 시 반드시 예외 처리 구문을 작성해야 한다.
• 예외 직접 처리는 try-catch, 예외 전파는 메서드 선언에 throws 예외유형(예 throws IOException). (던지는 것은 throw, 선언은 throws)
• finally는 예외 발생 여부와 상관없이 실행된다.

8강 java.lang 패키지

• java.lang 패키지 클래스는 import 없이 사용 가능.
• String은 immutable 클래스 — 객체 생성 이후 내용 변경 불가. 문자열 반복 조작 시 매번 기존 문자열이 버려지고 새 문자열이 만들어져 비효율적.
• 자주 변경되는 문자열은 StringBuffer 또는 StringBuilder를 사용하는 것이 효율적. (StringBuffer는 동시성 제어를 고려해 구현되어 StringBuilder보다 느림)
• toString(), equals()는 Object 클래스에 정의되어 있고 일부 하위 클래스(예 String)에서 재정의됨. 모든 클래스는 묵시적으로 Object를 상속.
• 기본형 값을 객체로 다루기 위해 기본형마다 상응하는 포장(Wrapper) 클래스가 존재한다.
• System 클래스는 표준 입력/출력/오류 출력용으로 in, out, err 객체를 제공한다. (표준 입출력 스트림 static 필드는 String이 아니라 System이 제공)

9강 java.io 패키지와 스트림

• 스트림을 통해 데이터 생산자/소비자의 종류와 무관하게 동일한 방법으로 입출력을 수행한다.
• File 클래스는 파일/디렉터리 조작 메서드를 제공하지만 입출력 메서드는 제공하지 않는다.
• RandomAccessFile: 읽기/쓰기 지원, 파일 포인터가 가리키는 임의 위치에 읽기/쓰기 가능.
• 스트림 구분: 입력/출력, 바이트 단위/캐릭터 단위, 기본 스트림 / 보조 스트림.
  • 기본 스트림 예: FileReader, StringReader, ByteArrayInputStream.
  • 보조 스트림 예: BufferedReader/BufferedWriter, BufferedInputStream/BufferedOutputStream — 버퍼링으로 성능 향상.
• 사용 순서: 기본 스트림 객체를 먼저 생성하고, 그 객체를 인자로 보조 스트림 객체를 생성한다.
• BufferedReader는 Reader의 자식 클래스로 read()·readLine() 등 문자 단위 입력 메서드와 버퍼링을 제공한다. (바이트 단위 입력은 아님)
• InputStreamReader: 바이트 단위 입력 스트림(System.in)을 캐릭터 단위 입력 스트림으로 변환 → 한글 입력 시 사용.

10강 java.nio 패키지의 활용

• java.nio와 서브 패키지는 java.io를 개선한 새로운 입출력 패키지이다.
• Path 인터페이스(java.nio.file)는 File 클래스를 대체하며 더 풍부한 기능 제공 — 경로 생성/조작/비교/요소 조회. (단, 파일 내용의 읽기·쓰기 기능은 제공하지 않음)
• Files 클래스: 실제 파일/디렉터리 조작과 읽기·쓰기를 수행하는 static 메서드 제공.
• 채널 입출력에서 버퍼는 기본형 데이터의 보관소이며 버퍼 단위로 입출력한다.
• FileChannel: 입력·출력을 모두 제공, 기본적으로 버퍼링 사용, 멀티 스레드 환경에서 안전. FileChannel.open(path)은 기본적으로 읽기용으로 연다. (FileChannelReader/FileChannelWriter라는 클래스는 없음)
• WatchService: 디렉터리에 발생하는 이벤트를 감시하는 서비스. take()가 리턴하는 WatchKey는 등록된 디렉터리에 어떤 관심 이벤트가 등록되어 있고 실제 어떤 이벤트가 일어났는지의 상태 정보를 가진다.

11강 컬렉션

• 컬렉션: 여러 원소를 저장·관리하는 객체의 통칭. JCF(Java Collections Framework)는 이를 효율적으로 다루는 API 프레임워크.
• 인터페이스별 성질:

• ArrayList: List 구현, 내부적으로 배열 사용, 순서 의미 있음, 자료 중복 허용. (중복 불가는 틀린 설명)
• Map 계열은 <key, value> 쌍 — HashMap, Hashtable, Map. (HashSet은 Set 계열로 Map이 아님)
• LinkedList: List와 Queue를 모두 구현, 스택용 메서드도 제공.
• Queue 자료 추가는 boolean offer(E), 삭제는 E poll().

12강 컬렉션과 스트림

• 스트림: 컬렉션/배열로부터 만들어지는 원소의 시퀀스를 표현하는 인터페이스.
• 내부 반복: 컬렉션/배열 내부에서 각 원소를 반복 처리, 처리용 코드만 람다식으로 전달(반복용 코드 작성 안 함). forEach()는 람다식과 함께 원소를 외부로 꺼내지 않고 내부에서 탐색.
• 배열을 스트림으로 만들기: Arrays.stream(numbers) (배열에는 numbers.stream()을 쓸 수 없음).
• 중간 연산(새 스트림 리턴, 체인 가능):
  • filter: 조건을 만족하는 원소만 걸러 냄(중복 제거 포함).
  • map: 원소를 다른 원소로 변환(예 대문자 변환).
• 최종(종료) 연산: 스트림 원소로 최종 결과를 만들어 리턴.
  • 매칭(match): 특정 조건 만족 여부 확인.
  • 수집(collect): 결과 원소들을 취합해 새 List/Set/Map 생성.
• 중간연산은 변환·필터링 후 새 스트림을 리턴해 여러 번 체인 가능, 종료연산은 최종 결과를 만들어 리턴(스트림 소비).

13강 멀티스레드 프로그래밍

• 멀티 스레드 프로그래밍: 하나의 프로세스에서 여러 스레드가 생성되어 동시 실행되게 하는 것.
• 스레드 실행 코드는 Thread를 상속받은 클래스나 Runnable 인터페이스를 구현한 클래스의 public void run() 메서드에 정의한다.
• 스레드 상태: Startable / Runnable / Running / Not Running 등을 거친다.
• 상태 제어 메서드:
  • Thread 클래스: start(), join()(this 스레드가 종료될 때까지 현재 스레드가 기다림), interrupt(), static yield()·sleep().
  • Object 클래스: wait(), notify().
• 동기화(synchronization): 데이터 무결성 유지를 위해 한 번에 한 스레드만 공유 객체에 접근하도록 하는 것.
• synchronized 메서드는 동기화를 보장 — 한 스레드가 공유 객체의 메서드 실행 중이면 다른 스레드는 동일 객체에 접근할 수 없다.

14강 JDBC 프로그래밍

• MariaDB는 MySQL과 호환되는 오픈 소스 관계형 DBMS.
• JDBC는 Java 프로그램이 관계형 데이터베이스와 연동하게 하는 표준 API. DBMS별 JDBC 드라이버(.jar)가 필요하며 Classpath에 추가해야 한다.
• 주요 인터페이스/클래스: DriverManager, Connection(연결 설정 — java.sql.Connection), Statement, PreparedStatement, ResultSet. (Runnable은 JDBC와 무관)
• SQL 실행: Statement의 execute() / executeQuery() / executeUpdate().
• select 구문은 executeQuery()로 실행하며, 결과가 테이블 형태의 ResultSet 객체로 리턴된다(행 단위로 읽음).
• PreparedStatement: 같은 SQL을 여러 번 실행할 때 효율적, 매개변수가 있는 SQL을 저장하고 실행 전에 값을 지정. (Statement의 부모가 아니라 자식 인터페이스 — "부모"라는 설명은 틀림)
• JDBC 순서: 드라이버/연결 → Statement → SQL 실행 → ResultSet 처리 → close.

15강 라이브러리와 모듈

• 라이브러리: 자주 사용되는 클래스/인터페이스를 컴파일된 형태로 묶은 것 → .class 파일을 묶은 .jar 파일.
• 모듈: 라이브러리의 업그레이드 버전(Java 9 도입)으로 패키지 단위로 접근성을 설정할 수 있다.
• 사용 시 추가 위치: 라이브러리(.jar)는 Classpath, 모듈은 Modulepath.
• 모듈 정의 파일 module-info.java: exports 패키지;(공개) 또는 requires 모듈;(의존)로 모듈 간 의존관계 설정. 예) java.sql 패키지를 쓰면 requires java.sql;
• JDK 표준 라이브러리는 모두 모듈화되었으며, java.base는 가장 기본 모듈로 requires 선언 없이도 사용 가능. (jdk.base·jdk.lang·java.lang은 표준 기본 모듈 이름이 아님)

핵심 암기표

키워드 압축 카드

빈칸 테스트

1. Java 플랫폼은 ( ) + ( )로 구성된다.
2. Java 소스는 컴파일 후 ( )가 되고, ( )에서 실행된다.
3. Java 프로그램의 기본 구성 단위는 ( )다.
4. 변수 4종은 ( ), ( ), ( ), ( )이다.
5. 기본형 8개는 ( )이다.
6. 참조형 변수에는 객체 자체가 아니라 ( )이 저장된다.
7. main의 명령행 인자는 ( )로 전달된다.
8. 최상위 클래스 접근 제어자는 ( ) 또는 ( )만 가능하다.
9. 접근 제어자 생략은 같은 ( )에서 접근 가능하다.
10. 생성자는 클래스 이름과 ( )고 ( )이 없다.
11. 배열 크기는 ( )로 확인한다.
12. static 필드는 모든 객체가 ( )하는 데이터다.
13. 오버로딩은 ( ) 목록으로 구별한다.
14. 오버라이딩은 부모 메서드를 자식에서 ( )하는 것이다.
15. this()는 ( ) 생성자, super()는 ( ) 생성자를 호출한다.
16. 의미적으로 유사한 클래스는 ( ), 기능적으로 유사한 클래스는 ( )로 묶는다.
17. enum의 각 상수값은 하나의 ( )와 같다.
18. 제네릭은 ( )을 매개변수로 가진다.
19. 람다식의 대상 인터페이스를 ( ) 타입이라고 한다.
20. 패키지는 관련 ( )와 ( )의 묶음이다.
21. checked Exception은 반드시 ( )하거나 ( )해야 한다.
22. java.lang 패키지는 import 없이 ( )된다.
23. String은 ( ) 클래스라 내용 변경이 불가능하다.
24. 기본형을 객체로 다루기 위한 클래스는 ( ) 클래스다.
25. Buffered 계열은 ( ) 스트림이며 성능을 높인다.
26. InputStreamReader는 ( ) 입력을 ( ) 입력으로 변환한다.
27. File 클래스는 파일/디렉터리를 표현하지만 ( ) 메서드는 제공하지 않는다.
28. NIO의 Path는 java.io의 ( )보다 풍부한 기능을 제공한다.
29. Files 클래스는 파일 조작과 읽기·쓰기 ( ) 메서드를 제공한다.
30. WatchService는 ( ) 이벤트를 감시한다.
31. JCF는 ( )을 효율적으로 다루기 위한 API 프레임워크다.
32. Set은 중복을 ( ), List는 순서와 중복을 ( ).
33. Queue는 ( ) 방식이다.
34. Map은 ( )와 ( )의 쌍을 관리한다.
35. Stream의 filter는 ( ), map은 ( ), collect는 ( ) 연산이다.
36. 스레드 실행 코드는 ( ) 메서드에 정의한다.
37. 새 스레드 시작은 run()이 아니라 ( )로 한다.
38. synchronized는 공유 객체 접근을 한 번에 ( ) 스레드로 제한한다.
39. JDBC는 Java에서 ( ) DB와 연동하는 표준 API다.
40. SELECT 실행은 ( ), 결과는 ( )이다.
41. Java 라이브러리는 .class 파일을 묶은 ( ) 형태다.
42. 모듈 의존관계는 ( ) 파일에 ( )와 ( )로 설정한다.
43. java.base는 Java 표준 모듈 중 가장 ( ) 모듈이다.

연습문제

Q1. Java 언어의 특징 중에 다음 내용이 의미하는 것은?

지문: 똑같은 바이트코드가 Java 플랫폼이 설치된 다양한 하드웨어와 운영체제에서 수정없이 실행될 수 있다.

1. 엄격한 자료형의 검사
2. 플랫폼에 독립적
3. 예외처리 기능의 지원
4. 멀티 스레딩의 지원

Q2. 다음 파일의 이름은 A.java 이다. 이 파일을 컴파일할 때 결과로 만들어지는 것을 정확히 설명한 것은?

public class A { }
class B { }

1. A.class만 생성된다.
2. B.class만 생성된다.
3. A.class와 B.class가 생성된다.
4. 오류가 있어 컴파일되지 않는다.

Q3. “Hello, World!”를 화면에 출력하는 자바 프로그램을 작성하라.

Q4. 다음 중 클래스 이름에 해당하지 않는 것은?

1. Integer
2. String
3. System
4. boolean

Q5. 다음 정수 리터럴 중 값이 다른 하나는 무엇인가?

1. 10
2. 00001010
3. 0x0A
4. 0b0000_1010

Q6. 위의 for문을 향상된 for문을 이용해 다시 작성하여라.

원문 이미지:

int[] a = {32, 87, 3, 589, 12};

for (int i = 0; i < a.length; i++)
    System.out.print(a[i] + " ");

Q7. 다음 중 문법적으로 올바른 문장은 무엇인가?

1. int a[10] = new int[ ];
2. int b[ ] = new int(10); 3.

   int[ ][ ] c = new int[5][ ];
   

   4.

   int[5] d = {1, 2, 3, 4, 5};
   

Q8. int형 변수 i와 j의 값을 각각 출력하기 위해 적당한 출력문은 무엇인가? 1.

   System.out.println( i , j );

2.

   System.out.println( i + " " + j );

3.

   System.out.println( i + j );

4.

   System.out.println( i + ‘=’ + j );

Q9. 퍼블릭 Alpha 클래스에서 protected 데이터 필드가 정의되었다고 가정할 때, 아래 4개의 클래스 중에서 이 데이터 필드를 사용할 수 없는 클래스는 무엇인가?

원문 이미지:

1. Alpha
2. AlphaSub
3. Beta
4. Gamma

Q10. 키워드 final에 관한 설명으로 틀린 것은? 1.

   final 클래스의 자식 클래스를 정의할 수 없다.

1. 부모 클래스의 final 메소드는 자식 클래스로 상속될 때 재정의될 수 없다. 3.

   final 변수는 상수로 사용된다.
   

   4.

   final 클래스의 객체를 생성할 수 없다.
   

Q11. Circle 클래스에서 원주율 PI를 상수로 선언하기 위해 ㉠에 들어갈 적당한 내용은 무엇인가?

원문 이미지: 1.

   double PI = 3.14;

2.

   final double PI = 3.14;

3.

   const double PI = 3.14;

4.

   static final double PI = 3.14;

Q12. Circle 클래스의 생성자에서 밑줄 친 ㉡에 들어갈 적당한 내용을 작성하시오

원문 이미지:

Q13. 다음 프로그램을 실행했을 때 예상되는 출력은?

원문 이미지:

1. A
2. B
3. 컴파일 오류
4. 실행 오류

Q14. 밑줄 친 ㉠, ㉡에 들어갈 키워드는 순서대로 무엇인가?

원문 이미지:

1. extends, extends
2. extends, implements
3. implements, implements
4. implements, extends

Q15. 밑줄 친 부분의 의미를 정확히 설명하시오. 단, CSuper는 클래스 이름이다.

원문 이미지:

Q16. 다음과 같은 제네릭 클래스가 있다고 가정하자. 보기에서 문법적으로 오류가 있는 것은?

원문 이미지: 1.

   Data<int> d = new Data<>( );

2.

   Data<Integer> d = new Data<>( );

3.

   Data<String> d = new Data<String>( );

4.

   Data d = new Data( );

Q17. 다음과 같은 인터페이스가 있다고 가정할 때, 보기에서 람다식 사용이 잘못된 것은?

원문 이미지: 1.

   Addable ad = (int a, int b) -> { return (a + b); };

2.

   Addable ad = (int a, int b) -> a + b;

3.

   Addable ad = (a, b) -> return (a + b);

4.

   Addable ad = (a, b) -> (a + b);

**Q18. Java에서 제공되는 표준 함수형 인터페이스 중 Supplier에서 선언된 추상 메소드의 이름과 형식은 각각 무엇인가?**

Q19. Client 클래스를 myprogram.game 패키지에 위치시키려고 한다. Client 클래스를 정의하는 소스 파일의 맨 위에 포함시켜야 코드는 무엇인가? 1.

   package myprogram.game;

2.

   package myprogram.game.Client;

3.

   import myprogram.game;

4.

   import myprogram.game.Client;

Q20. 밑줄 부분에 들어가야 할 내용은 무엇인가?

원문 이미지:

1. throw IOException
2. throws IOException
3. throw FileNotFoundException
4. throws FileNotFoundException

Q21. 프로그램 상에 클래스의 완전한 이름인 java.util.Scanner로 표시하지 않고, 단순히 클래스 이름 Scanner 만으로 표시하기 위해서 소스 파일의 맨 위에 작성해야 코드는 무엇인가?

Q22. 다음 프로그램의 출력 결과는 무엇인가?

원문 이미지:

1. Jovo
2. Java
3. JovoExam
4. JavaExam

Q23. Object 클래스와 String 클래스에 대한 설명이다. 잘못된 것은 무엇인가?

1. 모든 클래스는 묵시적으로 Object 클래스를 상속받는다.
2. Object 클래스에 toString()과 equals() 메소드가 정의되어 있다.
3. String 클래스에 toString()과 equals() 메소드가 재정의되어 있다.
4. String 클래스는 표준 입출력 스트림을 위한 static 필드를 제공한다.

Q24. 교재의 [소스 7-22]에서 문자열 처리 시간에 차이가 생기는 이유를 설명하라.

Q25. 입력 스트림은 기본 스트림과 보조 스트림으로 나뉜다. 다음 중 기본 스트림에 해당하지 않는 것은?

1. StringReader
2. FileReader
3. ByteArrayInputStream
4. BufferedReader

Q26. BufferedReader 클래스에 관한 설명으로 틀린 것은 무엇인가?

1. Reader의 자식 클래스이다. 2.

   read()와 readLine() 등 다양한 입력 메소드를 제공한다.
   

2. 바이트 단위의 입력 기능을 제공한다.
3. 입력 과정에 버퍼링 기능을 제공한다.

Q27. 키보드에서 한글을 입력받기 위해서 바이트 단위의 표준 입력 스트림(System.in)을 캐릭터 스트림으로 변환하는 것이 필요하다. 다음 밑줄 부분에 공통으로 들어갈 클래스 이름은 무엇인가?

원문 이미지:

Q28. Path 인터페이스에 관한 설명이다. 잘못된 것은?

1. java.io.File 클래스를 대체할 수 있다.
2. 파일시스템에 존재하는 파일 또는 디렉터리의 경로를 표현한다.
3. 경로의 생성, 경로의 조작/비교, 경로의 요소를 조회하는 기능을 제공한다.
4. 파일 내용의 읽기와 쓰기 기능을 제공한다.

Q29. FileChannel 클래스에 관한 설명으로 틀린 것은 무엇인가?

1. java.io 패키지의 파일 관련 스트림 클래스를 대체하기 위한 클래스이다. 2.

   FileChannel.open(path)으로 객체 생성을 하면 해당 파일을 읽기용으로 열게 된다.
   

2. 파일 입력을 위해 FileChannelReader, 파일 출력을 위해 FileChannelWriter를 사용한다.
3. 멀티 스레드 환경에서도 안전하게 사용할 수 있게 설계되었다.

Q30. WatchService를 이용해 디렉터리를 감시할 때, take() 메소드를 호출한다. 이후 대기 중에 있다가 이벤트가 발생하면, take()가 WatchKey 객체를 리턴한다. WatchKey에 관해 설명하라.

Q31. ArrayList 클래스에 관한 설명으로 적당하지 않은 것은?

1. List 인터페이스를 구현한 클래스이다.
2. 여러 원소를 저장하기 위해 내부적으로 배열을 사용한다.
3. 원소의 순서가 의미를 가진다.
4. 같은 자료를 중복으로 저장할 수 없다.

Q32. (key, value) 형태의 원소로 구성되는 자료 묶음을 다루기 위한 인터페이스나 클래스가 아닌 것은?

1. HashMap
2. HashSet
3. Hashtable
4. Map

**Q33. LinkedList를 이용하여 큐 자료구조를 구현할 때, 자료를 추가하는 메소드와 삭제하는 메소드는 무엇인가?**

Q34. 주어진 배열을 스트림으로 만들려고 한다. 밑줄 부분에 들어갈 적당한 내용은?

원문 이미지: 1.

   IntStream.range(numbers)

2.

   Arrays.stream(numbers)

3.

   numbers.stream( )

4.

   numbers.getStream( )