해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 마진 설정 body { margin : 0;} article { max-width : 980px; min-width : 660px; float : left; margin : 0 10px;} - 마진 병합 두 엘리먼트가 세로로 쌓여 있으면 두 엘리먼트 사이의 세로 마진을 계산할 때 위, 아래 마진을 단순히 합치는 게 아니라 더 큰 마진 값이 사용되고 작은 마진 값이 0이 된다. 이로써 쌓여 있는 엘리먼트가 많더라도 위, 아래 마진은 일관되게 유지된다. 엘리먼트의 외곽선 설정 외곽선은 보더를 감싸고 보더와 같은 값을 사용한다. 하지만 보더와 달리 외곽선은 박스의 실제 크기(너비, 높이)를 증가시키지 않고 화..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 엘리먼트 박스의 이해 엘리먼트는 HTML 문서의 일부이며 HTML 컨테이너 태그에 의해 설정된다. - 박스의 구성요소 HTML 엘리먼트에는 상단, 우측, 하단, 좌측(top, right, bottom, left)으로 네 면이 있다. 이러한 네 면은 엘리먼트 박스를 구성하고 이러한 박스에 CSS박스 속성을 적용할 수 있다. 박스의 각 면에는 다음과 같은 속성이 있다. (1) 콘텐츠 박스의 중신에 있는 콘텐츠는 페이지의 내용이기도 하다. 콘텐츠에는 사용 중인 모든 텍스트, 리스트,폼, 이미지 등이 있다. (2) 자식 엘리먼트 부모 엘리먼트에 포함된 엘리먼트는 고유 HTML태그에 의해 설정된다. 자식 엘리먼트는 보통 ..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 대부분의 경우 사용자 인터페이스는 특정 운영체제 및 사용 중인 브라우저에 의존하므로 CSS로 제어할 수 없다. 예를 들면 스크롤바 같은 객체는 제어할 수 없다. 하지만 마우스 포인터와 인용 스타일 같은 외양은 CSS를 통해서도 제어할 수 있다. 추가적으로 CSS에는 특정 대상에 (동적으로 생성된)페이지 콘텐츠를 지정할 수 있는 속성을 몇 가지 제공한다. 예를 들어 모든 장 제목에 'Chapter'라는 단어를 앞에 삽입해야 하는 경우가 있을 수 있다. 보통 웹페이지 콘텐츠는 모두 HTML 코드에 두지만 때로는 추가 콘텐츠를 동적으로 생성하거나 특정 언어에 맞게 콘텐츠를 수정하는 일이 생기기도 한다. 마우스 포인터의..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 불릿 스타일 설정 list-style-type속성을 사용하면 리스트 항목에 사용되는 불릿의 종류를 제어할 수 있다. - 불릿 스타일 정의 : display: listitem 정의를 사용해 css 리스트 속성을 추가하면 어떤 엘리먼트도 리스트 항목으로 만들 수 있다. :hover, :visited, :active와 같은 의사 클래스를 사용하면 불릿 종류나 이미지를 바꿀 수 있다. /* list-style 불릿의 이름. 모양은 시스템에 따라 다름 disc, circle, square, decimal, decimal-leading-zero, upper-roman, lower-roman, upper-alpha, lowe..
해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 텍스트 색상 설정 엘리먼트의 텍스트 색상(종종 전경색이라고도 한다)을 설정할 때는 color속성을 사용한다. 이 색상은 엘리먼트의 모든 자식이 상속하므로 바디 엘리먼트에 한번만 설정하고 필요에 따라 재정의하면 됨다. - 텍스트 색상 정의 a:link { color : rgb(153,0,0) } 배경색 설정 HTML페이지에 배경색을 설정할 수 있는 기능은 최초 웹 브라우저가 나왔을 때부터 있었던 기능이다. 하지만 CSS를 사용하면 back-ground-color속성으로 전체 페이지의 배경색뿐 아니라 개별 엘리먼트의 배경색도 지정할 수 있다. 하지만 color속성과는 달리 배경색은 엘리먼트에만 적용되고 자식이 직접 ..
Electron 공식문서를 번역한 내용입니다. Electron은 현대 웹브라우저와 매우 유사하게 만드는 Chrominum의 멀티 프로세스 아키텍처를 계승했다. 이 가이드에서는 minimal quick start app에서 적용한 Electron의 개념적 지식을 자세히 설명합니다. Why not a single process? 웹 브라우저는 엄청나게 복잡한 애플리케이션이다. 웹 콘텐츠를 표시하는 기본 기능 외에도 여러 창(또는 탭) 관리 및 third-party extensions 로딩과 같은 많은 보조 책임이 있습니다. 초창기 브라우저들은 보통 이 모든 기능들을 위해 하나의 프로세스를 사용하였다. 이 패턴은 열려 있는 각 탭에 대한 오버헤드가 적다는 것을 의미하지만 웹 사이트 하나가 손상되거나 중단되면..
표준 내장 객체 (Standard Built-in Object) : 전역 범위의 여러 객체. 전역범위는 전역객체와 전역객체가 상속한 속성으로 이루어짐.자바스크립트가 기본적으로 가지고 있는 객체들을 의미 전역 객체는 아님.(전역 객체는 strict mode가 아닌경우 전역범위에서의 this, strict mode인 경우에는 globalThis로 접근가능한 객체) 전역범위의 나머지객체는 사용자 스크립트가 생성하거나 호스트 응용 프로그램이 제공한다. Intl 객체 : 각 언어에 맞는 문자비교, 숫자, 날짜비교를 제공하는 ECMAScript 국제화 API를 위한 namespace이다. Collator, NumberFormat, DateTimeFormat는 Intl 객체의 속성을 위한 생성자이다. Construc..
Electron 공식문서를 번역한 내용입니다. Manage your window's lifecycle 이제 브라우저 창을 열 수 있지만 각 플랫폼에서 더 네이티브하게 느끼도록 하려면 몇 가지 추가 boilerplate code가 필요합니다. 응용 프로그램 창은 OS마다 다르게 동작하며 Electron은 앱에서 이러한 규칙을 구현하는 책임을 개발자에게 전가한다. 일반적으로 process 글로벌의platform속성을 사용하여 특정 운영 체제에 대한 코드를 실행할 수 있습니다. Quit the app when all windows are closed (Windows & Linux) 윈도우와 리눅스에서 모든 윈도우를 종료하면 응용 프로그램이 완전히 종료된다. 이를 구현하려면 app 모듈의'window-all-..
Electron 공식문서를 번역한 내용과 글 하단의 출처에 적힌 블로그들을 참고하여 작성된 내용입니다. What is Electron? Electron은 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 프레임워크이다. Chromium과 Node.js를 바이너리에 내장함으로써 Electron은 하나의 JavaScript 코드베이스를 유지하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있습니다. Prerequisites 일렉트론 공식문서는 독자가 Node.js와 일반적인 웹 개발에 모두 익숙하다는 가정 하에 작성되어있다. 이 두가지 영역은 아래 링크를 통해 좀 더 알아볼 수 있다. Getting started with the Web (MDN) ..
SVG(Scalable Vector Graphics) 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어. 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계되어있고 HTML과 텍스트의 관계를 그래픽에 적용한 것. JPEG와PNG등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서 쉽게 처리할 수 있다. SVG: Scalable Vector Graphics | MDN SVG(Scalable Vector Graph..
