[front] 반응형 웹 / JS - 오늘도 코드잇 : 4주차

반응형 웹

브라우저 사이즈에 맞춰 디자인이 바뀌는 것~!

→ 모바일이나 탭 버전을 따로 안 만들어도 된다.

브라우저의 크기에 따라 폰트 크기가 다르게 하려면…

h1 {
		font-size:24px;
	}
	p {
		font-size: 16px;
	}

@media (min-width: 768px) { /*@media는 미디어 쿼리!이*/
	h1 {
		font-size:36px;
	}
	p {
		font-size: 24px;
	}
}

→ 브라우저의 너비가 768 이상이면 폰트 크기를 키우겠다는 의미

 

---

 

인터랙티브 자바스크립트!

id로 태그 선택하기

document.getElementById를 통해 html의 id 속성을 가진 요소를 쭉 출력할 수 있음

class로 태그 선택하기

document.getElementsByClassName

⇒ 배열의 형태로 출력됨

완벽한 배열은 아님…

이벤트와 버튼 클릭

const btn = document.querySelector('#myBtn');
//이베트 핸들링
btn.onclick = funtion()//이벤트 핸들
console.log('Hello Codeit')

브라우저와 자바스크립트

DOM

문서 객체 모델(Document Object Model)

⇒ 웹페이지에 나타나는 HTML 문서 자체를 객체로 묶은 것

…

console에서

값 자체를 확인하고 싶으면 log 메소드, 객체의 속성을 살펴보고 싶으면 dor 메소드를 활용하면 좋다!

DOM 트리

각 객체를 연결해 놓은 것…?

각 객체는 node

→ 부모노드 / 자식노드 같은 관계를 설정해놓은 것

텍스트노드 + 요소노드가 있고 텍스트노드는 leaf node …

물론 다른 것도 있지만 거의 텍스트노드랑 요소노드만 쓴다!