web
-
위치 속성 (position)web/css 2024. 1. 1. 23:18
https://developer.mozilla.org/ko/docs/Web/CSS/position 예제를 위해 공통으로 사용할 html, css 는 다음과 같다. div { width: 100px; height: 100px; background-color: beige; border: 2px solid black; margin: 10px; display: inline-block; } #middle { background-color: green; } ------------------------------------------------------------------------ static 일반적인 문서 흐름에 따라 배치함. top, right, bottom, left 속성이 아무런 영향을 주지 못한다. d..
-
CSS 단위web/css 2023. 12. 31. 19:44
단위1: % 기본적으로 parent element 의 백분율 font-size 의 백분율인 경우도 있음 예제1: parents element 를 기준으로 한 경우 section { background-color: blue; width: 400px; height: 400px; } div { background-color: red; width: 50%; height: 50%; } 예제2: font-size 를 기준으로 한 경우 CSS Units h1 { font-size: 40px; border: 1px solid black; line-height: 300%; } ------------------------------------------------------------------------ 단위2: em ..
-
CSS 박스 모델web/css 2023. 12. 29. 21:41
가로, 세로, 모서리 모양 div { width: 200px; background-color: bisque; border-width: 5px; border-style: solid; border-color: black; /* border: 5px solid black; */ /* 위의 세줄을 한줄로 표현하기 */ border-left-width: 10px; border-radius: 5px; /* 모서리를 둥글게 */ /*border-radius: 50%;*/ } 패딩 (padding) 콘텐츠와 이를 둘러싼 테두리(border) 사이의 공간 Pad ME 여기에 아래 CSS 를 적용하면 button { padding-left: 50px; /* right, top, bottom */ } 마진 (margin) ..
-
CSS Selectorweb/css 2023. 12. 21. 20:24
개요 css style 파일 등의 정의 패턴을 보면 아래와 같다. selector { property: value; } 여기서 selector 값의 다양한 형태를 배워보자. 전체 선택 * { background-color: cyan; } Element 선택 h2 { color: crimson; } Element 다중 선택 h1, h2 { color: crimson; } ID 선택 #my-id { background-color: coral; } class 선택 .my-class { background-color: coral; } 자손(descendant) 선택 ul a { color: red; } ul 에 바로 이어 나오는 anchor 뿐만 아니라, 아래와 같은 anchor 도 선택된다. (ul 하위의 모..
-
색, 텍스트, 글꼴web/css 2023. 12. 21. 19:34
색 h2 { color: palegreen; background-color: plum; } p { background: antiquewhite; } background 는 background-color 보다 기능이 다양하다. (예: 배경이미지 넣기 등) 텍스트 h2 { text-align: center; font-weight: 800; text-decoration: blue underline; letter-spacing: 10px; } p { line-height: 2; } 글꼴 h2 { font-size: 80px; font-family: Calibri, Arial, sans-serif, monospace; } font-family 에서 지정된 글꼴 순으로 시스템에 있는 것을 찾아 지정한다. sans-..
-
Html Semanticsweb/html 2023. 12. 15. 21:46
Generic container div: 블록 span: 인라인 HTML Entity 키보드로 입력하기 어려운 문자 입력 (&로 시작해 ; 로 끝남) 예제: & Semantic elements div 대신에 의미있는 Tag 를 사용하자. 참고: https://developer.mozilla.org/en-US/docs/Glossary/Semantics 예제 Home About Terminology Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab autem doloremque facere, nulla obcaecati quam quibusdam tempora? Cum delectus ducimus fugiat nam nemo recusa..
-
javascript callback 을 scala Future 로 facade 작성web/scalajs 2023. 12. 11. 15:03
문제 chrome.cookies.get 은 cookie 값이 callback 으로 처리되는데, scala Future 로 리턴하는 scalajs facade 로 만들어 보자. 코드 import scala.concurrent.{Future, Promise} import scala.scalajs.js object Cookie { def getValue(name: String, url: String): Future[String] = { val p: Promise[String] = Promise[String]() val f: js.Function1[js.Dynamic, Unit] = (info: js.Dynamic) => { val pageId = info.value.asInstanceOf[String] p.s..