지식 · IT·데이터·DX
HTML · CSS · 자바스크립트
HTML / CSS / JavaScript
📂IT·데이터·DX⏱읽기 1분📊입문🔗관련 4
HTML이란?
한 줄 정의
웹페이지를 이루는 세 가지 기본 요소 — HTML은 구조(뼈대), CSS는 디자인(옷), 자바스크립트는 동작(움직임).
⚡ 3줄 요약
- HTML=구조(뼈대)
- CSS=디자인(옷)
- JS=동작(움직임)
모든 웹페이지는 이 셋으로 만들어집니다. HTML은 제목·문단·버튼 같은 '내용과 구조(뼈대)'를, CSS는 색·글꼴·배치 같은 '디자인(옷)'을, 자바스크립트는 클릭 반응·데이터 처리 같은 '동작(움직임)'을 담당합니다. 집에 비유하면 골조(HTML)·인테리어(CSS)·전기 설비(자바스크립트)입니다.
비개발자도 이 셋의 역할만 알면 큰 도움이 됩니다. 바이브 코딩으로 사이트를 만들 때 'AI야, 이 글자 색(CSS)을 바꿔줘', '이 버튼을 누르면 창이 뜨게(자바스크립트) 해줘'처럼, 무엇을 고쳐 달라 해야 할지 정확히 요청할 수 있기 때문입니다.
💡 쉽게 말하면
집으로 치면 골조(HTML)·인테리어(CSS)·전기와 기계장치(JS) — 웹페이지의 3요소입니다.
실무에서 왜 중요한가
웹의 가장 기본 3요소입니다. 역할을 알면 'AI에게 어디를 고쳐 달라 할지'가 명확해집니다.
유래와 출처
HTML은 팀 버너스리(Tim Berners-Lee)가 1991년에, 자바스크립트는 브렌던 아이크(Brendan Eich)가 1995년에, CSS는 호콘 비움 리(Håkon Wium Lie)의 제안으로 1996년에 등장하며 웹의 3대 기본 기술이 됐습니다.
출처 · Berners-Lee(HTML,1991) · Eich(JS,1995) · Wium Lie(CSS,1996) · 원문 보기
사례로 이해하기
예를 들어, 세 요소가 협력해 버튼을 만드는 과정을 봅시다.
- 구조(HTML) — '신청' 버튼이라는 요소를 페이지에 놓습니다.
- 디자인(CSS) — 그 버튼을 초록색·둥근 모양으로 꾸밉니다.
- 동작(JS) — 버튼을 누르면 신청 창이 뜨게 만듭니다.
- 협력 — 셋이 함께 '보기 좋고 작동하는' 버튼이 됩니다.
- 요청 — 고칠 땐 '색(CSS)/동작(JS)'처럼 어느 요소인지 짚어 AI에 요청합니다.
관련 용어
프론트엔드 · 백엔드프론트엔드는 사용자가 보는 화면(앞단), 백엔드는 그 뒤에서 데이터·로직을 처리하는 서버 쪽(뒷단). 웹 개발의 두 축.반응형 웹화면 크기에 맞춰 레이아웃이 자동으로 바뀌어, PC·태블릿·모바일 어디서나 보기 좋게 만드는 웹 디자인 방식.프레임워크 · 라이브러리라이브러리는 필요할 때 꺼내 쓰는 '기능 모음집', 프레임워크는 그 위에서 개발의 '틀·골격'을 제공하는 것. 바퀴를 다시 발명하지 않게 해준다.바이브 코딩코드를 직접 짜지 않고, 만들고 싶은 것을 자연어로 AI에게 설명해 프로그램을 완성하는 새로운 개발 방식.
이 용어와 연결된 교육
📚디지털 트랜스포메이션나눔경영컨설팅 기업교육 · 대면/온라인과정 보기 →이 주제로 사내 교육이 필요하신가요?
담당자 맞춤 커리큘럼·견적을 바로 받아보세요.
자주 묻는 질문
직접 코딩하지 않아도 '역할'만 알면 충분히 도움이 됩니다. AI가 실제 코드는 만들어 줍니다.
이름만 비슷할 뿐 다른 언어입니다. 웹 동작은 자바스크립트가 담당합니다.
웹을 만들려면 기본을 다 압니다 — 구조(HTML)·디자인(CSS)·동작(JS)이 함께 작동하기 때문입니다.
전혀 다른 언어입니다. 이름만 비슷할 뿐 용도·문법이 다릅니다.