(51) WEB2-JavaScript - YouTube
유튜브 '생활코딩' 강의를 듣고 정리했다.
[ WEB2 - 9. CSS 기초 : style 속성 ]
style 속성을 사용하여 디자인에 변화를 줌
: onclick 안에 JavaScript가 오는 것과 마찬가지로 style 속성 안에는 CSS가 온다고 약속
HTML 문법인 style을 통해서 웹브라우저에게 위의 코드가 javascript라는 것을 알려주는 것이고
JS 코드가 style 태그가 위치하는 태그에 적용되어야 함
color:powderblue -> CSS라는 컴퓨터 언어의 문법 중에서 속성(Property)
특정 태그를 CSS 언어로 디자인하고 싶을 때 style 속성을 쓰고 문법을 사용함
[ WEB2 - 10. CSS 기초 (style 태그) ]
<div></div> : 어떠한 기능도, 의미도 없지만 CSS나 JS를 통해서 어떤 정보를 제어하고 싶을 때 감싸주는 태그
- <h1>태그 처럼 화면 전체를 사용해 줄 바꿈을 하는 태그
<span></span> : <div>와 같은 용도인데, 화면 전체를 쓰냐 쓰지 않느냐의 차이만 있음
style속성을 사용하여 JavaScript 글씨를 진하게 표시함
<head>안에 <style>로 감싸진 텍스트가 CSS라는 것을 웹브라우저에게 알려주는 역할을 하는 구분자
class값이 js인 모든 태그의 font-weight를 bold로 바꾸고, font-color를 red로 바꿈
[ WEB2 - 11. CSS 기초 : 선택자 ]
ID값이 first로 한 것을 #을 통해 색상을 변경함
class : 무엇인가를 grouping 함 (ID 선택자보다 포괄적)
ID : 어떤 한가지 대상을 식별
span은 위 웹페이지에 있는 모든 <span>태그를 뜻함
** 우선순위 : ID선택자 > class선택자 > 태그 선택자
[ WEB2 - 12. 제어할 태그 선택하기 ]
버튼을 클릭했을때 <body> 태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣음
: JavaScript문법에 따라서 <body>태그를 선택하도록 함
night버튼을 통해 body가 차지하는 부분의 백그라운드가 검은색으로, 포그라운드(텍스트) 색상이 흰색으로 변하게 함
<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';
">
[ WEB2 - 13. 프로그램, 프로그래밍, 프로그래머 ]
HTML과 JavaScript는 둘 다 컴퓨터 언어이다.
JavaScript는 컴퓨터 언어이면서 동시에 컴퓨터 프로그래밍 언어이다.
순서를 만드는 행위를 프로그래밍이라고 하고,
그 순서를 만드는 사람을 프로그래머 라고 한다.
컴퓨터 프로그래밍 언어
: 시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어 두는 방식
HTML은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라서 무엇을 할 필요가 없다.
그래서 프로그래밍이라는 형태를 띠고 있지 않다.
[ WEB2 - 14. 조건문 예고 ]
* 토글(toggle)기능 구현
이미 다른 프로그래밍 언어를 공부했다면 이 기능을 구현하기 위한 수업은 따로 듣지 않아도 좋음
'Web' 카테고리의 다른 글
| [WEB : 생활코딩] JavaScript - 15. 비교 연산자와 불리언 ~ 21. 반복문 (0) | 2022.05.29 |
|---|---|
| [WEB : 생활코딩] JavaScript - 6. 데이터타입 - 문자열과 숫자 ~ 8. 웹브라우저 제어 (0) | 2022.05.15 |
| [WEB : 생활코딩] JavaScript - 1. 수업소개 ~ 5. HTML과 JS의 만남 (콘솔) (0) | 2022.05.11 |
| 웹페이지 기획 구성 (0) | 2022.05.08 |
| [WEB : 생활코딩] CSS – 7. CSS 선택자의 기본 ~ 9. 박스 모델 써먹기 (0) | 2022.05.08 |