웹은 어떻게 동작하나요(HTML,JS,CSS,브라우저의 관계)

웹페이지는 보통 HTML, CSS, JavaScript가 동작하면서 만들어진다

- HTML : 웹페이지 구조를 만듦

- CSS : 웹페이지 디자인

- JavaScript : 웹페이지의 동작

 

[DOM과 관련된 내용,,,]

- 브라우저 : 그 HTML을 DOM Tree로 변환

- javascript : 위 DOM Tree를 읽거나 수정하면서 웹페이지의 동작을 만듦

 

그러니까,, 개발자가

- HTML 작성

- CSS 작성

- JavaScript 작성

- 서버에 올리기

이렇게 하면

사용자 브라우저가

- 서버에서 HTML / CSS / JS 파일을 받아오기

- HTML로 DOM Tree 만들기

- CSS 적용

- JavaScript 실행

- JavaScript가 DOM을 조작

요런 역할을 기반으로 웹이 동작하는데,,

 

예를들어보면,

웹 페이지에 버튼 하나와, 결과 출력 공간을 만들고 싶으면

<button id="btn">클릭</button>     # 버튼 하나
<div id="result"></div>           # 결과 출력 공간 하나

<script src="/static/app.js"></script>

개발자는 이렇게 HTML을 작성할 수 있고

위 코드는 화면에 단순하게

[클릭] 버튼과

[결과 출력 빈 공간]

이라는 화면만 덩그러니 떠 있을 것이다

그래서 이런 버튼을 눌렀을 때 실제로 어떤 동작을 발생시키기 위해서 JavaScript가 필요하고

const button = document.getElementById("btn");    # id = btn인 버튼 찾기
const result = document.getElementById("result"); # id = result 찾기

button.addEventListner("click", function () {
	result.textContent = "버튼을 눌렀습니다!";
});
# 버튼이 클릭되면, result div 안에 "버튼을 눌렀습니다!"라는 글자 넣기

이런식으로 javascript를 작성해 html과 연결시켜줄 수 있고,

이런 연결과정에서 DOM Tree가 필요하다

(아마 다음글에서 DOM에 대해 정리할 예정)

 

 

 

 

 

번외)

<script>태그에 대하여,,

-> JavaScript를 연결하는 통로

HTML에서 JavaScript를 실행할 때는 보통 <script> 태그를 사용,,!

브라우저가 HTML을 읽다가 <script>태그를 만나면 태그 내용을 JavaScript 코드로 실행한다

<script>
 alert("hello");
</script>

 

외부 javascript 파일을 불러올 수도 있다ㅏ

<script src="/static/app.js"></script>