CS (기술면접 대비)

HTML

HTML > Hyper Text Markrup Language

플로그인 없이 브라우저 스스로 모든 걸 할 수 있게 만든 표준 언어

이전 버전 VS HTML5
1. 시맨틴 태그 도입해서 문서 구조 간략해지고 뚜렷해짐
2. 외부 플러그인 없이 멀티 미디어를 브라우저가 직접 실행함
3. 구조 파악 용이해져 협업하기 좋아짐

= 웹 브라우저가 플러그인 업이 앱처럼 사용가능해짐

 

CSS

CSS > Cascading Style Sheets

웹 페이지의 디자인을 담당하는 언어

이번 버전 VS CSS3
1. 이미지 없이 구현 가능
2. 자바 스크립트 도움 없이 애니메이션 효과 구현 가능
3. 레이아웃 기능 강화, 기기별 화면 크기 최적화 (Flexbox > 가로,세로 정렬 쉬어짐, Grid > 2차원 레이아웃 구성 가능)

= 포토샵이나 자바 스크립트 없이 웹 디자인 가능함

 

JS

JS > Java Script

웹 페이지를 동적으로 동작하게 만드는 프로그래밍 언어

특징:
1. 사용자와 상호작용
2. 실시간 데이터 업데이트
3. 시각적 효과

=  웹 사이트라는 건물을 짓는데 HTML은 구조 담당, CSS는 인테리어 담당, JS는 전기설비 담당

프론트 엔드 개발자의 코어가 되는 언어

JS는 웹 페이지에 상호작용과 기능을 추가하여 웹을 동적으로 동작하게 만드는 프론트엔드 개발의 코어 기술이다

 

HTML, CSS, JS의 관계를 실생활에 비유

• HTML: 빵, 패티, 치즈, 양상추를 쌓는 구조 (레시피)
• CSS: 소스 뿌리고, 접시에 예쁘게 담는 것 (플레이팅)
• JS: 키오스크로 주문하면 주방으로 전송되는 시스템 (주문처리)

 

Domain / URL이 무엇인가?

• 도메인 (DoMain)이란?
  - 웹 사이트의 이름 또는 주소 
  - 숫자로 된 복잡한 컴퓨터의 주소를 사람이 쉽게 문자로 바꾼 이름 (EX: google.com, naver.com)
  = 주소

 

• URL > Uniform Resource Locator
  -인터넷에서 원하는 웹페이지의 정확한 위치까지 포함한 상세 주소 (EX: https://yoo-storage.tistory.com)
  = 상세주소

 

= 도메인은 웹사이트 '이름', URL은 인터넷에서 특정 웹 페이지의 위치를 나타내는 '전체 주소'

 

Web hosting / Server hosting이 무엇인가?

•  웹 호스팅 > Web hosting
   웹 사이트 파일을 서버에 저장하여 인터넷에서 접속할 수이 있도록 해주는 서비스

 

• 서버 호스팅 > Server hosting
  웹 사이트나 애플리케이션을 운영할 수 있도록 서버 자원을 제공하는 서비스 

 

웹 호스팅 스펙의 디스크 / 트래픽 / DB는 무엇인가? 

• 디스크  > disk
  웹 사이트의 모든 데이터를 담아두는 창고(저장 공간)

 

• 트래픽 > traffic
  방문자들이 내 웹 사이트에 접속해서 데이터를 가져간 양(전송량)

 

• DB > Data Base
  웹 사이트에서 데이터를 저장하고 관리하는 시스템을 의미

 

웹사이트 트래픽이 무엇이고, 대표적인 트래픽 분석도구 무엇이고, 어떻게 사용하는지 설명

• 웹 사이트 트래픽
  웹 사이트에 방문하는 사용자의 수와 그들이 만들어내는 방문 활동 데이터의 양을 의미

 

• 대표적인 트래픽 분석도구는 무엇인지?
  Google Analytics, Naver Analytics, Adobe Analytics, Matomo

 

• 어떻게 사용하는지?
  1.사이트 등록
  2. 추적코드 설치
  3. 방문자 데이터 수집(2~3일 소요)
  4. 통계 분석 확인

 

FTP와 HTTP가 무엇인지 설명

• FTP > File Transfer Protocol
  파일을 전송하기 위한 통신 규약

 

• HTTP > HyperText Transfer Protocol
  웹 브라우저와 웹 서버 사이에서 웹 페이지 데이터를 주고받기 위한 통신 규약

 

파일의 절대 경로와 상대 경로가 무엇인지 설명

• 절대 경로 > Absolute Path
  파일이 위치한 전체 경로를 처음부터 끝까지 모두 표시한 경로를 의미
  (어디서 출발하든 똑같은 목적지)

 

• 상대 경로 > Relative Path
  현재 위치를 기준으로 파일의 위치를 나타내는 경로를 의미
  (내가 어디에 있는가에 따라 목적지 설명이 달라짐)

 

UTF-8 인코딩이 무엇인지 설명

Unicode Transformation Format - 8 - bit
컴퓨터에서 문자를 숫자 형태로 변환하여 저장하고 전송하는 문자 인코딩 방식
(유니코드를 기반으로 세계 대부분의 문자를 하나의 방식으로 표현하는 인코딩 방식)

 

웹 폰트가 무엇인지 설명

웹 폰트 > Web Font
방문자의 컴퓨터에 해당 폰트가 설치되어 있지 않아도 웹 사이트에서 지정한 폰트를 인터넷을 통해 실시간 다운로드하여 화면에 표시하는 폰트를 의미

 

시스템 폰트가 무엇인지 설명

시스템 폰트 > System Font
사용자의 컴퓨터나 OS에 기본적으로 설치되어 있는 폰트

장점:
1. 다운로드 과정이 없어 웹 사이트 로딩 속도 빠름
2. 유료 폰트 라이선스나 서버 트래픽 비용을 걱정할 필요 X
3. 폰트 파일이 깨지거나 로딩 되지 않아 글자가 안 보이는 현상 없음

단점:
1. 디자인 일관성 부족: 기기마다 설치된 폰트가 달라 사용자마다 화면이 다르게 보임
2. 디자인의 제약: OS 기본 글꼴만 사용할 수 있어 화려한 디자인 구현이 어려움
3. 브랜드 정체성 악화: 브랜드 전용 서체를 쓸 수 없어 평범한 느낌을 줄 수 있음

 

이미지 폰트가 무엇이고 장단점 설명

이미지 폰트 > Image Font
텍스트를 실제 글자가 아닌 이미지 파일로 만들어 웹 페이지에 표시하는 방식을 의미

장점:
1. 디자인 표현이 자유로움: 어떤 글꼴이나 스타일도 표현 가능
2. 사용자 환경과 관계없이 동일하게 표시: 폰트가 없어도 동일한 디자인 유지 가능
3. 특수 효과 적용 가능: 그림자, 질감 등 다양한 효과 적용 가능

단점:
1. 수정이 어려움: 글자를 변경하려면 이미지를 다시 제작해야 함
2. 검색 및 접근성 문제: 검색 엔진이 텍스트로 인식하기 어려움
3. 페이지 용량 증가: 이미지 파일 사용으로 로딩 속도가 느려질 수 있음

 

TTF / OTF가 무엇인지 어떤 경우에 사용하는지 설명

TTF > True Type Font
애플과 마이크로소프트가 공동 개발한 가장 많이 사용하는 벡터 폰트 파일

어떤 경우에 사용하는가?
> 컴퓨터에 폰트 설치할 때
> 웹 사이트에서 웹 폰트로 사용할 때

OTF > Open Type Font
어도비와 마이크로소프트가 협력하여 만든 고급 폰트 형식

어떤 경우에 사용하는가?
> 고해상도 인쇄 및 출력
> 전문 디자인 작업: 정교한 타이포 그래픽 작업할 때 사용

 

WOFF가 무엇인지 어떤 경우에 사용하는지 설명

WOFF > Web Open Font Format
웹 사이트에서 사용하기 위해 만들어진 웹 전용 폰트 형식

어떤 경우에 사용하는가?
> 웹 사이트에서 웹 폰트를 사용할 때 사용

 

em / rem이 무엇인지 설명

• em > Element
  부모 요소의 글자 크기를 기준으로 계산되는 단위

 

• rem > root em
  rem은 최상위 요소의 글자 크기를 기준으로 계산되는 단위

 

jpg의 특성은 무엇이고 모던 웹에서 어떤 경우에 사용되는지 설명

• JPG > Joint Photographic Experts Group
  사진 이미지를 저장하기 위한 압축 이미지 파일 형식
  용량을 줄이기 위해 '손실 압축 방식' 사용

 

• 모던 웹에서 사용하는 경우
  사진 이미지, 용량 최적화가 중요한 경우

 

png의 특성은 무엇이고 모던 웹에서 어떤 경우에 사용되는지 설명

• png > Portable Network Graphics
  JPG의 단점을 보완하고 웹 환경에 최적화하기 위해 만들어진 이미지 형식
  가장 큰 특징은 '무손실 압축'과 '투명도 지원'

 

• 모던 웹에서 사용되는 경우
  로고 및 아이콘, 텍스트가 포함된 그래픽에서 사용, 투명 배경 이미지에 사용

 

webP의 특성은 무엇이고 모던 웹에서 어떤 경우에 사용되는지 설명

• WebP
  JPG, PNG, GIF의 장점만 모아서 압축률을 극한으로 끌어올린 웹 최적화 이미지 포맷
  손실 / 무손실 압축 모두 지원, 파일 용량 작음, 투명 배경 지원, 애니메이션 지원

 

• 모던 웹에서 사용하는 경우
  웹 사이트 성능 최적화, 이미지가 많은 사이트, 다양한 이미지 기능이 필요한 경우

 

svg의 특성은 무엇이고 모던 웹에서 어떤 경우에 사용되는지 설명

• SVG > Scalable Vector Graphics
  벡터 방식으로 이미지를 표현하는 그래픽 형식
  스케일이 작거나 키워도 화질이 깨지지 않는다
  용량이 효율적, 코드로 작성 가능하다

 

• 모던 웹에서 사용되는 경우
  아이콘, 로고, UI 요소에 사용된다

 

Hex code가 무엇인지 설명

• RGB 색상을 16진수로 표현한 색상 코드를 말한다
  Ex: #FFFFFF(흰색), #000000(검정)

 

RGBA가 무엇인지 설명

• RGBA
  빛의 삼원색인 RGB(RED, GREEN, BLUE)에 투명도를 나타내는 A(ALPHA)가 결합된 형태
  
  Ex: RGBA (0, 0, 0, 0.5) 반투명한 검은색

 

시멘틱 태그 중 가장 중요한 7개와 설명

<header>: 도입부, 로고, 메뉴 등을 포함하는 상단 영역

<nav>: 사이트 안의 다른 페이지로 이동하는 탐색 링크 모음

<main>: 해당 페이지의 가장 핵심적인 본문 내용

<section>: 본문 안에서 주제별로 나눈 큰 단락

<article>: 자체로 독립적인 내용이 되는 글

<aside>: 주요 흐름과 직접 관계없는 사이드바, 광고, 관련 링크

<footer>: 작성자 정보, 저작권, 연락처 등이 담긴 하단 영역

 

국내 랩탑 디바이스 해상도 통계

대한민국 데스크톱 해상도 통계 보고

해상도 통계 1위 - FHD: 1920x1080 (43.24%) 압도적으로 1위 → 표준 해상도

해상도 통계 2위 - QHD: 2560x1440 (16.03%) → 고해상도 사용자 증가 추세

리서치 기관 - 스탯카운터 (Statcounter)

리서치 일자 - 최근 1년 (2025년 4월 ~ 2026년 3월 기준)

출처 - https://gs.statcounter.com/screen-resolution-stats/desktop/south-korea

 

국내 모바일 웹 브라우저 BIG 3를 점유율 순서대로

대한민국 모바일 브라우저 점유율 보고

1위 - Chrome 36%

2위 - Samsung Internet 25%

3위 - Safari 23%

통계기관 - 스탯카운터 (Statcounter)

통계일자 - 최근 1년 (2025년 4월 ~ 2026년 3월 기준)

근거 - https://gs.statcounter.com/browser-market-share/mobile/south-korea

 

국내 모바일 해상도 통계

해상도 통계 1위 - 414 14%

해상도 통계 2위 - 384 10%

해상도 통계 3위 - 360 9%

리서치 기관 - 스탯카운터 (Statcounter)

리서치 일자 - 최근 1년 (2025년 4월 ~ 2026년 3월 기준)

 

mobile only 컨셉트가 무엇인지 설명

• mobile only 컨셉트는 웹 사이트나 서비스를 오직 모바일 기기에서만 사용하도록 설계하는 방식

 

RWD와 AWD의 정의 및 관계에 대해 설명

• RWD (Responsive Web Design, 반응형 웹 디자인) 하나의 웹 사이트가 다양한 화면 크기에 맞게 자동으로 레이아웃이 변하는 방식
• AWD (Adaptive Web Design, 적응형 웹 디자인) 여러 개의 고정된 레이아웃을 미리 만들어두고, 기기나 화면 크기에 맞는 레이아웃을 선택하여 제공하는 방식
• 관계: 두 방식은 서로 대립하는 개념보단 구현 방식이 다른 개념이다.

 

viewport에 대해 설명하고 RWD 개발을 위한 디폴트 코드를 제시

• viewport

웹페이지에서 사용자에게 실제로 보여지는 화면 영역을 의미

• 코드

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

media query에 대해 설명하고 디폴트 코드를 제시

반응형 웹 디자인의 핵심 기술로, 접속하는 기기의 종류나 화면 크기에 따라 다른 CSS 스타일을 적응할 수 있게 해주는 도구

/* 모바일 */

@media (max-width: 767px) {}

/* 태블릿 */

@media (min-width: 768px) and (max-width: 1023px) {}

/* PC */

@media (min-width: 1024px) {}

 

Native app의 정의와 장단점

• Native App

안드로이드나 iOS와 같은 특정 운영체제 환경에 최적화하여 개발된 애플리케이션을 의미

• 장점

성능이 뛰어남: OS에 최적화되어 빠르고 안정적

기기 기능 활용 가능: 카메라, 블루투스 등 다양한 기능 사용

• 단점

높은 개발 비용 및 시간: OS별로 하나씩 따로 만들어야 하므로 개발 인력과 시간이 많이 듦

유지보수 어려움: 플랫폼별로 별도 관리 필요

 

Hybrid app의 정의와 장단점

• Hybrid App
  웹 기술과 네이티브 기술을 결합하여 만든 형태의 앱
• 장점
  개발 비용 절감: 하나의 코드로 안드로이드와 iOS에서 동시 개발 가능 유지보수 용이: 코드 하나만 수정하면 여러 플랫폼에 적용 가능
• 단점
  성능 제한: 네이티브 앱 보다 속도와 성능 떨어질 수 있음 UI/UX 한계: 완전 네이티브 느낌 구현 어려움

 

Mobile web app의 정의와 장단점

• Mobile Web App
  스마트폰의 웹 브라우저에서 실행되지만 마치 앱처럼 보이도록 최적화된 웹사이트를 말함

• 장점
  개발 비용 절감: 안드로이드, iOS용을 따로 만들 필요가 없어 시간과 비용이 적게 든다
  설치 불필요: 사용자의 기기 저장 공간을 차지하지 않으며, 링크 공유만으로 바로 접속 할 수 있다
  유지보수 용이: 서버만 업데이트하면 즉시 반영된다

• 단점
  기기 기능 제한: 카메라, 블루투스 등 스마트폰 하드웨어 기능을 사용하는데 제약이 많다
  오프라인 접속 불가: 기본적으로 인터넷 연결이 필수적이다
  성능제한: 네이브트 앱보다 속도와 성능이 떨어진다

 

Web Accessibility에 대해 설명

• Web Accessibility
  웹 접근성은 장애인, 고령자 등 모든 사용자가 웹 사이트의 정보와 기능을 차별 없이 이용할 수 있도록 만드는 것을 의미

 

 WIREFRAME이 무엇인지 설명

• 와이어 프레임 (wireframe)
  웹 사이트나 앱을 만들기 전에 화면의 구조와 기능, 콘텐츠의 배치만을 단순한 선과 상자로 표현한 레이아웃 말함

 

STORY BOARD가 무엇인지 설명

• Story Board
  웹 사이트나 앱 제작 전에 화면의 흐름과 기능, 사용자 동선을 순서대로 정리한 설계 문서

 

개발명세서가 무엇인지 설명

• 개발명세서
  프로젝트의 기획 단계에서 결정된 모든 사항을 바탕으로, 개발자가 실제로 코드를 짜기 위해 필요한 기술적 정보들을 상세하게 기록한 문서

 

bootstrap이 무엇인지 설명

• 부트스트랩은 웹 사이트를 쉽고 빠르게 만들 수 있도록 도와주는 프론트엔드 CSS 프레임워크이고
  HTML, CSS, JavaScript로 구성되어 있으며 반응형 웹 디자인을 쉽게 구현할 수 있도록 제공함

 

Vanilla JS가 무엇인지 설명

라이브러리나 프레임워크를 사용하지 않고 순수한 JavaScript만으로 작성한 코드를 의미

 

JS Variable의 정의와 var let const의 특징

• 자바스크립트에서 변수(Variable)란 데이터를 저장하고 참조하기 위해 이름을 붙인 '메모리 공간'을 의미

 

• var:

중족 성언과 재할당 가능

• let:

재선언 불가능 재할당 가능

• const:

중복 선언 및 재할당 불가한 변수

 

JS data type이 무엇인지 어떤 타입이 있는지 설명

JavaScript Data Type(데이터 타입)은 변수에 저장할 수 있는 값의 종류를 의미하고 데이터가 어떤 형태인지(숫자, 문자 등)를 구분하는 기준

JavaScript는 크게 원시 타입(Primitive)과 참조 타입(Reference)으로 나뉜다

원시 타입 -Number -String -Boolean -Undefined -Null -Symbol -Biglnt

참조 타입 -Object -Array -Function

 

JS null / undefined가 무엇인지 설명

JavaScript에서 null과 undefined는 모두 “값이 없음”을 나타내지만, undefined는 실수로 비어있는 상

태, null은 의도적으로 비워둔 상태를 의미함

 

JS Control statement의 종류에 대해 설명

제어문은 코드의 실행 흐름을 인위적으로 제어(결정, 반복 등)하는 문장

크게 조건문과 반복문으로 나뉨

 

JS Function이 무엇인지 설명

함수란 특정 작업을 수행하는 코드 묶음을 하나로 정의한 것

필요할 때 호출하여 코드를 재사용하고, 프로그램을 구조적으로 작성할 수 있게 해줌