<h2 style = "background-color:coral;color:powderblue">JavaScript</h2>↑
style - html 문법 *style 속성 안에는 Css가 온다가 약속되어있다.
background-color:coral; color:powderblue - JavaScript라는 문구에 대한 CSS속성(property)값
<p> <div>JavaScript</div> abcdefghijklmnop qrstuvwxyzabcdefghijklmnop </p>↑
<div> - 무색무취의 의미가 없는 태그이다. <h2>,<h1>태그처럼 화면 전체를 써서 줄바꿈이 있는 태그
↔ 그렇다면 무색무취의 줄바꿈이 없는 태그는? : <span> - div처럼 쓰이는 태그이나, 전체를 사용하진 않는다.
<p> <span style = font-weight:bold;> Javascript </span>↑
JavaScript라는 문구에는 bold값이 들어가 글꼴이 두꺼워졌다.
<style> .js{front-weight:bold; color:red;} </style> . . . <span class = "js">JavaScript</span>↑
.js - 선택자
front-weight:bold; color:red; - 여러개의 js의 속성을 전부 바꿀 수 있다.
class = . 그룹핑한다라는 의미 (같은 이름의 아이들을 같은 반으로 묶는다)
*atom > Find > Find in Buffer 에서
Find는 글씨를 찾아주고, Replace는 속성을 바꿔준다.
ㅇ선택자
#fast{color:green;} <span id = "first" class="js"> JavaScript </span>↑
id = #
. = class
id = # 한가지 대상을 식별한다(타겟팅) *예외적으로 디자인 가능하다 (예: 학번)
. = class 그룹핑한다(포괄적) (예: 반)
ㅇ제어할 태그 선택하기
클릭 [야간모드/낮모드] 예제 :
<input type="button" value="night"
onclick=" document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.Color='white'; ">↑
onclick = JS 이벤트
<input type="button" value="night" onclick=" document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.Color='white';"> - JavaScript로 동적인 표현이다,
+ html로 표현했다면 : <body style = "background-color:black;"> = 정적
'STUDY > JavaScript' 카테고리의 다른 글
| [JavaScript-생활코딩]10. 프로그램, 프로그래밍, 프로그래머 (0) | 2022.06.01 |
|---|---|
| [JavaScript-생활코딩] 9. 제어할 태그 선택하기 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 7. 웹브라우저 제어 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 6. 변수와 대입 연산자 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 5. 데이터타입 - 문자열과 숫자 (0) | 2022.06.01 |