CS

코딩에 필요한 키워드를 카테고리로 정리 했습니다.

이 내용을 숙지 한다면 기술면접 준비도 덤으로 할 수 있습니다.

도움 되기를 바랍니다.

---

---

웹 표준 및 핵심 기술

• HTML5 / CSS3: HTML5는 웹의 구조와 콘텐츠를 정의하는 최신 표준 규격이며, CSS3는 애니메이션, 변형 등 화려한 스타일과 레이아웃을 담당하는 스타일 시트 표준입니다.
• HTML, CSS, JS의 역할: HTML은 건물의 구조(뼈대), CSS는 인테리어(디자인), JS는 엘리베이터나 조명 스위치 같은 동적인 기능(동작)을 담당하며 서로 보완 관계에 있습니다.
• Semantic Tag: <header>, <footer>처럼 브라우저와 개발자에게 태그의 의미를 명확히 전달하는 태그로, 웹 접근성과 검색 엔진 최적화(SEO)에 필수적입니다.
• UTF-8 인코딩: 전 세계 모든 언어를 웹에서 깨짐 없이 표시하기 위한 표준 문자 인코딩 방식으로, 현대 웹 개발의 기본 설정입니다.

---

반응형 웹 및 레이아웃

• RWD (Responsive Web Design): 하나의 소스로 화면 크기에 맞춰 레이아웃이 유동적으로 변하는 반응형 웹입니다.
• AWD (Adaptive Web Design): 미리 정해진 특정 브라우저 너비(기기별)에 맞춰 준비된 레이아웃을 보여주는 적응형 웹입니다.
• Media Query: 화면의 너비나 해상도 같은 장치의 특성에 따라 서로 다른 CSS 스타일을 적용할 수 있게 해주는 기술입니다.
• Viewport: 웹 페이지가 브라우저 상에서 실제로 표시되는 영역을 말하며, 모바일 기기에서 화면 비율을 제어하는 데 사용됩니다.
• Mobile Only: PC 환경을 고려하지 않고 오직 스마트폰 환경의 사용자 경험에만 최적화하여 설계하는 개발 방식입니다.
• Bootstrap: 웹사이트를 빠르게 만들 수 있도록 버튼, 메뉴 등의 디자인 요소를 미리 만들어 놓은 가장 유명한 오픈소스 CSS 프레임워크입니다.

---

디자인 요소 및 단위

• Hex / RGBA / HSLA: Hex는 16진수 색상 코드(#ffffff), RGBA는 빛의 삼원색에 투명도(A)를 더한 값, HSLA는 색상·채도·명도에 투명도를 더한 색상 표현 방식입니다.
• em / rem: em은 부모 요소의 폰트 크기를 기준으로 하는 상대 단위이며, rem은 최상위 요소(html)의 크기를 기준으로 하는 절대적 상대 단위입니다.
• WOFF / TTF / EOT: 웹에서 사용하는 폰트 파일 형식들로, TTF는 기본 폰트, WOFF는 웹에 최적화된 압축 형식, EOT는 구형 IE 브라우저용 형식입니다.
• 시스템 / 웹 / 이미지 폰트: 시스템은 기기에 설치된 기본 폰트, 웹은 서버에서 내려받는 폰트, 이미지는 폰트 대신 글자 이미지를 사용하는 방식입니다.

---

네트워크 및 호스팅

• URL / Domain: URL은 인터넷상 자원의 전체 주소(상세 주소)이며, Domain은 google.com처럼 숫자로 된 서버 IP를 사람이 기억하기 쉽게 바꾼 이름입니다.
• FTP / HTTP: FTP는 내 컴퓨터와 서버 간에 파일을 주고받는 통신 규약이고, HTTP는 브라우저와 서버가 HTML 같은 웹 데이터를 주고받는 통신 규약입니다.
• 절대 경로 / 상대 경로: 절대 경로는 고유한 전체 주소(URL 등)를 의미하며, 상대 경로는 현재 파일의 위치를 기준으로 다른 파일의 위치를 찾는 방식입니다.
• Web / Server Hosting: 웹 호스팅은 서버의 일부 공간을 빌리는 것이고, 서버 호스팅은 서버 한 대를 통째로 빌려 디스크, 트래픽, DB 권한을 모두 관리하는 것입니다.
• Traffic / 분석도구: 트래픽은 서버를 방문한 사용자들이 발생시킨 데이터 전송량이며, **구글 애널리틱스(GA)**가 대표적인 분석 도구입니다.

---

[부록] 모바일 표준 스펙 추천

구분	추천 값 / 전략
Default Width	보통 360px ~ 390px (iPhone 및 최신 안드로이드 기준)를 기본 너비로 설계합니다.
Media Query	모바일(320px~), 태블릿(768px~), PC(1024px~ 또는 1200px~) 분기점을 주로 추천합니다.

 

---

---

기획 및 설계 단계

• 개발명세서: 만들고자 하는 서비스의 기능, 데이터, 동작 방식을 상세히 기록한 **'개발용 설계 도면'**입니다.
• Story Board: 화면의 흐름과 설명, 로직 등을 시각적으로 정리하여 전체 서비스를 한눈에 파악하게 돕는 **'작업 지침서'**입니다.
• Wireframe: 디자인 요소 없이 선과 상자만으로 화면의 구조와 레이아웃을 잡는 **'골격 설계도'**입니다.

---

웹 표준 및 접근성

• Web Accessibility(웹 접근성): 장애인이나 고령자 등 모든 사용자가 어떤 환경에서도 웹사이트를 동등하게 이용할 수 있도록 보장하는 것입니다.
• Web Standards(웹 표준): 어떤 브라우저에서도 웹이 동일하게 보이고 작동하도록 W3C에서 정한 **'공통 제작 규칙'**입니다.

---

앱 개발 방식 (App Types)

• Mobile Web App: 스마트폰 브라우저에서 실행되며, 웹 기술(HTML/CSS/JS)로 만들어져 설치가 필요 없는 웹사이트 형태입니다.
• Hybrid App: 겉은 앱(Native)이지만 내용은 웹으로 채운 형태로, 웹의 개발 편의성과 앱의 기능을 동시에 잡은 방식입니다.
• Native App: iOS나 안드로이드 OS 전용 언어로 개발되어 최고의 성능과 기기 기능을 완벽하게 활용하는 앱입니다.

---

2026 국내 시장 데이터 (추세 기반)

• 국내 모바일 브라우저 Big 3: 압도적 1위인 Chrome, 삼성 갤럭시 기본 앱인 삼성 인터넷, 아이폰 유저의 Safari가 시장을 삼분하고 있습니다.
• 국내 랩탑 이상 대표 해상도: 가장 대중적인 1920×1080(FHD), 고해상도 표준인 2560×1440(QHD), 맥북 등에 쓰이는 2880×1800 이상이 주를 이룹니다.

---

이미지 포맷 이해

• WebP: 구글이 만든 차세대 포맷으로, JPG나 PNG보다 훨씬 작은 용량으로도 고화질을 유지해 웹 속도를 높여줍니다.
• SVG: 수학적 계산으로 그려지는 벡터 포맷으로, 아무리 확대해도 이미지가 깨지지 않아 로고나 아이콘에 필수입니다.
• GIF: 256색까지만 지원하지만, 간단한 애니메이션(움짤)을 구현할 때 가장 널리 쓰이는 포맷입니다.
• PNG: 배경을 투명하게 만들 수 있고 손실 없이 압축되어, 정교한 그래픽이나 투명도가 필요한 이미지에 적합합니다.
• JPG(JPEG): 사진처럼 색상이 다양한 이미지를 저장할 때 용량을 효율적으로 줄여주는 가장 대중적인 포맷입니다.

---

---

자바스크립트 핵심 개념 (JS)

• JAVAScript: 웹 브라우저에서 실행되는 가장 대표적인 프로그래밍 언어로, 정적인 웹사이트를 동적이고 대화형으로 만들어 줍니다.
• Vanilla JS: 외부 라이브러리나 프레임워크를 전혀 사용하지 않은 순수한 자바스크립트 그 자체를 의미합니다.
• JS DOM (Document Object Model): 브라우저가 HTML 문서를 트리 구조로 이해한 모델로, 자바스크립트를 통해 웹 페이지의 글자나 색상을 바꿀 수 있게 해줍니다.
• JS BOM (Browser Object Model): 웹 브라우저 자체를 제어하기 위한 모델로, 팝업창 띄우기, 현재 주소 확인, 브라우저 뒤로 가기 등의 기능을 담당합니다.
• JS Built-in Object: 자바스크립트가 기본적으로 제공하는 내장 객체(예: 날짜를 다루는 Date, 수학 계산을 돕는 Math)들을 말합니다.

---

자바스크립트 문법 및 데이터

• JS Object: 관련된 데이터(속성)와 기능(메서드)을 하나로 묶어놓은 집합체입니다.
• JS Property: 객체 안에 저장된 '상태 값'으로, 자동차 객체로 비유하면 '색상: 빨강'에서 '색상'에 해당하는 이름표입니다.
• JS Method: 객체가 수행할 수 있는 '동작'이나 '기능'으로, 객체 안에 포함된 함수를 의미합니다.
• JS Function: 특정 작업을 수행하기 위해 재사용 가능하도록 묶어놓은 코드 덩어리입니다.
• JS Parameter / Arguments: Parameter는 함수를 만들 때 선언하는 '변수(입력 구멍)'이고, Arguments는 함수를 실제로 실행할 때 넣는 '실제 값'입니다.
• JS Control statement: 코드의 실행 흐름을 제어하는 문장으로, 조건에 따라 실행 여부를 결정하는 if문이나 반복해서 실행하는 for문이 대표적입니다.
• JS Data type: 자바스크립트가 다루는 데이터의 종류로, 숫자(Number), 문자열(String), 논리형(Boolean) 등이 있습니다.
• JS Variable: 데이터를 저장하기 위해 이름을 붙여놓은 '메모리 공간(바구니)'입니다.
• JS var let const: 변수를 선언하는 키워드로, 예전 방식인 var와 현대적인 방식인 let(값 변경 가능), const(값 변경 불가능/상수)로 나뉩니다.
• JS null / undefined: undefined는 값이 아직 할당되지 않은 초기 상태를, null은 개발자가 의도적으로 '값이 없음'을 명시한 상태를 의미합니다.

---

프레임워크 및 개발 패러다임

• Vue JS: 사용자 인터페이스를 만들기 위한 진보적인 프레임워크로, 배우기 쉽고 화면의 데이터 변화를 자동으로 반영해 주는 '반응성'이 특징입니다.
• SPA (Single Page Application): 페이지 이동 시 전체를 새로고침하지 않고 필요한 부분만 갈아 끼우는 방식의 웹 애플리케이션으로, 앱처럼 부드러운 사용자 경험을 제공합니다.
• PWA (Progressive Web App): 웹과 앱의 장점을 결합하여, 웹사이트임에도 불구하고 오프라인 작업, 푸시 알림, 홈 화면 설치가 가능한 기술입니다.
• Framework: 뼈대가 이미 만들어진 '작업 틀'입니다. 정해진 규칙에 따라 코드를 작성해야 하며, 전체적인 흐름의 주도권을 프레임워크가 가집니다.
• Library: 특정 기능을 수행하는 '도구 모음'입니다. 개발자가 필요할 때마다 원하는 기능을 골라서 사용할 수 있으며 흐름의 주도권이 개발자에게 있습니다.
• API (Application Programming Interface): 서로 다른 프로그램이나 서비스가 데이터를 주고받기 위한 '약속'이자 '통로'입니다.
• OOP (Object-Oriented Programming): 프로그램을 단순히 순서대로 실행하는 것이 아니라, 데이터와 기능을 가진 '객체' 단위로 묶어 관리하는 효율적인 프로그래밍 설계 방식입니다.

---

웹 기술 및 통신

• Ajax: 웹 페이지 전체를 다시 불러오지 않고도 서버와 데이터를 주고받아 화면 일부만 업데이트할 수 있게 해주는 비동기 통신 기술입니다.
• JSON: 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식으로, 사람이 읽기 편하고 컴퓨터가 해석하기 매우 쉬운 데이터 구조입니다.
• jQuery: 복잡한 자바스크립트 코드를 짧고 간결하게 쓸 수 있도록 도와주는 오래된 도구(라이브러리)로, 특히 HTML 요소 제어에 특화되어 있습니다.
• plug-in: 이미 만들어진 프로그램에 특정 기능을 추가하기 위해 끼워 넣는 보조 소프트웨어 조립품입니다.

---