MY DEVICEBlogBlog2디바이스에서 컬러를 표현할 수 있는, 물리적인 수치를 가진 작은 점어떤 그리드에서 특정한 위치를 차지하는, 컬러의 정보를 담은 면적.어떠한 물리적 크기를 정의하거나 가지고 있지 않다.CSS 스펙이 정의한 픽셀 단위.특정한 물리적 크기를
Git Subtree는 상위 저장소에 파일을 직접 추가하고 트래킹한다. 자연히 서브트리의 파일 및 변경사항도 상위 저장소에 기록된다. 그리고 서브트리의 원격에 있는 소스와 상위 저장소에 있는 소스가 서로 달라도 subtree merge 기능을 사용해 양쪽의 변경사항을
💡 CHECK사전에 테마를 몇 가지 지정해두고 사용자가 선택하게 하는지?테마 별로 컬러 지정 필요 (기본, 다크테마, 라이트테마 등등)최상단 html에 클래스를 부여하면, 테마에 맞춰 일괄 변경됨사용자가 컬러 하나를 선택하면 그 컬러에 따라 채도/명도/밝기 등 단위로
연구소 팀의 모든 프로젝트는 IRIS-Design-Core 레파지토리를 Git Submodule/Subtree로 가져와서 style-core 폴더 하위에 담아 퍼블리싱 작업을 하고 있다.이 IDC 에셋을 제외하고 각각 프로젝트에서 사용하는 에셋(이미지, 아이콘, 스타일
문서의 최상위에서 바로 작성한 변수어떤 규칙도 포함되지 않고, 문서 어디서나 사용이 가능class | id가 선언된 블록 코드 { } 내에서만 유효 범위를 가짐정의한 블록의 상위 블록에서 절대사용할 수 없음!global 플래그를 사용하면 전역 변수로 사용할 수 있다.\
IE 지원 안함 blend-mode 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의하는데, 즉 배경의 혼합 상태를 정의한다.blend-mode는 크게 background-blend-mode 와 mix-blend-mode 로 설정할 수 있다.backgro
IE 지원 안함<img> 나 <video>, <svg>, <object> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정한다.프로필 이미지, 고정된 크기의 썸네일을 출력하는 경우에 제각각의 크기를 가진 콘텐츠
IE 지원 안함filter 속성은 흐림 효과나 색상 변형, 대비 조절 등 그래픽 효과를 요소에 적용한다. 보통 filter는 이미지, 배경, 테두리 렌더링을 조정하는데 쓰인다.img, svg, div 등에 적용할 수 있다.svg 필터를 가리키는 URI를 받는다.주어진
Reference파일에 저장된 정보의 형태나 형식을 데이터표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리, 처리 방식을 발한다.이메일 / 동영상 / 이미지 영역에서 많이 사용된다.Base64를 말 그대로 직역하면 64진법 이라는
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환이 된다. 이런 과정을 “형 변환” 이라고 한다. 이 외에 전달 받은 값을 의도를 갖고 원하는 타입으로 변환 (명시적 변환)해 주는 경우도 형 변환이라고 할 수 있다.문자형의 값이 필요할 때 문자형으로 형
브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능. 브라우저에서 제공하는 함수 메세지가 있는 작은 모달 창을 띄울 수 있는 함수다.텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 모달 창을 띄워주는 함수로 두 개의 인수를 받는다.title - 사용자에게
‘자바스크립트에서 값’은 항상, 문자열이나 숫자열 같은 특정한 자료형에 속한다.자바스크립트에는 여덟 가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있고, 따라서 변수는 어떤 순간에는 문자열일 수 있고 어떤 순간에는 숫자가 될 수 있
어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다.지시자( use strict) 이 지시자가 스크립트 회상단에 오면 스크립트 전체가 ‘모던한’ 방식으로 동작한다.use strict 는 반드시 스크립트 최상단에 있어야 한
애니메이션은 애니메이션을 나타내는 CSS 스타일과 sequence(분기)를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.transition 프로퍼티는 요소 프로퍼티 값이 다른 값으로 변화할 때 주로 사용하며, 요소의 로드와 함께 자동으로 동작되지 않는다
요소에 지정된 속성을 변환하고자 할 때 사용하는 속성속성 값으로 특정 CSS 속성을 지정하면 해당 속성만 변환되고, all을 지정할 경우 요소에 지정된 모든 속성이 변환된다. 2개 이상의 속성을 지정할 경우 콤마(,)로 구분하면 여러 개를 지정할 수 있다.변환이 진행되
Transform(변형) | 웹접근성과 웹표준(https://seulbinim.github.io/WSA/transform.html요소 박스를 변형하는 속성. 2차원 및 3차원 변형이 가능하며 변형 형태별로 함수 타입의 속성 값을 지정한다.HTML 요소 박스를
전체 요소를 대상으로 함인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 적용X 바로 하위 직계 Y만을 적용인접 선택자, X 아래에 있는 모든 Y 요소를 적용속성 선택자(Attribute selector), title 어트리뷰트 값을 갖는 요소만 적용속성 선택자(Attr
픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변
웹 페이지가 브라우저에서 렌더링이 될 때 위와 같은 흐름으로 보면 된다. CSSOM을 빌드하는 과정에서 웹 폰트 링크를 다운로드 하기 시작하는데, 이 때 웹 폰트 파일처럼 외부 링크로 연결된 파일이 다운로드가 완료되지 않았으면, 브라우저는 해당 파일을 사용하는 콘
@font-face 를 사용해서 웹 페이지의 텍스트에 온라인 폰트 (online fonts)를 적용할 수 있다. @font-face를 사용해서 디자이너가 원하는 폰트를 사용할 수 있게 함으로써, 컴퓨터에 설치된 폰트로만 사용해야 했던 제약이 없어지게 되었다!아래 예제에