html`내부 스타일 시트
<style>
/* #example01 { background-color: yellow; } */
</style>
<div id="example01">
Hello, <span>CSS!</span>
<br>
<span>Hello,<span> CSS!
</div>
`
html`외부 스타일 시트 (link 요소로 연결)
<!-- link href="" rel="stylesheet" -->
<p>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/link">MDN에서 link 요소</a>에 대해
정리한 페이지에 나오는 예제(demo)의 스타일 시트를 불러와 적용해 보자
</p>
`
html`외부 스타일 시트 (<code>@import</code>로 불러오기)
<style>
/* @import url(""); */
</style>
<p>hello</p>
`
html`인라인 스타일
<div style="/* background-color: yellow; */">
Hello, <span>CSS!</span>
<br>
<span>Hello,<span> CSS!
</div>
`
html`
<style>
* { }
</style>
`
html`
<style>
h4 { }
</style>
`
html`
<style> /* CSS 주석 중첩이 안되므로 주의. C 주석과 똑같다 */
/* 06-1 글꼴 관련 스타일 */
/* .hyndai { font-size: 30px; font-variant: small-caps; } */
/* 07 색상 배경 */
/* .sedan { color: yellow; background-color: black; } */
/* .hatchback { color: red; background-color: black; } */
/* .suv { color: cyan; background-color: black; } */
</style>
`
html`
<div id="sonata" class="hyndai sedan">sonata</div>
<div id="ionic" class="hyndai hatchback">ionic</div>
<div id="kona" class="hyndai suv">kona</div>
`
html`
<style>
/* #sonata { height: 100px; background-size: 190px;
background-image: url("http://www.gasnews.com/news/photo/201903/86451_53988_2637.jpg");
} */
/* #ionic { height: 100px; background-size: 180px;
background-image: url("https://t1.daumcdn.net/cfile/tistory/99943D365CCAA0FC16");
} */
/* #kona { height: 120px; background-size: 180px;
background-image: url("https://t1.daumcdn.net/cfile/tistory/2374164359422CEE35");
} */
</style>
`
html`
<style>
/* [type="submit"] { border: 1mm dotted blue; } */
</style>
<form>
<input type="text">
<input type="submit">
<span type="submit">그냥 여긴 스팬</span>
</form>
`
html`
<style>
/* 순서를 바꿔보면 나중에 나오는 규칙이 적용됨을 알 수 있다 */
.someclass { font-size: 15pt; color: red; }
.someclass { font-size: 30pt; color: blue;
font-size: 10pt;
}
</style>
<p class="someclass">안녕하세요?</p>
.
`
html`
<style>
/* 상속되는 속성 */
/* body { font-size: 6px; }; */
/* * { font-size: 6px; }; */
/* 상속되지 않는 속성 */
/* body { background-image: url("https://t1.daumcdn.net/cfile/tistory/99943D365CCAA0FC16"); }; */
/* * { background-image: url("https://t1.daumcdn.net/cfile/tistory/99943D365CCAA0FC16"); }; */
</style>
`
html`inherit, initial 속성값
<div style="color: red; border: solid;">
바깥쪽 박스
<div style="color: initial; border: inherit;">안쪽 박스</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.
