Published
Edited
May 31, 2020
Insert cell
md`# 4장 CSS 시험공부 `
Insert cell
html`
내부 스타일 시트
<style>
#exam1 {background-color:cyan;}
</style>

<div id="exam1">
Hello, CSS!
<br>
Hello, CSS!
</div>
`
Insert cell
html`외부 스타일 시트 (link 요소로 연결)

<!--link href="https://interactive-examples.mdn.mozilla.net/media/examples/link-element-example.css" rel="stylesheet"-->

<p>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/link">MDN에서 link 요소</a>에 대해
정리한 페이지에 나오는 예제(demo)의 스타일 시트를 불러와 적용해 보자
</p>
`
Insert cell
html`외부 스타일 시트 (<code>@import</code>로 불러오기)
<style>
@import url("https://interactive-examples.mdn.mozilla.net/media/examples/link-element-example.css");
</style>

<p>hello</p>
`
Insert cell
html`인라인 스타일
<div style="background-color: yellow;">
Hello, <span>CSS!</span>
<br>
<span>Hello,<span> CSS!
</div>
`
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