본문 바로가기
▶공부

웹 개발의 기본 개념과 역사

by 쫑효 2023. 11. 21.

                   

오늘은 제목에 적었듯이 웹 개발의 기본 개념과 역사에 대해 배웠다.

 

웹 개발의 기본 개념과 역사

1. HTML(하이퍼텍스트 마크업 랭귀지)

  • HTML: 팀 버너스리에 의해 고안된 웹 표준 언어로, 마크업(표시) 언어
  • 마크업: 정보를 구조적으로 표현하기 위해 태그를 사용하는 것을 의미
  • 예시: <tag>내용</tag>

2. JavaScript와 다른 스크립트 언어

  • JavaScript: 웹 표준 스크립트 언어로, 자바와는 다른 언어입니다.
  • JScript: MS가 만든 JavaScript 유사품
  • VBScript: MS가 Visual Basic을 기반으로 만든 스크립트 언어
  • ActionScript: Flash에서 사용하는 스크립트 언어

3. 웹 브라우저와 브라우저 엔진

  • 아이폰 등장 이후 사파리 브라우저는 플래시를 지원하지 않음.
  • MS는 플래시를 지지하고 IE에서는 플러그인 사용을 지지했으나, 이로 인한 보안 문제 발생.
  • Edge는 HTML5 적극 도입, 크로미움(크롬 브라우저 엔진)으로 재개발.

4. 국내 웹 개발 트렌드

  • 국내에서는 웹퍼블리셔 대신 프론트엔드 개발자들이 JavaScript, jQuery, Vue.js, React.js 등을 활용해 개발.
  • 웹디자이너 -> 웹퍼블리셔 -> 프론트엔드, 백엔드 개발자의 역할 구분이 일반적.
  • SI업체에서는 기능 중심의 업무가 많음.

5. JavaScript의 발전

  • Sun Microsystems는 자바를 개발. 넷스케이프와 협력.
  • JavaScript -> JQuery -> Angular.js -> React.js -> Vue.js로 발전.

6. ECMAScript 및 ECMAScript 6

  • W3C: HTML, CSS, XML의 표준을 지정.
  • ECMA: JavaScript 표준을 지정. ECMAScript로도 불림.
  • ECMAScript 6 (2015): 클래스 도입, spread syntax, 구조 분해 할당, 람다식 등 새로운 syntax 도입.

7. 웹 개발에서의 Framework와 Library

  • Framework: 개발자가 소프트웨어를 개발하기 위해 사용하는 소프트웨어.
  • Library: 함수 또는 함수의 묶음. Framework보다는 단순한 개념.
  • 컴포넌트: 특정 기능을 구현한 작은 소프트웨어, 일반적으로 클래스로 구현.

최근 주목 받는 언어로는 Rust가 있다.

 

Rust: C와 자바의 장점을 결합한 언어로, 최근에 주목받고 있는 언어 중 하나이다.

메모리 안전성, 병행성, 신뢰성 등을 강조하여 다양한 분야에서 사용되고 있다.

 

XML(eXtensible Markup Language)

- XML (확장 가능한 마크업 언어): HTML을 확장하여 사용할 수 있는 마크업 언어이다.

XML은 개발자가 태그를 추가하여 데이터를 구조화하는 데 사용됩니다. 몇 가지 특징을 가지고 있다.

  1. 대소문자 구분이 있음.
  2. 시작 태그와 끝 태그는 반드시 한 쌍으로 작성되어야 함.
  3. 주로 UTF-8 인코딩을 사용.

HTML -> XML -> XHTML로 발전하며, XHTML은 HTML5에 흡수되었다.

 

xml 코드 예시

 

- Mordern Web에서 잘 사용하지 않는 태그

  1. <br>: 한 줄 바꿀 때만 사용되며, 여백 조절은 주로 CSS를 사용합니다.
  2. XHTML에서는 <br>만 사용하면 에러가 발생할 수 있으며, XHTML은 HTML5에 흡수되었습니다.

시맨틱(semantic) 태그

시맨틱 태그는 시각적인 효과보다는 의미를 전달하는 태그로,

검색 엔진이나 스크린 리더 등에서 의미 있는 정보를 전달하는 데 중요

 

몇 가지 시맨틱 태그 예시:

  • <p>: 문단
  • <h1>: 제목
  • <nav>: 네비게이션

 

 

 

<header> - 제목

<nav>      - 네비게이션

<section> -주제별 기사(글)

<article>  - 기사(글)

<aside>   - 배너, 광고 등등

<footer>   - 꼬릿말

 

'▶공부' 카테고리의 다른 글

HTML의 <input> 태그에 대해  (0) 2023.11.23
코딩 공부 시작 #2  (0) 2023.11.21
코딩 공부 시작  (2) 2023.11.21

댓글