|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<body>
<h1><a href="index.html">WEB</a></h1> <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';
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
|
document.querySelector('body').style.backgroundColor = 'black'
제어할 태그 선택: body
style의 backgroundColor를 black으로 하고싶다는 의미
CSS에서 사용할때는 background-color지만 JS에서 사용할때는 위와 같이 사용하기로 약속되어있음
style.color : text 컬러
- 이전 복습내용 참고하기
CSS의 기본 문법
CSS 구분 방법으로 style 태그가 아닌 속성을 이용하는 방법이 있다.
현재까지 배운 내용으로는 한 줄의 색상만 다르게 표현하기가 어렵다.
아래와 같이 a 태그 안에 style 속성을 넣어주면 가능해진다.
|
1
|
<li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li>
|
HTML의 속성으로 style을 넣어준 것.
style 태그를 쓸 때
|
1
2
3
4
5
6
|
<style>
a { /*효과를 누구에게 줄것인가 선택하는 부분. 선택자(selector)라고 부른다*/
color:black; /*효과(선언/declaration) 이라고 부르는 부분*/
/*color: Property(속성), black: Property Value(값)*/
}
</style>
|
style 속성을 쓸 때
|
1
|
<li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li>
|
위와 같은 상황에서는 style 태그가 위치하고 있는 태그에게 효과를 줄 것이기 떄문에 선택자를 사용할 필요가 없다.
text-decoration:underline: 밑줄 없애는 CSS (ex. 하이퍼링크 등에 적용 가능)
효과를 지정하고 나서는 세미콜론;을 통해 온점 찍어주기
종소세랑 볼일 보느라 많이 못했다ㅠ_ㅠ..내일은 많이 하기!
공부 자료: https://opentutorials.org/
'JAVA' 카테고리의 다른 글
| 20220412 - WEB JavaScript 31 (0) | 2022.04.12 |
|---|---|
| 20220410 - WEB JavaScript 30 (0) | 2022.04.10 |
| 20220406 - WEB JavaScript 28 (0) | 2022.04.06 |
| 20220405 - WEB JavaScript 27 (0) | 2022.04.06 |
| 20220403 - WEB JavaScript 26 (0) | 2022.04.03 |