들어가기 전에
Javascript를 이용하면 웹 브라우저를 제어할 수 있습니다. 이미 만들어져 있는 배경 색을 바꿀 수도 있고, 글자 색을 바꿀 수도 있습니다. 어떻게 이런 제어가 가능한 것인지 간단히 알아봅시다.
학습 목표
Javascript에서 웹 브라우저 제어가 가능하다는 것을 알고, 간단하게 이해해 봅시다.
핵심 단어
- 웹 브라우저 제어
- style, css
강의 듣기
들어가기 전에
Javascript를 이용하면 웹 브라우저를 제어할 수 있습니다. 이미 만들어져 있는 배경 색을 바꿀 수도 있고, 글자 색을 바꿀 수도 있습니다. 어떻게 이런 제어가 가능한 것인지 간단히 알아봅시다.
학습 목표
Javascript에서 웹 브라우저 제어가 가능하다는 것을 알고, 간단하게 이해해 봅시다.
핵심 단어
강의 듣기
웹 브라우저 제어
강의 초반에 봤던 이 웹페이지, 기억하시나요?
night/day 버튼을 누를 때마다 화면과 글자의 색깔이 바뀌는 웹페이지였습니다.
이렇게 Javascript를 이용하면 웹 브라우저를 제어할 수 있는데요, 이번 강의부터 어떻게 이러한 일이 가능한지에 대해서 살펴볼 겁니다.
시작하기 전에 간단하게 몇 가지를 짚고 넘어가 봅시다. 먼저 이 웹사이트의 색깔이 이렇게 바뀌기 위해서는 <body> 태그의 속성이 바뀌어야 한다는 사실입니다.
<body>
<body style="background-color: black; color: white;">
원래 웹페이지에서는 첫 줄과 같이 <body> 태그만 존재했습니다. 하지만 원래의 <body> 태그에서 두 번째 줄과 같이 style을 지정해주면, 배경색은 검정색으로, 글자 색은 하얀색으로 바뀌게 됩니다. 이 때 style 속성에 들어있는 간단한 코드를 css라고 부릅니다. css는 디자인을 위한 언어이고, HTML, Javascript와는 완전히 다른 언어입니다.
하지만 HTML은 한 번 표시되면 바뀌지 않는 정적인 언어입니다. 즉 <body> 태그가 만들어지면, 저 style 속성 값을 바꿀 수 없다는 이야기입니다. 지금부터 우리가 만들고자 하는 웹페이지는 Javascript를 이용해 이 문제를 해결할 겁니다.
생각해보기
1) 직접 body 태그의 style 속성을 바꾸어 배경 색은 파란색, 글자 색은 회색으로 만들어 봅시다.
comment
<body style = 'background-color:black ; color:grey">
버튼을 눌렀을 때 이게 가능하게 하려면,
<input type='button' value='button' onclick='document.querySelector('body").background-color='black' ;
document.querySelector('body').color="grey"'>
로 수정해주면 된다.
<body style="background-color:blue;color:gray;">
<body style="background-color: blue; color:gray";>
</body>
<body style="background-color:blue; color:gray;">
<body style="background-color: blue; color: gray;">
직접 body 태그의 style 속성을 바꾸어 배경 색은 파란색, 글자 색은 회색으로 만들어 봅시다.
<body>
<body style="background-color: blue; color: gray;">
<body style="background-color:blue; color:gray;"></body>
<body style="background-color: blue; color: gray;"></body>
<body style="background-color:blue ; color: gray;"></body>
<body style="background-color: blue; color: gray;"></body>
<body style="background-color: blue; color: gray;"></body>
<body style="background-color: blue ; color: gray;"></body>
<body style=“background-color:blue; color:gray;”>
<body style=“background-color:blue; color:gray;”>
<body style=“background-color:blue; color:gray;”>
<body style="background-color: blue; color: gray;">
<body style = "background-color : blue; color : gray;">
<body style="background-color: blue; color: gray;">
<body style = "background-color:blue; color:gray;">
<body style ="background-color:blue; color:gray;">