.png)
6주차부터는 하나의 웹사이트를 직접 만들어보는 Twittler 과제 기간이 시작되었다.
Twittler는 그동안의 세션과는 다르게 하나의 서비스를 직접 구현해볼 수 있는 과제이다보니 가장 기대가 됐다👏
6주차에는 HTML과 CSS에 대해 배우며 내가 나타내고자 하는 바를 웹에 어떻게 표현할 수 있는지(HTML), 또 그것을 보기 좋게 나타내기 위해 어떻게 디자인할 수 있는지(CSS)에 대해 알아보았고 이번 주차에는 6주차에 배운 내용을 토대로 웹을 동적으로 만들기 위한 내용과 문법들을 배워보았다. 그러면 7주차 화요일 세션에서 배운 내용들을 살펴보도록 하겠다.
DOM(Document Object Model)
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다.
<span>자식도 있습니다.</span>
<span>자식이 여럿 있습니다.</span>
</div>
</body>위와 같은 HTML 구조에서, div#practice에 대해 다음과 같이 표현할 수 있다.
| 속성 | 속성에 대한 값 |
|---|---|
| 태그 이름 | div |
| id | practice |
| class | highlight, red |
| 안쪽에 담긴 내용 | 여기 엘리먼트가 하나 있습니다. 자식도 있습니다. 자식이 여럿 있습니다. |
| 부모 엘리먼트 | body |
| 자식 엘리먼트 | span, span |
또, 위의 HTML 엘리먼트를 Javascript로 표현한다면 아래와 같이 나타낼 수 있을 것이다.
{
tagName: 'DIV',
id: 'practice',
classList: ['highlight', 'red].
textContent: '여기 엘리먼트가 하나 있습니다. 자식도 있습니다. 자식이 여럿 있습니다.',
parentElement: body,
children: [
{
tagNmae: 'SPAN',
textContent: '자식도 있습니다'
},
{
tagName: 'SPAN',
textContent: '자식이 여럿 있습니다'
}
]
}---> 그래서 Document Object Model이란 무엇일까?
- 위 내용처럼 HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델이다.
- 트리 구조라고 말한다. (HTML 문서와 Javascript 객체는 둘 다 트리 구조이다.)
- document라는 전역변수로 접근이 가능하다.
하지만 주의해야할 것은 DOM이 Javascript는 아니라는 것이다.
단지 DOM 구조 접근을 Javascript를 이용하여 하는 것이라는 것을 알아두자.
Javascript를 이용해 엘리먼트를 확인하는 방법
Javascript를 이용해 엘리먼트를 확인하는 방법은 다음과 같다.
먼저 화면에 보이는 것처럼 하나의 엘리먼트를 선택하면, 그 엘리먼트는 $0이라는 변수에 담긴다.
그리고 console 창에 $0을 입력하면 선택한 엘리먼트를 콘솔에서 볼 수 있다.
엘리먼트를 객체의 형태로 볼 수 있는 방법: console.dir
선택한 엘리먼트를 객체의 형태로 볼 수 있는 방법은 console 창에 console.dir($0)라고 입력하는 것이다.
그러면 위에 보이는 화면처럼 엘리먼트가 객체의 형태로 표시되는 것을 볼 수 있다.
엘리먼트 객체에는 어떤 내용이 담겨 있을까?
엘리멘트 객체에는 다양한 내용들이 담겨 있지만 그 중에서 우선적으로 몇 가지만 살펴보도록 하겠다.
| 속성 | 속성 이름 |
|---|---|
| 엘리먼트에 담긴 내용 | innerHTML, innerText, textContent |
| form 입력 값 | value |
| 자식 엘리먼트 | children |
| 자식 노드 | childNodes |
| data-* 속성에 담긴 값 | dataset |
| 이벤트 | onclick, onyup 등 |
1. innerHTML, innerText, textContent
내가 만들고 있는 Twittler를 통해 살펴보자. 콘솔 창에 각각의 속성들을 입력하여 어떤 값이 출력되는지 볼 수 있었다.
innerHTML을 입력할 경우에는 HTML 자체가 리턴된다.
innerText는 렌더링된 글자만을 가져오고, textContent는 공백 등을 모두 포함하여 가져온다.
---> innerHTML, innerText, textContent 중 innerHTML과 textContent가 더 많이 사용된다.
또 innerHTML과 같은 경우에는 값을 읽을 수 있을 뿐만 아니라 쓸 수도 있다.
$0.innerHTML = "twittler";라고 입력해주었더니 왼쪽 화면에 보이는 것처럼 inputvalue 안의 값이 twittler로 바뀌었다.
또한 innerHTML은 HTML을 직접 넣어줄 수 있는 반면, textContent는 HTML을 넣어줄 수 없다.
innerHTML을 사용했을 때는 왼쪽 화면과 같이 HTML로 렌더링되는 것을 볼 수 있다.
textContent을 사용한 경우에는 HTML로 렌더링되지는 않는다.
2. value
messagebox에 '안녕하세요!'라고 작성한 후 콘솔창에 $0.value를 입력하면, messagebox에 입력한 값이 출력된다.
value를 이용해 콘솔 창에서 직접 값을 입력해줄 수도 있다.
3. element vs. node
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다.
<span>자식도 있습니다.</span>
<span>자식이 여럿 있습니다.</span>
</div>
</body>| 속성 | 속성 이름 | |
|---|---|---|
| 자식 엘리먼트 | children | span, span |
| 자식 노드 | childNodes | text, span, text, span, text |
div#practice에 대해 살펴보면, 이 때의 자식 엘리먼트는 span, span이다.
그런데 자식 엘리먼트로 표현했을 때에는 '여기 엘리먼트가 하나 있습니다.' 라는 내용을 알 수가 없다. 이 때 자식 노드는 '여기 엘리먼트가 하나 있습니다.' 라는 내용도 알 수 있게 해준다.
4. dataset
<div data-user="steve" data-role"moderator" data-user-id="1">
Steve Lee
</div>$0.dataset.user // 'steve'
$0.dataset.role // 'moderator'
$0.dataset.userId // '1'HTML에 입력된 값을 Javascript에서 dataset을 이용해 가져올 수 있다.
다음으로는 이벤트(onclick, onkeyup 등)와 관련된 내용에 대해 살펴볼 건데, 글이 너무 길어질 것 같아 다음 게시글에 이어서 작성하도록 하겠다👉
.png)