안녕하세요, aITi입니다. 웹사이트 개발에 필요한 언어을 꼽으라 하면 HTML, CSS, JS를 빼놓을 수 없습니다. 만약 웹사이트 제작, 수정 등의 외주를 맏기시거나 개발을 시작하시는 분 또는 웹사이트 운영하시는 분이라면 오늘 알려드릴 이 차이점만 아셔도 어떤 작업을 위해서는 어떤 언어가 필요한지 바로 캐치 하실 수 있을겁니다.
이번 시간에는 웹사이트 구성의 3가지 요소인 HTML, CSS, JS의 차이점 대해 알아보겠습니다.
웹사이트 개발이란?
개인이나 집단(회사, 조직 등)이 웹 페이지나 웹 어플리케이션을 만드는 과정이며, 웹 사이트 개발 플로우인 기획, 디자인, 개발, 배포 모든 과정을 의미합니다. 소규모의 사이트를 제작한다면 한 명의 개발자가 진행하기도 하지만 규모가 있다면 프론트엔드, 백엔드 분야로 나누어 여러 명의 개발자가 투입됩니다.
참고) 개발자가 아니신 분들이 웹사이트를 만들 때는 외주를 주거나 노코드툴을 사용하는데요, 외주 사이트로는 크몽을 추천드리고, 노코드툴은 아임웹을 추천드립니다.
간략 소개
우선 세 가지에 대해 간략하게 알아보겠습니다.
HTML (Hyper Text Markup Language)
웹페이지를 만들 때 가장 기본이 되는 언어입니다. 또한 웹페이지의 구조/레이아웃을 정의하고 데이터를 표현하는 역할을 합니다.
CSS (Cascading Style Sheets)
웹페이지를 꾸밀 때 사용하는 언어입니다. 어렵게 이야기하자면 문서를 표시하는 방법을 지정하는 역할을 합니다. 웹사이트는 모든 구성요소는 박스를 기반으로 표현하는데요, 박스의 크기를 조정하거나 색상을 입히는 등의 작업을 CSS 코드로 처리합니다.
JS (Javascript)
정적인 웹페이지를 생동감 있게 만들어주는 언어입니다. 버튼을 클릭했을 때 어딘가로 이동한다던지, 로그인 등을 통해 서버와의 상호작용을 할 수 있게 하는 등 웹사이트를 동적인 작업을 할 수 있게 만들어줍니다. Web 2.0을 이끈 장본인이죠.
각 언어에 대해 간략하게 살펴보았는데요, 그럼 각 언어가 실제 웹사이트에서 어떻게 작성되고 있는지 살펴보겠습니다.
상세 소개
HTML
<html>
<head></head>
<body>
<div class="">Hello World</div>
</body>
</html>참고1) HTML 코드는 “꺽쇄” 또는 “부등호”라고 불리는 <, > 문자를 사용하여 표기합니다.
참고2) HTML 코드는 를 작성하여 열면 내용을 작성하고 /(slash)를 넣은 로 닫아주어야 합니다.
HTML 구성 코드를 작성해보았는데요, 이와 같이 HTML 코드는 화면 구성하는 전체적인 구조를 작성하는 역할을 하고 있습니다.
위 코드는 아래와 같이 해석할 수 있습니다.
최상위 html이라는 *태그 안에 head, body *태그가 들어있습니다.
body *태그 안에는 div *태그가 들어있습니다.
div *태그 안에는 Hello World라는 텍스트가 작성되어있습니다.
div *태그 안에는 class라는 *속성이 존재하며 그 값은 비어있습니다.
* 태그 – <html> <head> <body> <div> 이와 같은 형태를 띄고 있는 문법을 html 태그, head 태그, body 태그, div 태그라 합니다.
* 속성 – div 태그에서만 사용하기 위한 어떠한 값을 사용할 건데, 그 값을 사용하기 위한 키의 이름을 속성(attribute)이라고 합니다.
CSS
<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>기존 코드에 CSS 코드를 추가하였고 위 코드의 결과는 각 태그에 텍스트로 적혀진 것처럼 빨간색, 초록색, 파란색, 노란색 글자로 표현됩니다. 이와 같이 CSS 코드는 화면을 표현하는 방법에 대해 작성하는 역할을 하고 있습니다.
CSS 코드를 적용하는 방법은 4가지가 있습니다.
1. 태그 지정
2. class 속성을 통해 지정
3. id 속성을 통해 지정
4. style 속성을 통해 지정
위 4가지 방법 중 프론트엔드 개발 현업에서는 2번 class를 통해 지정하는 방법을 채택하고 있으며 이 말은 곧 대부분의 웹사이트가 class를 통해 지정하고 있다고 이해하셔도 좋습니다. 혹시 이 글을 읽고 있는 독자 분이 개발자라면 “CSS 우선순위”라는 키워드를 따로 검색하여 공부해보세요!
JS
<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 코드는 화면을 구성하는 복잡하고 동적인 로직을 실행하는 역할을 하고 있습니다.
* 위 코드의 결과는 직접 복사/붙여넣기를 통해 실행해보세요! 2번의 물음에 숫자로 잘 대답하시면 테이블이 잘 만들어질 것입니다.
마무리
자, 어떠셨나요? 이제는 HTML, CSS, JS 코드가 각각이 수행하는 역할이 무엇인지 더불어 차이점까지 함께 이해하실 수 있으실 것이라 생각합니다. 앞으로 개발과 관련된 내용도 종종 연재할 예정인데요, 많은 관심 부탁드리겠습니다.