So far, we have learned syntax of JavaScript. We've covered data type, variable, constant, and a few operators. In this chapter, we are going to learn concrete, key techniques to control a web browser, which is one of the things you can do through JS.

First, let's look at the web page on the left side.

I want to make the background color of the page turn black when the night is clicked. To do this, when you look at the code on the right side for the  tag, which applies to the entire web page, I'm going to add a style attribute.

And for values of the style attribute, another language called CSS will be used.

CSS is completely different from HTML or JavaScript and describes the style of a document. I'm going to set background-color to black and reload the page.

And the result is like this. And then if you add color:white, the font color has now changed to white.

So, when I click the night button like this, if we can change the style attribute of the body tag, that means we can do whatever we want to do.

Think yourself about what I just said. By the way, for HTML pages, we can modify the code to get the desired result like this.

But that means the style will stay the same always. In other words, HTML is a static language, which means you cannot make variations once the page is loaded.

But let's see what you can do by using JS to control the screen when you click the night button.

Let me first delete this part and reload the page. If you click the button, how will the  tag change? 1, 2, 3 Ta-da!

As you see, the value of style="background-color" is changing between black and white. So, in order to do this, there are some intelligent parts we need.

First, do you remember I mentioned earlier that CSS is used as values of the style attribute?

So, while we don't need to know everything about CSS, we do need to know some of it, at least. Second, to apply this style attribute to the body tag, we need to tell to whom we want to give this attribute.

We need to know how to tell the web browser that the style here is targeting the body tag by using JavaScript.

From now on, we are going to move to two important topics.

First, we will look into the most fundamental and important rules of CSS. Second, we are going to learn how to use JavaScript to select specific tags that you want to control.

Since these are very important topics, let's take a break here and continue in the next chapter.

WEB2 JavaScript - 8.웹브라우저 제어

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB


생활코딩

JavaScript를 이용한 웹 브라우저 제어 소개

JavaScript로 웹 페이지의 배경색을 변경하는 방법을 설명.

body 태그의 style 속성을 CSS를 사용하여 변경하는 예시를 제시.

HTML의 정적 특성과 JavaScript의 동적 제어

HTML은 페이지 로드 후 변경이 불가능한 정적 언어임을 설명.

JavaScript를 사용하여 버튼 클릭 시 body 태그의 style 속성을 동적으로 변경하는 예시를 보여줌.

JavaScript를 이용한 웹 브라우저 제어를 위한 주요 학습 내용

CSS의 기본 규칙과 JavaScript를 사용하여 특정 태그를 선택하고 제어하는 방법을 학습할 것을 예고.

지금까지 JavaScript의 기본적인 문법을 배웠습니다. 이제 **JS를 사용하여 웹 브라우저를 제어하는 핵심 기술**을 배우게 됩니다. 첫 번째 목표는 "night" 버튼 클릭 시 웹 페이지 배경색을 검은색으로 바꾸는 것입니다.

웹 페이지 전체에 적용되는 `<body>` 태그에 `style` 속성을 추가하여 배경색을 변경할 수 있습니다. **`style` 속성의 값으로는 CSS라는 별도의 언어가 사용**됩니다. CSS는 HTML, JavaScript와는 완전히 다른, 문서의 스타일을 기술하는 언어입니다.

`background-color: black`과 `color: white`를 CSS에 추가하면 배경색과 글자색을 변경할 수 있습니다.  **JavaScript를 사용하여 `<body>` 태그의 `style` 속성을 변경**함으로써 다양한 효과를 낼 수 있습니다.

HTML은 정적인 언어이므로 페이지가 로드된 후에는 스타일을 변경할 수 없습니다. 하지만 **JavaScript를 사용하면 "night" 버튼 클릭과 같은 이벤트에 따라 화면을 동적으로 제어**할 수 있습니다.

버튼을 클릭하면 `style=background-color`의 값이 검은색과 흰색 사이에서 변경됩니다. **이를 통해 HTML로는 불가능한 동적인 스타일 변경이 가능**해집니다.

🔑 핵심 학습 요소: CSS와 태그 선택

이러한 동적 제어를 위해서는 몇 가지 중요한 요소가 필요합니다. 첫째, **`style` 속성의 값으로 사용되는 CSS의 기본적인 규칙을 이해**해야 합니다. 둘째, **JavaScript를 사용하여 특정 태그를 선택하고 제어하는 방법**을 알아야 합니다.

요약하자면, 앞으로 CSS의 기본 규칙과 JavaScript를 사용하여 원하는 태그를 선택하는 방법을 배우게 될 것입니다. **이 두 가지 주제는 웹 브라우저 제어의 핵심**입니다.

지금까지 자바스크립트의 문법을 배웠습니다. 데이터 타입, 변수, 상수, 그리고 몇 가지 연산자를 다뤘는데요. 이번 시간에는 자바스크립트를 통해 할 수 있는 것 중 하나인 웹 브라우저를 제어하는 핵심 기술을 배워보겠습니다.

먼저 왼쪽에 있는 웹 페이지를 보겠습니다.

여기서 'night'를 클릭했을 때 페이지 배경색이 검은색으로 바뀌게 하고 싶습니다. 이를 위해 전체 웹 페이지에 적용되는 body 태그의 오른쪽 코드를 보면 style 속성을 추가할 것입니다.

그리고 style 속성의 값으로는 CSS라는 또 다른 언어가 사용됩니다.

CSS는 HTML이나 자바스크립트와 완전히 다르며 문서의 스타일을 설명합니다. background-color를 black으로 설정하고 페이지를 새로 고치겠습니다.

결과는 이렇습니다. 그리고 color:white를 추가하면 글자 색이 흰색으로 바뀝니다.

그래서 이렇게 'night' 버튼을 클릭했을 때 body 태그의 style 속성을 변경할 수 있다면, 우리가 하고 싶은 것은 무엇이든 할 수 있다는 의미가 됩니다.

제가 방금 한 말을 스스로 생각해보세요. 그런데 HTML 페이지에서는 이렇게 코드를 수정하여 원하는 결과를 얻을 수 있습니다.

하지만 이는 스타일이 항상 동일하게 유지된다는 의미입니다. 다시 말해, HTML은 정적인 언어이므로 페이지가 로드된 후에는 변경할 수 없습니다.

하지만 'night' 버튼을 클릭했을 때 자바스크립트를 사용하여 화면을 제어하면 무엇을 할 수 있는지 봅시다.

먼저 이 부분을 삭제하고 페이지를 새로 고치겠습니다. 버튼을 클릭하면 body 태그가 어떻게 변할까요? 하나, 둘, 셋, 짜잔!

보시다시피 style="background-color"의 값이 검은색과 흰색 사이에서 변경되고 있습니다. 이를 위해서는 몇 가지 필요한 지능적인 부분이 있습니다.

첫째, style 속성의 값으로 CSS가 사용된다고 앞서 언급했던 것을 기억하시나요?

따라서 CSS에 대한 모든 것을 알 필요는 없지만, 적어도 몇 가지는 알아야 합니다. 둘째, 이 style 속성을 body 태그에 적용하려면 누구에게 이 속성을 부여할지 알려줘야 합니다.

자바스크립트를 사용하여 여기에 있는 스타일이 body 태그를 대상으로 한다는 것을 웹 브라우저에 알리는 방법을 알아야 합니다.

지금부터 두 가지 중요한 주제로 넘어갈 것입니다.

먼저 CSS의 가장 근본적이고 중요한 규칙을 살펴보겠습니다. 두 번째로, 자바스크립트를 사용하여 제어하려는 특정 태그를 선택하는 방법을 배울 것입니다.

이것은 매우 중요한 주제이므로 여기에서 잠시 쉬었다가 다음 챕터에서 계속하겠습니다.