안녕하세요. 웹 사이트 개발에 필요한 언어을 꼽으라 하면 HTML, CSS, JS를 빼놓을 수 없습니다. 만약 웹 사이트 제작, 수정 등의 외주를 맏기시거나 개발을 시작하시는 분 또는 웹 사이트 운영하시는 분이라면 오늘 알려드릴 이 차이점만 아셔도 어떤 작업을 위해서는 어떤 언어가 필요한지 바로 캐치 하실 수 있을겁니다.
이번 시간에는 웹 사이트 구성의 3가지 요소인 HTML, CSS, JS의 차이점 대해 알아보겠습니다.
웹 사이트 개발이란?
개인이나 집단(회사, 조직 등)이 웹 페이지나 웹 어플리케이션을 만드는 과정이며, 웹 사이트 개발 플로우인 기획, 디자인, 개발, 배포 모든 과정을 의미합니다. 소규모의 사이트를 제작한다면 한 명의 개발자가 진행하기도 하지만 규모가 있다면 프론트엔드, 백엔드 분야로 나누어 여러 명의 개발자가 투입됩니다.
언어 소개
HTML (Hyper Text Markup Language)
웹 페이지를 만들 때 가장 기본이 되는 언어입니다. 웹 페이지의 구조/레이아웃을 정의하고 데이터를 표현하는 역할을 합니다.
<html>
<head></head>
<body>
<div class="">Hello World</div>
</body>
</html>위와 같이 HTML 코드는 화면의 구조에 대해 표현하는 언어입니다.
html, head, body, div는 태그라고 읽으며 class는 속성이라고 읽습니다.
태그 안에 태그를 넣을 수 있으며 계층 표현을 통해 화면 구조를 작성합니다.
CSS (Cascading Style Sheets)
웹 페이지를 꾸밀 때 사용하는 언어입니다. 다르게 말해보자면 문서를 시각적으로 표시하는 방법을 지정할 수 있는 언어입니다. 웹 사이트의 모든 구성요소는 박스를 기반으로 표현합니다. 박스의 크기를 조정하거나 색상을 입히는 등의 역할을 합니다.
<html>
<head>
<style>
div {
color: red;
}
.font-color-green {
color: green;
}
#font-color-blue {
color: blue;
}
</style>
</head>
<body>
<div>Hello Red World</div>
<div class="font-color-green">Hello Green World</div>
<div id="font-color-blue">Hello Blue World</div>
<div style="color: yellow">Hello Yellow World</div>
</body>
</html>상위에 적은 HTML 코드에 CSS 관련 코드를 추가하였습니다. 코드를 해석해보면 각 div는 red, green, blue, yellow로 글자 색이 표현됩니다. CSS는 태그, class, id, style 속성 총 4가지 방법을 통해 지정할 수 있습니다.
JS (Javascript)
HTML, CSS만으로 이루어진 정적인 웹 페이지를 사용자와 상호작용 할 수 있게 만들어주는 언어입니다. 버튼을 클릭했을 때 어딘가로 이동한다던지, 로그인이나 게시판 조회 등을 통해 서버와 상호작용을 할 수 있게 하는 언어입니다.
<html lang="ko">
<head>
<title>테이블 만들기</title>
<script type="text/javascript">
let rows = prompt("Row를 몇 개 만드시겠습니까?");
let cols = prompt("Column을 몇 개 만드시겠습니까?");
if (rows == "" || rows == null) {
rows = 10;
}
if (cols== "" || cols== null) {
cols = 10;
}
createTable(rows, cols);
function createTable(rows, cols) {
let j = 1;
let output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
for (let i = 1; i <= rows; i++) {
output = output + "<tr>";
while (j <= cols) {
output = output + "<td>" + i * j + "</td>";
j = j + 1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>테이블 만들기 예시를 가져와보았는데요. 많은 로직이 들어가있지 않지만, 복잡하게 느껴지실거예요. 위와 같이 JS 코드는 화면에서 처리할 수 있는 동적인 비즈니스 로직을 수행하는 역할을 담당하고 있습니다.
마무리
어떠셨나요? 화면을 이루는 HTML, CSS, JS 코드 각각이 수행하는 역할이 무엇인지, 차이가 어떻게 되는지 잘 와닿으셨을 지 모르겠어요. 앞으로 개발 관련 이야기를 풀어보려 합니다. 많관부!
'개발' 카테고리의 다른 글
| 웹 사이트 개발 방법 비교 - 3가지 방법 (1) | 2025.03.16 |
|---|