사내에서 진행했던 세미나 발표 자료, 스크립트 정리
1. 웹의 역사와 세 가지 핵심 기술의 탄생
1.1 웹의 탄생
- 1990년: 팀 버너스-리가 최초의 웹 브라우저이자 편집기인 월드 와이드 웹을 개발.
- 1991년: 팀 버너스-리는 첫 번째 웹사이트를 공개, HTML과 하이퍼링크 개념을 설명.
1.2 웹의 발전과 세 가지 기술의 등장
- HTML: 1991년, 웹 페이지의 구조화와 정보 연결을 위한 마크업 언어로 등장.
- CSS: 1996년, 웹 페이지의 레이아웃과 디자인을 담당하는 기술로 도입.
- JavaScript: 1995년, 웹 페이지에 동적인 기능과 사용자 상호작용을 추가하는 언어로 도입.
2. HTML
2.1 HTML의 정의와 개념
- HTML: HyperText Markup Language의 약자, 웹 페이지의 구조와 내용을 정의하고 연결하는 마크업 언어.
- 하이퍼텍스트: 하이퍼링크를 통해 다른 페이지나 웹사이트로 쉽게 이동할 수 있는 텍스트.
- 마크업 언어: 태그를 이용해 문서나 데이터의 구조를 나타내는 언어.
2.2 HTML의 역사
- 1991년: HTML의 등장, CERN에서 연구원들끼리 정보를 쉽게 교환하기 위해 고안.
- 1993년: HTML 1.0, 기본적인 구조 정의.
- 1995년: HTML 2.0, 첫 번째 공식 표준 발표.
- 1997년: HTML 3.2, 테이블 태그 추가 및 브라우저 간 호환성 개선.
- 1999년: HTML 4.01, CSS와 JS 지원 및 문서 구조 개선.
- 2014년: HTML5, 현대 웹 애플리케이션에 필요한 다양한 기능 도입.
2.3 HTML 구성 요소
문서의 기본 구조:
- 선언문 (<!DOCTYPE html>)
- HTML 문서 (<html> 태그)
- 메타데이터 (<head> 태그)
- 콘텐츠 (<body> 태그)
HTML 요소 구조:
- 시작 태그, 종료 태그, 속성, 내부 콘텐츠로 구성.
- 속성: id, class 등 다양한 정보를 제공.
3. CSS
3.1 CSS의 정의와 개념
- CSS: Cascading Style Sheets의 약자, HTML로 정의된 구조에 디자인을 입히는 기술.
- 캐스케이딩: 스타일이 계단식으로 적용되는 방식을 의미.
3.2 CSS 선택자와 선언 블록
- 선택자: 스타일을 적용할 HTML 요소를 선택하는 방법.
- 기본 선택자: 요소, 속성, id, class 등.
- 가상 클래스 선택자: :hover, :focus 등.
- 가상 요소 선택자: ::before, ::after 등.
- 선언 블록: 스타일의 속성과 값을 적용하는 블록
3.3 CSS 적용 방식
- 인라인 스타일: HTML 요소에 직접 스타일을 정의.
- 내부 스타일 시트: <head> 내 <style> 태그를 사용해 스타일 정의.
- 외부 스타일 시트: 별도의 CSS 파일을 링크하여 스타일 적용.
3.4 CSS 우선순위
- !important > 인라인 스타일 > ID 선택자 > 클래스/속성/가상 클래스 선택자 > 기본 선택자.
- 같은 요소에 여러 스타일이 적용되면 계단식으로 마지막 스타일이 우선 적용.
3.5 CSS의 발전
- CSS1 (1996년): 텍스트 스타일링, 색상, 글꼴 지원.
- CSS2 (1998년): 위치 지정, 자주 사용되는 선택자 추가.
- CSS3 (2003년~): 애니메이션, 그라디언트, 미디어 쿼리, Grid, Flex 등 추가.
4. JavaScript
4.1 JavaScript의 정의와 개념
- JavaScript: 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어.
- 스크립트 언어: 주로 다른 프로그램을 제어하거나 해당 프로그램 내에서 동작을 수행하는 언어.
4.2 JavaScript의 특징
- 인터프리터 언어: 한 줄씩 해석하여 코드를 실행.
- 동적 타이핑: 변수의 데이터 형식을 실행 시점에 자동 결정.
- 프로토타입 기반 객체 지향 언어: 객체를 통해 또 다른 객체를 생성.
- 함수형 프로그래밍 지향: 함수는 일급 객체로 취급, 코드의 재사용성 증가.
4.3 ECMAScript와 ES6
- ECMAScript: 자바스크립트의 표준을 나타내는 기술 규격.
- ES6 (2015년): 클래스 문법, 모듈 시스템, 화살표 함수, 비동기 처리 방식 추가 등 현대 웹 개발에서 중요하게 작동하는 기술 포함.
- ES8~ES12: 비동기 함수, 빅인트(BigInt), null 병합 연산자, 논리 할당 연산자 등 추가.
5. 결론
- HTML, CSS, JavaScript: 웹의 핵심 기술로 자리 잡아 현대 웹의 필수적인 요소가 됨.
- 현대 웹 개발: React, Angular, Vue.js 등 JavaScript 프레임워크와, CSS의 최신 레이아웃 기법, HTML5의 멀티미디어 콘텐츠 및 API를 통해 끊임없이 발전 중.
- 미래 전망: 웹 기술은 계속해서 진화하고 있으며, 개발자들이 기본을 잘 다져나가야 함.
'정리' 카테고리의 다른 글
| [세미나] Figma를 통한 design-to-code 도구 사용기와 실전 비교 (1) | 2024.09.13 |
|---|---|
| [세미나] 타입스크립트로 더 나은 코드 작성하기 (2) | 2024.09.06 |
| [세미나] 왜 리액트인가? (4) | 2024.08.29 |
| [React, JavaScript] ChatGPT 질의응답 - styled-components와 JavaScript 표현식 (0) | 2024.01.17 |
| [Javascript] ChatGPT 질의응답 - sort(), localCompare() 함수 정리 (0) | 2024.01.17 |
