ksw_devlog
TIL 5주 1일차 본문
DOM(문서객체모델)
DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다.
dom 트리
// 현재 dom 트리를 볼 수 있어요.
document
// dom 트리 중, body의 내용을 확인합니다.
document.body
// dom 트리 중, head의 내용을 확인합니다.
document.head
document와 body, head는 부모 - 자식 관계예요. body랑 head는 무슨 사이냐고요? 형제 관계입니다. (sibling이라고도 하죠!)
자식 요소에 접근하기
childNodes
document.body.childNodes
children
document.body.children
getElementsByTagName("태그 이름")
document.getElementsByTagName("div")
CSS
- Selector
- 👉 selector는 꾸밀 요소를 선택하는 선택자예요. 뭘 꾸밀 지 선택하고 속성을 넣어 예쁘게 꾸며주는겁니다.
/* id selector */
#id { ... }
/* class selector */
.class { ... }
/* tag selector */
tagName { ... }
/* 여러 요소 선택하기 */
#id, .class { ... }
/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }
그리드 시스템
DOM 요소들은 기본적으로 박스형태로 표시됩니다. p, div 할 것 없이 모두 네모난 영역을 가져요!
- (1) 박스모델
- margin box: 가장 바깥 영역입니다. margin 속성을 주면 이 영역이 바뀌어요. 주로 다른 요소들과 간격을 줄 때 사용해요!
- border box: 테두리 영역입니다. border 속성으로 테두리를 주면 이 영역이 바뀌어요.
- padding box: 테두리와 콘텐츠 사이 영역입니다. padding 속성을 주면 이 영역이 바뀌어요. 박스 내부의 간격을 줄 때 사용해요!
- contents box: 실제 콘텐츠 영역입니다. width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡혀요.
그리드 시스템
flex로 그리드 잡기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>오늘의 투두</title>
</head>
<body>
<style>
#title {
color: blue;
text-decoration: underline;
}
.wrap {
display: flex;
}
.todo-card {
border: 1px solid gray;
border-radius: 5px;
padding: 2em;
margin: 1em;
flex: 1 1 0;
}
button:hover {
background-color: orange;
}
</style>
<h1 id="title">오늘 할 일</h1>
<div class="wrap">
<div class="todo-card">
<h3>고양이 밥주기</h3>
<p>고양이 물, 사료 챙겨주기</p>
<button>완료</button>
</div>
<div class="todo-card">
<h3>장보기</h3>
<p>토마토, 계란, 초코렛 사기</p>
<button>완료</button>
</div>
</div>
<div class="wrap">
<div class="todo-card">
<h3>코딩하기</h3>
<p>리액트 강의 1주차 듣기</p>
<button>완료</button>
</div>
<div class="todo-card">
<h3>코딩하기</h3>
<p>리액트 강의 1주차 듣기</p>
<button>완료</button>
</div>
</div>
</body>
</html>
자바스크립트 기초
document로 DOM에 접근하기
(1) document.getElementsByClassName
const wraps = document.getElementsByClassName("wrap");
console.log(wraps);
document.getElementById
const title = document.getElementById("title");
// 자바스크립트에서는 어떤 객체의 속성에 접근할 때 .을 이용해 접근할 수 있어요.
// title이라는 요소의 style 속성에 접근하려면 아래와 같이 title.style로 접근할 수 있습니다!
// style 안에 있는 속성에 접근할 때도 마찬가지예요. style.backgroundColor로 배경색 속성에 접근할 수 있어요.
title.style.backgroundColor = "yellow";
document.getElementsByTagName
function sayHello (event) {
console.log("hello");
}
const buttons = document.getElementsByTagName("button");
// 이 구문은 X! html collection은 유사 배열이기 때문에 array의 내장함수를 쓸 수 없어요!
//buttons.map(b => {
//console.log(b);
//});
for (let i=0; i< buttons.length; i++){
// .addEventListener()로 클릭 이벤트를 연결해줍니다.
buttons[i].addEventListener("click", sayHello);
}
document에 DOM 요소 추가하기
// 새 요소를 만들어요.
const new_div = document.createElement("div");
// 한 눈에 확인해볼 수 있도록 스타일을 조금 추가해줄게요. 그냥 div는 눈에 안보일테니까요!
new_div.style.backgroundColor = "green";
new_div.style.width = "100px";
new_div.style.height = "100px";
// 요소를 body에 추가해줍시다.
document.body.appendChild(new_div);
'TIL' 카테고리의 다른 글
| TIL 5주 3일차 (0) | 2022.11.30 |
|---|---|
| TIL 5주 2일차 (0) | 2022.11.29 |
| TIL 4주 4일차 (0) | 2022.11.24 |
| TIL 4주 3일차 (0) | 2022.11.23 |
| TIL 4주 2일차 (0) | 2022.11.23 |
