글쓰는 개발자
[개발협업을 위한 개발 상식] 웹의 발전과정 (2) 본문
1. javascript의 발전
앞에서 이야기 했듯이 초기의 웹은 웹페이지(HTML)혹은 서버페이지(JSP, ASP, PHP)등으로 이루어져 있었고 동적인 페이지 변경을 위해서는 Form에 데이터를 담아서 서버페이지를 통해서 결과를 받는 방식이었다.
하지만 javascript가 생기면서 HTML내에 script 태그를 사용해 동적인 데이터 변경을 할 수 있게 되었다. javascript의 장점은 페이지의 이동이나 깜빡거림 없이 또한 서버와의 통신이 필요없이 값을 동적으로 변경시킬수 있다는데에 있는데 이전과 같이 php를 통하지 않고 데이터 처리 또는 계산된 값을 나타낼 수 있다. 하지만 HTLM 태그에 입력된 값을 가져오기 위해서는 특별한 방식을 사용하는데 document.getElementById 같은 방식으로 html에 id값에 접근하는 것이다.
<html>
<head>
<script>
function sum() {
var add1 = document.getElementById('add1').value;
var add2 = document.getElementById('add2').value;
var sum = Number(add1) + Number(add2);
document.getElementById('result').value = sum;
}
</script>
</head>
<body>
<input id='add1'> + <input id='add2'> <button onclick="sum()">sum</button>
<br/>
<br/>
<input id='result'>
</body>
</html>javascript에서 sum이라는 함수를 생성하고 이는 add1과 add2라는 id값을 가진 input의 값(value)를 가져와서 Number(숫자) 형으로 더하고 그 결과를 result라는 id 값을 가진 input에 넣는 역할을 하는 것이다. 이 sum 함수는 button 태그에 onclick 이라는 이벤트에 연결시켜서 버튼이 클릭이 되면 동작하도록 한다.
이와 같이 동적인 방식으로 계산과 화면 전환이 가능해 졌으며 이 script 태그는 다음과 같은 방식으로 분리가 가능했기에 기능(javascript)와 화면(html)의 분리또한 가능해 졌다.
<script src='index.js'></script>
2. inline 방식의 stylesheet
html은 기본적으로 태그 방식으로 이루어 진다. 하지만 여기에 박스의 크기나 그 내부의 글씨 폰트, 크기, 색 및 배치 등을 변경하기 위해서는 무엇이 필요할까? 초기의 HTML은 style이라는 속성을 제공했다. style 속성은 해당 태그 및 그 하위 태그에 대한 다양한 디자인 속성을 지정할 수 있게 되었다. 예를들어 input에 높이를 40px로, 글자색을 빨강으로 하고 싶으면 다음과 같이 하면된다.
<input style="height: 40px; color: red;">각 디자인 속성의 분리는 세미콜론(;)으로 하며 결과는 다음 화면과 같다.
하지만 inline 속성은 직접 필요한 태그에 style로 시작되는 속성을 지정하는것으로 시작되기 때문에 재사용성이 굉장히 어렵고 html 자체를 복잡하게 만드는 불편함이 존재한다. 따라서 javascript처럼 style 태그 안에 스타일 태그를 따로 분리 시킬수 있다.
<style>
#result {
height: 40px;
color: red;
}
</style>결과는 inline과 똑같지만 result라는 id 값을 가진 여러개의 항목에 일괄 적용이 가능하다. id는 기본적으로 하나의 태그에 할당되는 값이기 때문에 class 속성에 여러개의 블록을 지정해서 위 속성을 적용할 수 있다.
물론 javascript처럼 css(Cascading Style Sheets)라는 파일로 분리해서 사용할 수 있다.
<link rel="stylesheet" href="mystyle.css">
'Development > 비개발자를 위한 IT지식' 카테고리의 다른 글
| 개발자가 되기 어렵게 만드는 요인 (0) | 2024.04.29 |
|---|---|
| 디자인에 관한 개발자의 시선 (0) | 2020.10.28 |
| [개발협업을 위한 개발 상식] 웹의 발전과정 (1) (0) | 2020.10.27 |
