section1. HTML과 JS
- HTML과 JS의 만남 : script 태그
자바스크립트를 넣는 방법
<script> document.write('hello world')</script>JS는 동적이다
HTML은 정적이다
- HTML과 JS의 만남 : 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>onclick = 클릭했을 때
onchange = 변경되고 포커스를 잃을 때
onkeydown = 키를 눌렀을 때 발생, 물리적인 키에 반응
section 2. 데이터타입, 변수, 웹브라우저 제어
- 데이터타입 - 문자열과 숫자
boolean, null, undefined, number, String, symbol
trim() - 공백을 없애주는 기능
.length - 글씨가 몇글자로 구성되어 있는지
- 변수와 대입 연산자
변수 : variable 변할 수 있는 값. ex) x, y
대입 연산자 : 우변에 있는 것을 좌변에 대입 연산 할 수 있게 해주는 것
상수 : constant 변하지 않는 값. ex) 100, 1, 5
문자열 : string 우리가 쓰는 여러가지 문자들
- 웹브라우저 제어
HTML은 정적이라 JS, CSS 가 함께 들어가야 동적으로 움직인다.
section 3. CSS
-
기초 : style 속성
style 속성(property) 안에는 css가 온다고 약속돼 있다.
style이라는 속성 안에 css를 넣으면 디자인을 할 수 있다.
속성이라는 문법의 구조를 파악한다면 이제부터 검색을 통해 문제 해결 가능 -
style 태그
1) div : 무색무취의 태그. 의미와 기능이 없음 css or js 를 통해 어떤 정보를 제어하고 싶을 때 사용하는 태그 (span도 동일)
2) 하나만 바꾸는 것이 아니라 다 바꾸고 싶다면 c + F를 이용해 자바스크립트에 해당하는 부분의 코드를 복사 붙여넣기로 대체해준다.
3) style은 script 태그처럼 웹브라우저에게 커서가 깜빡거리고 있는 스타일로 감싸져있는 텍스트가 css라고 웹브라우저에게 알려주는 구분자이다 -
선택자
모든 태그를 선택하는 선택자
* { }Tag 선택자
h1 { }class 선택자
.header { }
class = "header"id 선택자
#body { }
id = "body"의사클래스 선택자 (pseudo class 선택자)
가상 클래스라고도 한다
실제 요소에 붙은 class명은 아니지만 특정 조건에서 마치 그 class가 붙어있는 것처럼 사용하는 선택자 입니다. 쓸 수 있는 의사 클래스가 정해져있고 :를 붙여 사용한다
a:link {
}
div:hover{ }구조 선택자
dom트리 구조상 어디에 위치했는지에 따라 적용되는 선택자
:nth-child() {
/*()안에 들어있는 수식을 기반으로 요소를 선택합니다. */
/*예를 들어 p:nth-child(2) 라면 2번째 자식인 p를 선택합니다. */
/*n을 이용한 간단한 수식을 사용할 수 있습니다.*/
/*p:nth-child(3n+2) 라면 3n+2번째 자식인 p를 선택합니다.(2,5,8...) */
/*:nth-child(odd),:nth-child(even) 같은 특수 수식도 이용 가능한데, odd는 홀수, even은 짝수 요소를 선택합니다.*/
}
:nth-last-child() {
/*nth-child랑 같은데 뒤에서부터 샙니다.*/
/*예를 들어 p:nth-last-child(2) 라면 끝에서 2번째 자식인 p를 선택합니다. */
}
:first-child {
/*첫번째 자식인 요소를 선택합니다. :nth-child(1)과 같습니다.*/
}
:last-child {
/*마지막째 자식인 요소를 선택합니다. :nth-last-child(1)과 같습니다.*/
}- 제어할 태그 선택하기
주간모드, 야간 모드 설정 버튼 생성 및 눌렀을 때 반응하게 만들기
<input type="button" value="nigth" onclick="
document.querySelector("body").style.backgroundColor='black';
document.querySelector("body").style.color='white';
">input으로 버튼형, 이름은 nigth, 클릭시 백그라운드 컬러는 블랙, 글씨는 흰색으로 반응
document~로 바디에 요청한다.
