안녕하세요! :)
오늘은 웹과 자바스크립트의 마지막!! 제어할 태그 선택하기 부분입니다
정말 아직까지는 크게 어려웠던 내용들이 없어서 배우는 것에 있어 큰 무리는 없었다면 ,
과연 다음 단원부터는 더 재밌어질지.....
아! 그리고 각 단원이 마칠때마다 제대로 이해했는지 퀴즈도 있으니 같이 한번 살펴보도록 하겠습니다 :)
오늘의 강의 학습목표와 핵심단어들에 대해 살펴보겠습니다.
지금까지 CSS에 대해 살펴보았다면 다시 이번부터는 javascript로 돌아와 이야기해보겠습니다!
해당 강의를 통해 배우면서 중점적으로 배웠던것이 querySelector이었습니다.
querySelector이란 함수를 사용할시 선택자를 이용해 원하는 태그를 선택할 수 있습니다.
직접 보지않고 설명만 들으면 이해가 잘 안 되기 때문에 코드를 통해 같이 살펴보겠습니다 :)
먼저 querySelector을 쓰는 기본적인 구조는 다음과 같습니다.
document.querySelector(selectors);
그렇다면 직접 타이핑을 하면서 알아보도록하겠습니다!
웹 페이지안에 버튼을 넣고 그 버튼을 눌렀을 때 나타나는 이벤트들에 대해 작성을 해보았습니다 :)
각 코드들에대해 설명한다면
<input type = "button" value = "night" on click = " " > <-- 이 부분은 이전 시간에 설명했으니 패스!
document.querySelector('body'). style.backgroundColor = 'black';
각 이코드에서 의미하는 것들에 대해 살펴보겠습니다!
document : 내 웹페이지를 지칭
query :질의하다라는 뜻을 가지고 있습니다. (웹브라우저에게 질의한다.)
Selector : CSS의 selector을 의미
('body') : 현재 body 태그를 선택하기때문에 body를 입력 , 만약 id일 경우 #(id명) , 클래스일 경우.(클래스명)
style 이후로는 이전에 설명했으니 넘어가도록 하겠습니다 :) (사실 검색만 하더라도 다 나오긴 합니다...)
두 번째 줄의 코드도 다음과 설명은 같습니다!
이렇게 해당 코드들을 웹브라우저에 실행시키게 되면!
이렇게 초기화면에서!
짠!
검은색 배경을 주고 , 글자에는 흰색을 줬었던 것이 잘 표현되어 나타남을 확인할 수 있습니다!
더 이해가 시기 쉬우시라고 강사님의 설명을 더 넣어보겠습니다 :)
오늘의 생각해보기!! 한번 살펴보겠습니다 :)
이번 수업내용에서 , 배경색을 검은색으로 만드는 것을 해보았었는데
이 부분에서 마우스를 올렸을 때라는 이벤트 , 그리고 배경색이 회색이 되는 설정만 바꾼다면 크게 문제가 없겠죠!? :)
여러분은 어떻게 작성하셨나요!? 똑같이 나왔나요! :)
오늘 했었던 과정을 토대로 작성하면 크게 문제없게 나왔습니다 ㅎㅎ
이렇게 해당 단원에 대해 다 살펴보았습니다 :)
그렇다면 , 한번 퀴즈를 풀어 보도록 할까요!
보시는 여러분도 같이 맞춰본다면 더 실력 향상에 도움이 될 거 같습니다!
이제 각각 문제를 보여드리면서 같이 풀어보겠습니다!
자 1번!
2번!
3번!
자꾸... 찍기 전에 풀어버리는 실수...
4번!
5번!
6번!
7번!
8번!
9번!
=> 수업을 열심히 들었다면 전혀 어렵지 않은 문제들로 구성되어있었습니다 :)
저는!
그래도 90점 만점에 90점! 뿌듯하다 ㅠㅠ 놀지 않고 잘 들었구나...
이렇게 웹과 javascript부분이 종료되었습니다!
어떤가요!? 저는 초반이긴 하지만 너무 흥미롭게 재밌게 잘 들어서 좋았습니다 :)
2단원도 열심히 해서 마무리 파이팅해서 해야지!
다음 시간에는 2단원 :Javascript 제어문 - 프로그램 , 프로그래밍 , 프로그래머 부분에 대해 살펴보겠습니다 :)
제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다!
[부스트코스 서포터즈3기]Javascript제어문 -조건문,조건문의 활용 (0) | 2021.01.28 |
---|---|
[부스트코스 서포터즈3기]Javascript제어문 - 프로그램,프로그래밍,프로그래머 + 조건문 예고 (0) | 2021.01.22 |
[부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(선택자) (0) | 2021.01.20 |
[부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(style 태그) (0) | 2021.01.19 |
[부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(style 속성) (0) | 2021.01.15 |