본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"어떤 문제가 우리 삶에서 중요하고 심각할 수록
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."
(생활코딩 : Web1 -1 수업소개. 중)
Intro
지금까지 JavaScript의 기초적인 문법을 살펴보았습니다.
데이터 타입들과 변수 및 상수, 그리고 몇가지 연산자가 그것입니다.
다음으로는 자바스크립트를 통해서 할 수 있는 일 중 하나인 웹 브라우저를 제어하는 방법에 대해 알아보고자 합니다.
글에 앞서서 html태그의 style문법은 HTML도 JavaScript도 아닌 CSS 언어를 사용하기로 약속하였습니다.
이 언어의 역할은 '디자인'입니다.
HTML은 한 번 수정되면 바뀔 수 없는 정적인 언어이기 때문에,
웹 디자인을 동적으로 변경하고자 하면 우리는 JavaScript를 통해 CSS 언어를 제어할 줄 알아야 합니다.
앞으로 CSS의 가장 본질적이고 중요한 문법과,
JavaScript를 통해 우리가 제어하는 태그를 선택하는 방법에 대해 배워보고자 합니다.
#4.
See the Pen NWPezwQ by nani6765 (@nani6765) on CodePen.
생활코딩에서 제공 및 실습하고 있는 소스코드에서 불필요한 부분은 제외하고 가져왔습니다.
night와 day를 눌러보신다면, 배경과 글자색이 바뀌는 것을 확인하실 수 있으실 겁니다.
그리고 우리는 이 일련의 과정이 CSS언어를 통해 디자인되는 것을 알고 있습니다.
다시 말하여 우리는 JavaScript를 통해 CSS언어를 선택하여 디자인을 선택할 수 있다는 것을 알고 있습니다.
지금부터 그 방법에 대하여 학습해보도록 하겠습니다.
#5.
<input type="button" value="night" onclick="
// 자바스크립트로 제어할 CSS 선택자 ">
<input type="button" value="day" onclick="
// 자바스크립트로 제어할 CSS 선택자 ">저희는 "button" 타입으로 그 버튼에 클릭이 발생하였을 때 상호작용을 제어하고 싶습니다.
value값을 night와 day로 줌으로써 그 버튼을 구분하도록 하겠습니다.
#6.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">이미 정답지가 나와있지만 그 요소를 하나하나 알아보도록 하겠습니다.
저희는 JavaScript로 Tag를 선택하고 싶습니다.
무엇을요? CSS의 선택자(selector)를요.
검색 : JavaScript Select Tag by CSS selector
Document.querySelector()
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
document.querySelector(selectors);
라는 구문을 통해 selector를 선택하고 있습니다.
아래의 예제에서는 변수 el에 ".myclass"의 선택을 담고 있습니다.
위 구문을 통해 저희는
<input type="button" value="night" onclick="
document.querySelector('body')
">
// class ex
<body class="target">
<input type="button" value="night" onclick="
document.querySelector('.target')
">
</body>
// ID ex
<body id="target">
<input type="button" value="night" onclick="
document.querySelector('#target')
">
</body>까지의 구문을 완성할 수 있을 것 같습니다.
현재 저희는 버튼 클릭으로 body 전체의 색을 달리하고 싶기 때문에 제일 위 예시로 진행하겠습니다.
이제 저희는 선택을 마쳤으니,
JavaScript로 어떻게 body의 style 속성을 선택할 수 있는지 검색해보면 되겠죠?
element는 tag를 의미합니다.
HTML DOM Style object
HTML DOM Style Object Style object The Style object represents an individual style statement. Style Object Properties The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Property Description CSS alignContent Sets
www.w3schools.com
예시는 getElementById로 명시되어 있지만, style을 적용하는 문법은 똑같습니다.
<input type="button" value="night" onclick="
document.querySelector('body').style.
">저희는 background-color를 블랙으로 변경하고 싶습니다.
어떤 언어를 사용해서요?
JavaScript로요.
검색 : JavaScript background-color
HTML DOM Style backgroundColor Property
Style backgroundColor Property ❮ Style Object Example Set a background color for a document: document.body.style.backgroundColor = "red"; Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The backgroundColor property sets or ret
www.w3schools.com
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
">글자색은 backgroundColor 대신 그냥 Color로 설정하시면 됩니다.
여러분들이 이러한 일련의 과정을 모르신다 하시더라도, 검색을 통해 저희는 정보를 습득할 수 있습니다.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">똑같이 day value버튼에서는 배경화면을 흰색으로, 글자색을 검은색으로 설정해주면 되겠죠?
#7.
저희는 자바스크립트 기본을 다루는 데에 있어서 첫 번째 관문을 넘었습니다.
모두 고생하셨습니다.
'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글
| [생활코딩|WEB_JavaScript#5] 조건문 上 : 조건문 예고, 비교 연산자와 Boolean 타입 2020.01.30 (0) | 2020.01.30 |
|---|---|
| [생활코딩|WEB_JavaScript#4] 프로그램, 프로그래밍, 프로그래머 2020.01.29 (0) | 2020.01.29 |
| [생활코딩|WEB_JavaScript#3] CSS 기초, 제어할 태그 선택하기 上 2020.01.21 (0) | 2020.01.21 |
| [생활코딩|WEB_JavaScript#2] 변수와 대입연산자 2020.01.21 (0) | 2020.01.19 |
| [생활코딩|WEB_JavaScript#1] Data Type, 문자열과 숫자 2020.01.19 (0) | 2020.01.19 |
최근댓글