1. 인터넷과 웹의 기초
- 인터넷(Internet): 전 세계 컴퓨터가 연결된 물리적 네트워크의 집합체로, TCP/IP 프로토콜을 사용
- 웹(WWW): 인터넷 위에서 돌아가는 서비스 중 하나로, 하이퍼텍스트를 통해 정보 공유
- 작동 원리: 클라이언트(브라우저)가 서버에 요청(Request)을 보내면, 서버는 HTML 등의 자원으로 응답(Response)하는 구조
2. HTML 개요
- 정의: HyperText Markup Language의 약자로, 웹 페이지의 구조와 내용을 정의하는 마크업 언어
- 특징: 태그(<>)를 사용하여 요소를 정의하며, 브라우저는 이 코드를 해석(렌더링)하여 사용자에게 화면을 보여줌
- 기본 구조:
- <!DOCTYPE html>: 문서의 형식을 선언.
- <html>: 전체 문서의 시작과 끝.
- <head>: 문서 정보(메타데이터, 제목)를 포함.
- <body>: 실제 화면에 나타나는 내용을 포함.
3. 주요 태그(Tag) 정리
- 텍스트 및 콘텐츠:
- <h1>~<h6>: 제목(Heading)을 정의하며, 숫자가 작을수록 중요도가 높음
- <p>: 단락(Paragraph)을 구분
- <a>: 하이퍼링크를 생성하며 href 속성으로 목적지 주소를 지정
- 목록과 테이블:
- <ul>/<ol>: 순서 없는/있는 목록. 내부 항목은 <li>로 작성
- <table>: 데이터를 표 형식으로 나타내며 <tr>(행), <td>(셀) 등을 사용
- 사용자 입력(Form):
- <input>: 텍스트 입력, 체크박스, 라디오 버튼 등 다양한 입력을 받음
- <select>: 드롭다운 선택 메뉴를 만듦
- 미디어:
- <img>: 이미지 출력 (src, alt 속성 필수)
- <video>/<audio>: 영상과 음성 파일을 재생
4. 시맨틱 태그 (Semantic Tags)
단순한 디자인을 넘어 의미가 있는 태그를 사용하여 검색 엔진 최적화(SEO)와 접근성을 높임.
- <header>: 상단 영역 (로고, 메뉴 등).
- <nav>: 내비게이션 링크 모음.
- <main>: 문서의 핵심 본문 내용.
- <article>/<section>: 독립적인 기사나 구역 구분.
- <footer>: 하단 정보 (저작권, 연락처 등).
5. 페이지 레이아웃
- <div>: 특별한 의미는 없지만, CSS와 결합하여 레이아웃을 구성하는 가장 대표적인 컨테이너 요소
- 부트스트랩(Bootstrap) 활용: Grid 시스템(12개 열 기준)이나 Flex 레이아웃을 사용하여 반응형 웹 페이지를 쉽게 구성할 수 있음
1. CSS 기본 개념 및 스타일 적용 방법
- 정의: HTML로 구조화된 콘텐츠의 디자인, 레이아웃, 색상, 글꼴 등을 지정하는 스타일시트 언어
- 스타일 적용 3가지 방법:
- 외부 스타일: .css 파일을 별도로 만들어 <link> 태그로 연결 (가장 권장됨).
- 내부 스타일: HTML 문서 내 <style> 태그 안에 작성
- 인라인 스타일: 태그 내부에 style 속성으로 직접 작성
- 우선순위: 인라인 스타일(1,000점) > 아이디(100점) > 클래스(10점) > 태그 선택자(1점) 순으로 적용
2. 선택자(Selectors) 활용
- 기본 선택자: 전체(*), 태그(p), 아이디(#id), 클래스(.class) 선택자가 있음
- 복합 선택자:
- 자손(A B): A 내부의 모든 B.
- 자식(A > B): A의 직계 자식인 B.
- 가상 클래스: 마우스 오버 시의 :hover, 첫 번째 자식인 :first-child 등이 있음.
3. CSS 레이아웃 (Layout)
- 박스 모델: 모든 요소는 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성
- 주요 배치 방식:
- Flexbox (1차원): 가로 또는 세로 한 방향 정렬에 특화되어 있으며, 중앙 정렬이나 요소 간격 배치가 쉬움
- Grid (2차원): 행과 열을 동시에 다루는 격자 형태의 복잡한 레이아웃 구성에 적합함
- 위치(Position): 기본값인 static, 자기 기준 relative, 부모 기준 absolute, 화면 고정인 fixed와 sticky가 있음.
4. 반응형 웹 디자인 및 최신 트렌드
- 미디어 쿼리: 화면 크기(Breakpoint)에 따라 스타일을 다르게 적용하여 모바일, 태블릿, 데스크탑에 대응
- 모바일 우선(Mobile-First): 작은 화면을 기준으로 먼저 설계하고 큰 화면으로 확장하는 전략
- 사용자 정의 변수: --main-color와 같이 변수를 선언하여 테마 전환 등을 쉽게 구현
- CSS 전처리기(SCSS): 변수 사용, 중첩(Nesting) 등을 통해 CSS를 더 효율적으로 작성
5. 부트스트랩 (Bootstrap 5)
- 특징: 반응형 웹과 다양한 UI 컴포넌트(버튼, 모달, 네비게이션 등)를 미리 만들어 제공하는 프론트엔드 프레임워크
- 사용법: CDN 방식을 통해 HTML 헤더에 CSS를, 바디 하단에 JS 링크를 추가하여 즉시 사용 가능
- 컴포넌트: 드롭다운, 모달, 오프캔버스(사이드바) 등 복잡한 기능을 클래스 지정만으로 쉽게 구현할 수 있음
1. 자바스크립트 개요 및 역사
- 정의: 웹 브라우저와 서버 모두에서 작동하는 프로그래밍 언어로, HTML/CSS와 함께 웹 개발의 핵심 기술
- 역사: 1995년 넷스케이프의 브렌던 아이크가 개발하였으며, Mocha에서 LiveScript를 거쳐 JavaScript로 명칭이 변경됨
- 표준화: 1997년 ECMA 국제 표준(ES1)이 되었으며, 현대적인 프로그래밍은 2015년 발표된 ES6(ES2015)를 기점으로 큰 발전을 이룸.
- 주요 브라우저: Chrome, Edge, Firefox, Safari 등 현대 브라우저는 각자의 엔진을 사용하며 높은 호환성을 유지함.
2. 자바스크립트 시작하기
- 연결 방법: <script src="경로"></script>를 통해 외부 파일을 연결하거나 HTML 문서 내부에 직접 작성
- 작성 위치:
- <head>: 페이지 렌더링 전 즉시 실행되어 초기화에 적합하지만 로딩이 늦어질 수 있음.
- <body> 끝: 모든 콘텐츠 로드 후 실행되어 사용자에게 더 빠른 경험을 제공하며 UI 조작에 적합함.
- 빌트인 객체: 브라우저에서 기본 제공하는 window, document(DOM 조작), console(디버깅), Math, Date, Array 등이 있음
3. 기본 문법 (변수와 연산자)
- 변수 선언:
- let: 변수 값이 변경될 수 있을 때 사용 (재할당 가능).
- const: 상수 정의 시 사용 (재할당 불가).
- var: 과거에 사용했으나 범위 문제로 현재는 권장되지 않음.
- 자료 형식:
- 기본형(Primitive): number, string, boolean, null, undefined, bigint, symbol.
- 참조형(Reference): object, array, function, date, map, set 등.
- 주요 연산자: 산술(+, -, * 등), 증감(++, --), 할당(+=, -=), 비교(==, ===), 논리(&&, ||, !) 연산자가 있음. 특히 ===는 값과 타입을 모두 비교하는 엄격한 비교 연산자
4. 제어문 (조건문과 반복문)
- 조건문: if, else if, else를 통한 조건 분기와 특정 값에 따라 실행하는 switch문
- 반복문:
- for: 정해진 횟수만큼 반복.
- while / do-while: 조건이 참인 동안 반복.
- for...in: 객체의 속성(key) 순회.
- for...of: 배열 등 반복 가능한 객체의 값(value) 순회.
5. 배열(Array) 다루기
- 생성: 배열 리터럴([]), Array.from(), 스프레드 문법([...]) 등을 사용
- 특성: 자바스크립트 배열은 동적 배열로, 생성 후에도 push() 등을 통해 크기를 임의로 변경할 수 있음
- 주요 메서드: push(), fill(), map(), filter(), forEach() 등을 통해 데이터를 조작함
6. 기타 주요 개념 (ES6 이후)
- 화살표 함수: () => {} 형태의 간결한 함수 선언법
- 템플릿 리터럴: 백틱(`)을 사용하여 문자열 내에 변수(${})를 쉽게 포함
- 비동기 처리: Promise, async/await를 통해 네트워크 요청과 같은 비동기 작업을 처리
- 모듈: import와 export를 사용하여 코드의 재사용성을 높임
HTML (구조) + CSS (디자인) + JavaScript (동작) = 완성된 웹 페이지
이 세 가지가 웹 개발의 기본이며, React/Vue 같은 프레임워크도 결국 이 기초 위에서 동작한다.
'SKALA' 카테고리의 다른 글
| Front-framework: Vue.js - Stock Market (0) | 2026.02.09 |
|---|---|
| Front-framework: Vue.js (0) | 2026.02.05 |
| 생성형 AI 기초 및 Prompt Engineering (0) | 2026.02.03 |
| Vector Database (0) | 2026.02.02 |
| LLM 모델 이해 및 활용(2) (0) | 2026.02.02 |
