제1강 웹 프로그래밍 개요& HTML 텍스트의 핵심 내용을 요약하고, 이를 바탕으로 한 기출문제 5개와 정답 및 해설을 작성해 드립니다.
1. 중요한 핵심 내용 요약
① 웹의 이해 및 작동 원리
- 인터넷 vs 웹: 인터넷은 전 세계를 연결하는 네트워크 인프라이며, 웹(Web)은 인터넷 위에서 HTTP, URL, HTML을 통해 작동하는 정보 서비스입니다 ("인터넷이 도로라면, 웹은 그 위를 달리는 서비스").
- 통신 과정: 클라이언트(브라우저)가 URL을 입력하면 DNS 조회를 통해 서버의 IP 주소를 획득합니다. 이후 HTTP/HTTPS 요청을 서버에 보내고, 서버가 HTML/CSS/JS 등의 리소스를 응답하면, 브라우저가 이를 파싱하고 렌더링 하여 화면에 출력합니다.
② 웹 프로그래밍의 이해 (웹 페이지의 3요소)
- HTML (Hyper Text Markup Language): 웹 페이지의 기본 골격과 구조, 콘텐츠를 정의하는 '뼈대' 역할을 합니다.
- CSS (Cascading Style Sheets): 색상, 폰트, 레이아웃 등 시각적 표현과 스타일을 담당하는 '디자인' 역할을 합니다.
- JavaScript: 웹 페이지의 동적인 기능과 사용자 상호작용을 담당하는 '동작' 역할을 합니다.
- 프론트엔드 vs 백엔드: 사용자 눈에 보이는 영역을 개발하는 클라이언트 사이드 프로그래밍(HTML/CSS/JS 등)을 프런트엔드라 하고, 눈에 보이지 않는 서버와 DB 영역을 개발하는 구조를 백엔드라고 합니다.
③ HTML 기초 문법 및 템플릿
- 요소(Element) 구조: <태그명 속성명="속성값">내용</태그명> 구조를 가지며, 내용이 없는 빈 요소(<br>, <img> 등)도 존재합니다.
- 전역 속성: 모든 태그에서 공통으로 사용 가능하며, 유일한 고유 식별자인 id, 그룹 관리를 위한 class, 마우스 오버 시 툴팁을 띄우는 title 등이 있습니다.
- 기본 구조 (<head> vs <body>): <head>는 문자 인코딩(charset="UTF-8"), 메타 데이터, 문서 제목 등 기계를 위한 정보를 포함하며 화면에 출력되지 않습니다. <body>는 실제 화면에 출력되는 본문 내용을 담습니다.
④ HTML 텍스트 표현 및 컨테이너
- 의미(시멘틱) 중심의 선택: HTML 요소는 단순한 외양(모양)이 아니라 의미에 맞게 선택해야 합니다. (예: 글씨를 단순히 크게 하려고 <h2>를 쓰거나, 여백을 주려고 <br>을 남용하는 것은 금지)..
- 물리적 요소 vs 논리적 요소: 단순 시각 효과만 주는 물리적 요소(<b>, <i>)보다 웹 접근성을 위해 의미를 내포한 논리적 요소(<strong>, <em>)의 사용이 권장됩니다.
- 문자 엔티티: 공백이나 예약 문자 등을 표현하기 위해 사용합니다 (예: <는 <, >는 >, 공백은 ).
- Inline: 내용물만큼만 공간을 차지하고 줄 바꿈이 없으며 크기 조절이 불가능합니다 (span, a, strong 등).
- 블록(Block) vs 인라인(Inline) 요소: * Block: 한 줄을 모두 차지하며 크기 조절이 가능합니다 (div, p, h1~h6 등).
2. 기출문제 5개 (정답 및 해설 포함)
1. 다음 중 웹의 작동 원리에 대한 설명으로 가장 올바르지 않은 것은?
① 웹은 서버-클라이언트 구조에서 요청(Request)과 응답(Response)의 교환으로 동작한다.
② 브라우저에 URL을 입력하면 가장 먼저 웹 서버에 직접 요청을 보내 리소스를 가져온다.
③ HTTP는 클라이언트와 서버가 데이터를 주고받기 위한 통신 규약이다.
④ 보안과 데이터 암호화를 위해 현대 웹 환경에서는 HTTP보다 HTTPS가 기본 표준으로 사용된다.
정답: ②
해설: URL을 입력하면 브라우저는 웹 서버에 바로 요청을 보내는 것이 아니라, 먼저 DNS 조회를 통해 해당 도메인의 IP 주소를 획득하는 과정을 거쳐야 합니다. IP 주소를 얻은 후에야 해당 웹 서버로 HTTP/HTTPS 요청을 보낼 수 있습니다.
2. 웹 페이지의 3요소에 대한 설명 중, '관심사의 분리' 측면에서 실무 활용이 바르게 연결되지 않은 것은?
① HTML — 웹 페이지의 구조와 콘텐츠 정의 (의미 중심)
② CSS — 레이아웃, 반응형, 디자인 시스템 적용
③ JavaScript — 웹 페이지의 상태, 이벤트, 비동기 데이터 흐름 제어
④ HTML — 텍스트 스타일링과 특정 문장 구간의 색상 및 여백 직접 지정
정답: ④
해설: HTML은 구조와 의미를 정의하는 '뼈대' 역할에 집중해야 합니다. 텍스트 스타일링, 색상 변경, 문단 간격이나 여백 조절 등 시각적인 표현과 디자인은 HTML이 아니라 CSS의 역할입니다.
3. HTML 태그의 속성 중 문서 전체에서 중복되어 사용할 수 없으며, JavaScript에서 특정 요소를 유일하게 식별하여 접근하고자 할 때 주로 사용하는 전역 속성은?
① class
② title
③ id
④ data-*
정답: ③
해설: id 속성은 문서 전체에서 유일성 및 고유 식별성을 가지므로 중복 생성이 불가능하며, JavaScript나 CSS에서 특정 요소를 딱 집어내어 제어할 때 사용됩니다. 반면 class 속성은 여러 요소를 그룹으로 묶어 동일한 스타일을 한꺼번에 적용할 때 사용하므로 중복 사용이 가능합니다.
4. HTML 문서의 기본 구조에서 <head> 태그 내부에 포함되는 핵심 요소가 아닌 것은?
① <meta charset="UTF-8">
② <title>
③ ``을 활용한 본문 출력 콘텐츠
④ <link rel="stylesheet" href="style.css">
정답: ③
해설: <head> 태그 내부에는 브라우저 화면에 직접 표시되지 않고 기계(브라우저, 검색 엔진)가 해석해야 하는 메타 정보, 인코딩 설정, 외부 파일 링크 등이 포함됩니다. 브라우저 화면에 실제로 출력하려는 본문 내용은 <head>가 아닌 <body> 태그 내부에 작성해야 합니다.
5. 다음 중 HTML 블록(Block) 요소와 인라인(Inline) 요소에 대한 설명으로 옳은 것은?
① 인라인 요소는 내용물과 상관없이 무조건 한 줄을 모두 차지하며 너비가 100%가 된다.
② 블록 요소는 위아래로 자동 줄바꿈이 발생하며 폭과 높이 등 크기 조절이 가능하다.
③ <div>는 대표적인 인라인 컨테이너로, 문장 중간의 특정 단어를 스타일링할 때 주로 쓴다.
④ <span> 요소는 블록 요소이므로 내부 영역의 크기(너비, 높이)를 CSS로 자유롭게 조절할 수 있다.
정답: ②
해설: 블록 요소(div, p, h1 등)는 한 줄을 모두 차지하며 위아래 줄바꿈이 발생하고 크기 조절이 가능합니다. 반면 인라인 요소(span, a 등)는 내용물만큼만 공간을 차지하고 옆으로 나란히 배치되며 크기 조절이 불가능합니다. 따라서 <div>는 블록 컨테이너이고, <span>은 인라인 컨테이너입니다.
공부하시느라 고생 많으셨습니다! 요약본과 문제를 통해 배운 내용을 다시 한번 점검해 보시고, 다가오는 평가나 실무에서도 좋은 결과 있으시길 바랍니다.
HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 - UI/UX | 쿠팡
쿠팡에서 HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 UI/UX 제품도 바로 쿠팡에서 확인할 수 있습니다.
www.coupang.com
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
'IT 이야기' 카테고리의 다른 글
| 방송통신대 HTML5 웹 프로그래밍 :: 2강. HTML 요소: 리스트, 그림, 하이퍼링크, 테이블 기말시험 예상기출문제(정답및 해설) (0) | 2026.06.11 |
|---|---|
| 방송통신대 파이썬프로그래밍기초 :: 14강. 실전 프로그래밍 2-1 &기말시험 예상기출문제(정답및 해설) (0) | 2026.06.05 |
| 방송통신대 파이썬프로그래밍기초 :: 13강. 실전 프로그래밍 1 &기말시험 예상기출문제(정답및 해설) (0) | 2026.06.05 |
| 방송통신대 파이썬프로그래밍기초 :: 15강. 실전 프로그래밍 2-2 &기말시험 예상기출문제(정답및 해설) (0) | 2026.06.04 |
| 방송통신대 파이썬프로그래밍기초 :: 10강. 객체지향 &기말시험 예상기출문제(정답및 해설) (0) | 2026.05.28 |
댓글