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 = "";
}
🍿 더 자세한 내용은 영상에서 보실 수 있습니다.
유튜브에서 영상 보기