Skip to Main Content

프로그래밍 언어 가이드: HTML/CSS/자바스크립트

코딩 학습 가이드는 소프트웨어학과 송오영교수님이 검수하였습니다.

HTML/CSS/자바스크립트

It makes my head explode when there are people who think you can do everything in HTML.
HTML로 모든 것을 할 수 있다고 생각하는 사람들이 있으면 머리가 터질 것 같다.

- James Gosling, Creator of Java Programming language

        헬로우 월드 예제

 
1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello, world!
    </body>
</html>

HTML/CSS/자바스크립트 추천도서

새로운
CSS 레이아웃
레이철 앤드루
 

웹 개발 레시피
브라이언 호건, 크리스 웨런, 마이크 위버, 크리스 존슨, 애런 고딘

HTML5
웹소켓 프로그래밍
바네사 왕, 프랭크 살림,
피터 모스코비츠

HTML5 web performance
제이 브라이언트,
마이크 존스

HTML/CSS/자바스크립트의 역사

HTML

HTML의 시작은 1980년 유럽 입자 물리 연구소의 팀 버너스 리(Tim Berners-Lee)가 인콰이어를 제안하면서 시작되었습니다.
인콰이어는 연구원들이 문서를 이용하고 공유하기 위한 체계였습니다.
1991년 팀 버너스 리가 최초의 웹사이트를 만들었고, 이후 W3C(World Wide Web Consortium)이라는 기관에서 웹의 표준을 만들고 점차 발전 시켰습니다.

 

HTML 최신 표준 HTML5에 대한 더 자세한 사항은 다음 페이지를 참고하면 됩니다.
 W3C HTML5 : W3C Recommendation 28 October 2014

CSS

과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었습니다.
그러다보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았습니다.
이에 따라 W3C(World Wide Web Consortium)에서는 디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자는 목적으로 CSS를 발표했습니다.
HTML4부터 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다.

 

최신 CSS 표준 권고안에 대한 더 자세한 정보는 다음 페이지를 참고하면 됩니다.
 W3C CSS Snapshot 2017 : W3C Working Group Note, 31 January 2017

CSS 표준 권고안의 모듈별 현재 상태에 대해 자세히 알고 싶다면, 다음 페이지에서 확인할 수 있습니다.
 W3C CSS current work & how to participate

자바스크립트

1995년의 웹브라우저 시장은 넷스케이프(Netscape)의 네비게이터(Navigator)가 지배하고 있었습니다.
넷스케이프는 가벼운 프로그램 언어를 통해 HTML 페이지에 움직임을 주고 싶어 프로그램 언어를 추가하기로 결정했습니다.
그래서 Brendan Erich(브랜든 아이크)를 고용했는데 그는 무려 10일 만에 언어를 완성했습니다.
그 언어의 이름은 '모카'였고, 그 해 9월 '라이브스크립트'라는 이름으로 바뀌었습니다.
또 다시 같은 해 12월, 네스케이프와 썬 마이크로시스템즈는 '라이브스크립트'를 '자바스크립트'라고 최종 이름을 결정하였습니다.
자바와 이름은 유사하지만 전혀 다른 언어입니다. 당시 자바의 유명세를 이용해 마케팅 차원에서 의도적으로 지은 것입니다.


자바스크립트 최신 표준에 대한 더 자세한 사항은 다음 페이지를 참고하면 됩니다.
 Standard ECMA-262

또한, 자바스크립트 언어에 대한 더 자세한 설명은 모질라 개발자 사이트에서 확인할 수 있습니다.
 MOZILLA DEVELOPER NETWORK : JavaScript

HTML의 장단점

      HTML

HTML 장점 HTML 단점

1. 웹 문서의 표준입니다.
2. 파일 용량이 작아 클라이언트·서버 간 빠른 문서 전달이 가능합니다.
3. 별도의 전용 프로그램이 아닌 메모장으로도 html을 작성할 수 있습니다.
4. 컴퓨터 시스템과 운영체제에 독립적입니다.

1. 내용의 의미보다는 내용을 표현하는 태그에 치중되어 있습니다.
2. 구조화된 정보의 표현과 검색이 어렵습니다.
3. 태그가 제한적이어서 융통성과 확장성이 부족합니다.
4. 내용의 정확성, 유효성 검증이 어렵습니다.

      CSS

CSS 장점 CSS 단점

1. HTML의 기능을 확장합니다.
2. 흐름이 같은 문서양식으로 전체를 구성할 수 있습니다.
3. 문서의 형식을 쉽고 다양하게 구성할 수 있습니다.
4. 사용 환경의 영향을 받지 않습니다.

1. Netscape와 Explore가 서로 다른 방식으로 스타일 시트를 지원합니다.
2. 요소가 많아지고 이에 따라 코드가 늘어나기 시작하면 유지보수에 어려움이 많아집니다.

      자바스크립트

자바스크립트 장점 자바스크립트 단점

1. 인터프리터 언어이기 때문에, 컴파일이 필요한 다른 프로그래밍 언어에 비해 시간이 적게 소요됩니다.
2. 배우기 쉬운 언어입니다.
3. 현대의 모든 브라우저들은 자바스크립트를 지원합니다.
4. 다른 프로그래밍 언어와 완벽하게 호환됩니다.
5. 서버로 데이터를 주고 받지 않아도 브라우저 자체에서 데이터 유효성 검사를 할 수 있습니다.
6. 인터페이스가 풍부합니다.
7. npm 등을 통해 라이브러리를 추가할 수 있습니다.
8. 프론트엔드 뿐만 아니라 백엔드에서도 개발할 수 있습니다.
9. 코드 길이를 줄임으로써 웹 어플리케이션의 성능을 향상시킵니다.

1. 코드는 유저에게 보이기 때문에, 누군가 악의적인 의도로 자바스크립트를 사용할 수 있습니다.
2. 브라우저마다 자바스크립트를 해석하는 방법이 다릅니다.
3. 디버깅 기능이 부족합니다.
4. 단일 상속은 지원하지만 다중 상속은 지원하지 않습니다.
5. 비트 함수가 느립니다.
6. 코드에 하나의 에러만 있어도 자바스크립트 코드가 완전히 렌더링을 중지합니다.

HTML 활용 분야

HTML로는 웹의 구조를 작성하고 CSS로는 웹을 디자인하며 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

HTML, CSS, 자바스크립트는 다음과 같이 설명할 수 있습니다.
- HTML : 집의 뼈대
- CSS : 인테리어
- 자바스크립트 : 보일러, 에어컨 등 생활과 필요한 장치