html`
<div class="box1a">
CSS 박스 모델을 설명하는
<span class="box1b">예제</span>입니다.
</div>
.
<style>
/* .box1a {
margin: 20mm;
padding: 10mm;
border: dotted;
background-color: skyblue;
} */
/* .box1b {
margin: 10mm
padding: 5mm;
border: solid;
background-color: yellow;
} */
</style>
`
html`
<div class="box2a">
CSS 박스 모델을 설명하는
<span class="box2b">
예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제 예제
</span>입니다.
</div>
.
<style>
.box2a { border: dotted; background-color: skyblue; }
.box2b { display: block;
margin: 10mm;
/* padding: 5mm 20mm 10mm 40mm; */
padding-top: 5mm;
padding-right: 20mm;
padding-bottom: 10mm;
padding-left: 40mm;
border: solid;
background-color: yellow;
}
</style>
`
md`크기 지정
<div class="box3a">
CSS 박스 모델을 설명하는
<span class="box3b">예제</span>입니다.
</div>
<style>
.box3a {
width: 800px;
height: auto;
border: dotted;
background: skyblue;
}
.box3b { display: block;
width: 50%;
height: auto;
border: solid;
background: yellow;
}
</style>
`
html`
<div class="article">
<h4>토끼와 거북이</h4>
<div class="section">
<h5>첫 이야기를 시작하는 장</h5>
<p>첫 이야기의 첫째 장 첫 문단 내용입니다.</p>
<p>첫 이야기의 첫째 장 둘째 문단 내용입니다.</p>
</div>
<div class="section">
<h5>첫 이야기를 끝마치는 장</h5>
<p>첫 이야기의 둘째 장 첫 문단 내용입니다.</p>
<p>첫 이야기의 둘째 장 둘째 문단 내용입니다.</p>
</div>
</div>
<div class="article">
<h4>선녀와 나뭇꾼</h4>
<div class="section">
<h5>둘째 이야기를 시작하는 장</h5>
<p>둘째 이야기의 첫째 장 첫 문단 내용입니다.</p>
<p>둘째 이야기의 첫째 장 둘째 문단 내용입니다.</p>
</div>
<div class="section">
<h5>둘째 이야기를 끝마치는 장</h5>
<p>둘째 이야기의 둘째 장 첫 문단 내용입니다.</p>
<p>둘째 이야기의 둘째 장 둘째 문단 내용입니다.</p>
</div>
</div>
`
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.
