7. 웹 브라우저 제어
웹 페이지의 디자인은 CSS를 이용해서 바꿀 수 있다.
<!-- body의 배경색(backgroundColor)과 글씨색(color)을 바꿈 -->
<body style = "backgroundColor: black'; color: white;">위처럼 작성하면 웹 페이지는 항상 검정색 배경과 하얀색 글씨를 유지한다.
웹 브라우저의 테마(배경과 글씨 색)를 '클릭했을 때'만 바꾸고 싶다면 다음 두 가지를 실행해야한다.
CSS로 변경할 디자인을 작성JavaScript로 제어하려는 태그를 선택해서CSS를 변경
8. CSS 기초
이전에 CSS 강의를 별도로 수강했으므로 생략.
9. 제어할 태그 선택하기
웹 페이지의 테마(day & night)를 바꾸기 위한 버튼은 다음과 같이 만들 수 있다. Night 버튼만.
- 제어 버튼을 생성
<!-- night이 써져있는 버튼 --> <input type = "button" value = "night"> - 클릭했을 때 전환을 주기 위해
onclick값으로 JavaScript를 입력한다.<input type = "button" value = "night" onclick = ""> - 태그를 선택해서 CSS를 변경
<input type = "button" value = "night" onclick = " document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; ">
3번의 onclick안의 코드를 구체적으로 보면 다음과 같다.
document: 문서의querySelector('body'):body태그를 선택해서 (괄호안에 원하는 선택자를 넣으면 된다.).style:style속성에 접근한 뒤backgroundColor = 'black'배경색을 검정(black)으로 바꾼다.color = 'white': 글자색을 흰색(white)로 바꾼다.
Day 버튼은 버튼의 value와 배경색, 글자색 값만 바꿔서 동일하게 작성하면 된다.
'공부를 합니다 > 언어 (Language)' 카테고리의 다른 글
| WEB2 - JavaScript_11-14 조건문 (0) | 2020.05.01 |
|---|---|
| WEB2 - JavaScript_10 프로그램, 프로그래밍, 프로그래머 (0) | 2020.05.01 |
| WEB2 - JavaScript_5-6 데이터 타입, 변수와 대입연산자 (0) | 2020.05.01 |
| WEB2 - JavaScript_2-4 HTML과 JavaScript의 만남 (0) | 2020.04.30 |
| WEB2 - JavaScript_1 수업의 목적 (0) | 2020.04.30 |