2d:null 2e:["$","title",null,{"children":"Observable에 CSS 적용 | Dongkeon Kim | Observable"}] 33:[] 31:{"id":"2de3aa4f0d104010","slug":"observable-css","title":"Observable에 CSS 적용","thumbnail":"5fc35a00b36b1379dfcd04f31ee82d5d3a8b313a726ee8a7c87429520b22b529","access_level":"public","create_time":"$D2019-08-24T14:09:46.174Z","update_time":"$D2019-12-14T00:45:13.896Z","view_time":null,"first_public_time":"$D2019-08-25T16:48:21.308Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"64cc9d68e5d088c1","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":"starter_2024"},"version":184,"publish_version":184,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6cdfbc9862bdb3e","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":null}],"members":[{"type":"individual","id":"f6cdfbc9862bdb3e","login":"shallwefootball","name":"Dongkeon Kim","avatar_url":"https://avatars-next.observableusercontent.com/cbe1da14d9ccb3c694b88749da169d64ef4bd48d2ff3726981cebcd7b1a3f140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7ca5d8a83e06cec1","slug":"blog","title":"Blog","owner":{"id":"64cc9d68e5d088c1","login":"shallwefootball","name":"Dongkeon Kim"}},"type":"notebook","body":{"title":"Observable에 CSS 적용","cells":[{"id":0,"value":"md`# Observable에 CSS 적용`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`

Observable에서 markdown은 md\\`\\` 문을 이용해 쉽게 작성할 수 있다. markdown 의 paragaph font-family 속성을 보면 Iowan Old Style 가 적용 우선순위로는 가장높다. 영어로 쓰이기에는 좋치만 한글은 뭔가 변경하고싶은 생각이 들어 이 글을 쓰게 되었다.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"html`

기존의 방법은 아주 단순하다. 예를들어 font-family를 sans-serif로 바꾸고 싶다면 Observable에서 제공하는 html\\`\\` 문에 html attribute에 font-family를 추가해주면된다. 바로 이 cell처럼.
하지만 매번 font-family 속성을 지정해줘한다는 단점이 있다.

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"html`Observable 내에서 검색해보니 🤔 How to: use libraries that need CSS 을 통해 CSS 파일을 로드할 수 있다. 이 글에서 설명하고 있는 방법은 npm 에 파일을 publish하고 그 파일을 로드하는 방식인데 cdn 서버에서 cros 이슈만 컨트롤할 수 있다면 굳이 publish할 필요는 없다고 생각한다. 하지만 난 따로 서버가 없으므로 그냥 npm에 publish하도록 하겠다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"publishedStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`다른방법으로는 html\\`\\` 에 style 태그를 선언하고 직접 css를 추가하는것이다. publish 하는게 번거로워져서 직접 style를 수정하도록 하겠다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"