Published
Edited
Apr 9, 2020
Insert cell
html`
<h1>04주차:CSS 기초, 텍스트, 색상, 배경</h1>
`
Insert cell
Insert cell
Insert cell
html` 내부 스타일 시트
<style>
#example01{ background-color: yellow; } /* */
</style> /*이것은 CSS의 주석*/
/*style 태그 div태그 위는 아래는 위치는 상관없다*/

<div id="example01">
Hello, <span>CSS!</span>
<br>
<span>Hello,</span> 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>에 대해 정리한 페이지에 나오는 예제의 스타일을 불러 적용해 보자.
</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, CSS!
</div>
`
Insert cell
Insert cell
Insert cell
html`
<style>
/* * {color:blue;}*/
</style>
`
Insert cell
Insert cell
html`
<style>
h4 {color:blue; }
</style>
`
Insert cell
Insert cell
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>
`
Insert cell
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>
`
Insert cell
Insert cell
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>
`
Insert cell
Insert cell
html`
<style>
/* [type="submit"] { border: 1mm dotted blue; } */
</style>
/*input에 submit만 적용하고 싶으면 input[type="sumit"]이라 적어주면 됨. input [type="sumit"] 이렇게 띄어쓰기 해주면 안됨*/
<form>
<input type="text">
<input type="submit">
<span type="submit">그냥 여긴 스팬</span>
</form>
`
Insert cell
Insert cell
Insert cell
html`
<style>
/*#someid {background-color:red;}*/
</style>
<p id="someid">sonata</p>

<style>
p[id]{background-color:red;}
</style>
`
Insert cell
Insert cell
html` 4번 예제
<style>
.someclass{font-size: 16pt; color: red;}
.someclass{font-size: 30pt; color: blue;
font-size: 20pt;} /*소스를 나중에 쓴 것이 우선순위가 더 높음
/*스타일 규칙 내에 같은 속성이 여러 개 쓰일 때도 나중에 쓴것이 우선순위 높음*/
</style>
<p class = "someclass">안녕하세요?</p>
`
Insert cell
Insert cell
Insert cell
html` inherit, initial 속성값
<div style="color:red; border: solid;">
바깥 테두리
<div style="color: initial; border: inherit;">
안쪽 테두리</div>
</div>
inherit은 상속되지 않는 속성을 강제로 상속되게 할 때 사용<br>
initial은 상속되지 않고 브라우저의 원래 속성을 사용하고 싶을 때 사용
`
Insert cell
html`
<h3>05-4 CSS5와 CSS 모듈</h3>
CSS는 한 덩어리의 표준이 아니라 주제별로 규약을 따로 만든 모듈로 나뉘어 있다. <br>모듈별 표준화되고 업데이트되고 있으며, 묘듈마다 표준화 진행 정도나 변화하는 정도도<br> 다르다. 최근에 표준화되거나 업데이트된 기능일수록 브라우저마다 지원 정도가 다를 가능성이 높다.
`
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