Web Standard

grayscale( [ | ] ) 0.0 ~ 1.0 사이의 값 입력 0 인 경우 적용하지 않음 1인 경우 모든 색상값을 잃고 흑백으로 변환됨 See the Pen filter : grayscale by Yunyong Yi (@yunyong) on CodePen. hue-rotate( ) hue(색조, 색상)을 변경 함 angle(각도)를 지정할 수 있으며, 0 인 경우 변화 없음 360deg, 720deg 도 마찬가지로 변화가 없음 See the Pen filter : hue-rotate by Yunyong Yi (@yunyong) on CodePen. saturate( [ | ] ) 채도를 변경 함 1인 경우 변화 없음 음수는 지정할 수 없으며, 1 보다 큰 수 지정 가능 ( 9 는 900% 효과) S..

이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다. CSSStyleSheet 인터페이스 인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다. 아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다. console 창에 로그를 찍어보면 사용 가능한 메소드..

CSSOM 이란? MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 ..

처음부터 가이드를 잘 따라왔다면 “Hello webpack” 이 보여지는 작은 프로젝트를 가지고 있을 것입니다. 이제 몇몇 다른 에셋들(이미지등)을 병합시키는 방법을 알아보겠습니다. 이전 웹팩에서는, 프론트엔드 개발자들이 이 에셋들을 처리하고, /src 폴더에서 /dist 나 /build 폴더로 옮기기 위해 그런트나 걸프같은 툴을 사용했습니다. 같은 아이디어가 Javascript 모듈에 사용되었지만, 웹팩같은 툴은 동적으로 모든 의존성 번들을 처리 했습니다(의존성 그래프 생성). 이것이 대단한 이유는, 이제 모든 모듈이 의존성을 명시적으로 선언하고, 사용하지 않는 모듈들을 번들에서 제외할 수 있기 때문입니다. 웹팩의 가장 멋진 기능 중 하나는 Javascript 외에 로더가 있는 어떤 종류의 파일도 포함..

이 포스트는 Learn CSS Grid in 5 Minute 를 한글로 번역한 글입니다. CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) 웹 레이아웃의 미래를 위한 퀵 튜토리얼 그리드 레이아웃은 웹사이트 디자인의 주요한 요소이고, CSS 그리드 모듈은 그것을 구현해줄 수 있는 가장 강력하고 쉬운 툴이다. 개인적으로, 부트스트랩같은 것들보다 훨씬 좋다. (그 이유는 여기) 또한 최근 이 모듈은 주요 브라우저(Safari, Chrome, Firefox, Edge)에서 기본적으로 지원하기때문에, 머지않아 모든 프론트엔드 개발자들은 이 기술을 배워야 한다고 생각한다. 이 글에서, 가능한 빠르게 CSS 그리드의 아주 기본적인 부분만 알아볼 것이다. 기초를 이해하는데 있어서 신경..

css에서도 변수나 조건문을 쓸 수 있다. 아직 draft상태이긴 하나.. 표준으로 채택되고 브라우저 지원률이 확대된다면 페이지 테마등을 한방에 바꾸는게 편해질것 같다. 조건문을 써서 css3를 지원하지 않는 브라우저에 대한 분기를 태워준다던지 (어차피 안먹는건 무시하긴 하겠지만..) 페이지별 스타일도 따로 관리가 가능하시겠다. 간단히 어떤 내용인지 알아보도록 하자. (각 제목을 클릭하면 w3c 관련 페이지로 이동합니다.) CSS Variables 배경 CSS의 특징 상 다양한 정보들이 흩어져서 선언됨 ex) 페이지의 일관된 색구성이 여러 위치에서 작성됨 기획이나 색상정보가 변경될때, 찾아 바꾸기로는 한계가 있음 LESS나 SASS 처럼 추가적인 작업 없이 구현할 순 없을까? 변수 (Variables) ..