HTML, CSS, JavaScript가 뭔가요?

웹 프로그래밍을 하려면 반드시 알아야 하는 세가지!
하나도 머리아픈데 셋이나 배워야 하나? 🤮 하고 겁먹을 수도 있지만

막상 배워보면 그닥 어렵지 않다는 걸 알게 됩니다.

이 세가지만 기억하게요.
갖다놓고, 꾸미고, 시킨다!!




🎬 영상 주요 포인트

HTML은 이름과 같이 '마크업 언어'인데 단순히 생각해서, 화면에 이것들이 이런 구조로 놓여 있어라 하고 갖다놓는 수단이에요. CSS는 언어란 말도 안 들어가고 Cascading Style Sheets에요. 'HTML이 올려놓은 이것들은 이렇게 보여라!' 하고 꾸며주는 문서에요. 자바스크립트만이 프로그래밍 언어에 속해요. 원래는 브라우저에서 웹사이트를 돌리는 목적으로 만들어진, 그닥 대우도 잘 못 받는 언어였는데 계속해서 발전을 하고 특히 Node.js가 이걸 브라우저 바깥 세상으로 꺼내오면서 지금은 위상이 Git똥차졌어요. 웹사이트에서 돌아가는 자바스크립트는 브라우저에서 다양한 일을 수행하고 HTML으로 올려놓은 요소들을 변형시키거나 직접 만들어내기까지 해요.

⌨️ 영상에 사용된 예제 코드

index.html

<html lang="ko"> <head> <link rel="stylesheet" href="style.css"/> <script defer tyle="text/javascript" src="script.js"></script> </head> <body> <div id="calculator"> <span>얄팍한 계산기</span><br/> <input id="formula-input" type="text" placeholder="수식을 입력하세요."/> <div id="calc-history"></div> </div> </body> </html>

style.css

#calculator { background-color: #ffbb24; border-radius: 12px; width: 240px; margin: 24px; padding: 24px; text-align: center; } #calculator span { font-size: 1.5em; font-weight: bold; color: white; text-shadow: 0 0 2px rgba(0, 0, 0, 0.33); } #calculator #formula-input { width: 100%; margin-top: 8px; line-height: 36px; font-size: 1.1em; letter-spacing: 3px; border: 0;; text-align: center; } #calculator #formula-input:focus { outline-width: 0; } #calculator #calc-history div { height: 36px; line-height: 36px; margin-top: 1px; background-color: rgba(255, 255, 255, 0.8); } #calculator #calc-history div.invalid { color: tomato; font-weight: bold; }

script.js

var formulaInput = document.getElementById("formula-input"); var calcHistDiv = document.getElementById("calc-history"); formulaInput.addEventListener("keyup", function(e) { if (e.code === "Enter") calculate(); }); function calculate () { // 입력칸의 문자열이 사칙연산 형식이 맞는지 확인 var fm = formulaInput.value; var formulaRegex = /^\d+(.\d+)?[+\-*/]{1}\d+(.\d+)?$/; var formulaValid = formulaRegex.test(fm); var resultText = "노"; if (formulaValid) { // 형식에 맞을 시 식을 계산하고 결과 문자열을 설정 var answer; eval('answer=' + fm); resultText = fm + " = "; resultText += (answer % 1 > 0 ? answer.toFixed(2) : answer.toString()); } // calc-history 상자에 넣을 또 다른 상자를 생성하고 내용을 설정한 뒤 삽입 var resultDiv = document.createElement("DIV"); resultDiv.appendChild(document.createTextNode(resultText)); if (!formulaValid) resultDiv.classList.add("invalid"); calcHistDiv.insertBefore(resultDiv, calcHistDiv.firstChild); // 입력칸은 빈칸으로 formulaInput.value = ""; }

🍿 더 자세한 내용은 영상에서 보실 수 있습니다.





관련 태그의 다른 영상들

HTML과 CSS를 제대로 알아보는 강좌입니다.
# HTML
# CSS
#
HTTPS가 뭐고 왜 쓰나요?
대칭키와 비대칭키 개념과 함께 HTTPS의 목적과 원리를 간략히 알아봅니다.
# HTTPS
# 대칭키
# 비대칭키
# 공개키
# 개인키
# 보안
#
PWA가 뭔가요?
떠오르는 모바일 트렌드! PWA는 뭐고 어떻게 만드는지 알아보기로 해요.
# PWA
# 네이티브 앱
# 웹앱
# 하이브리드 앱
# 크로스 플랫폼
#
GrqphQL이 뭔가요?
REST API와는 또 다른 신선함! GraphQL의 매력을 알아볼까요?
# GraphQL
# REST API
#
REST API가 뭔가요?
웹 개발자라면 꼭 알아야 할 REST API. 쉽게 설명해드립니다.
# REST API
# api
#
앵귤러, 리액트, 뷰가 뭔가요?
프론트엔드에도 프레임워크가 있다? SPA를 알아봅니다.
# Angular
# React
# Vue
# SPA
# 프론트엔드
#
쿠키, 세션, 캐시가 뭔가요?
어렴풋이 알지만 어떻게 다른지 헛갈리는 세 용어. 확실하게 알아보자구요.
# 쿠키
# 세션
# 캐시
#
왜 익스플로러를 싫어하나요?
웹 개발자들의 철천지 원수 익스플로러! 웹표준을 지키자구요.
# 브라우저
# 웹표준
# 크로스 브라우징
# 익스플로러
#
MVC 웹 프레임워크가 뭔가요?
Model? View? Controller? 코드와 함께 쉽게 알아봅니다.
# MVC
# 동적 웹
# 프레임워크
# 라이브러리
#
정적 웹은 뭐도 동적 웹은 뭔가요?
왜 HTML, CSS, JS로는 부족할까요? 정적과 동적 웹의 차이를 알아봅니다.
# 정적웹
# 동적웹
#
HTML, CSS JavaScript가 뭔가요?
웹사이트 개발의 핵심이 되는 삼총사! '갖다놓고 꾸미고 시킨다'를 기억하세요.
# HTML
# CSS
# 자바스크립트
#
# 브라우저
...
🌏 Why not change the world?