Published
Edited
May 2, 2019
Insert cell
Insert cell
html`
<b style='color: yellow; background-color: black'>굵은글씨</b> 안굵은글씨
`
Insert cell
// html로 나타나는 셀에 이름을 붙이면 그것은 DOM객체를 참조하게 된다.
doc = html`
HTML 예제
<ul>
<li id="zero" class="even">0</li>
<li id="one" class="odd" >1</li>
<li id="two" class="even">2</li>
<li id="three" class="odd" >3</li>
<li id="four" class="even">4</li>
<li id="five" class="odd" >5</li>
</ul>
`
Insert cell
{
// 위 HTML 예제 안의 모든 요소를 검은 바탕에 흰글씨로 초기화
let all = doc.querySelectorAll('*');
all.forEach( e => {
e.style.color = 'black';
e.style.backgroundColor = 'white';
} );
// return doc;
// DOM API를 이용해 선택자로 골라낸 요소(element)의 글자색과 배경색 변경
let e = doc.querySelector('#two'); // id 선택자로도 해보라
let es = doc.querySelectorAll('li'); // class 선택자로도 해보라
// 하나의 element 스타일 변경
e.style.color = 'red';
e.style.backgroundColor = 'yellow'
/* // element 여러개 스타일 변경
for (let i = 0; i < es.length; ++i) {
es[i].style.color = 'red';
es[i].style.backgroundColor = 'yellow';
}
*/
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more