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..

출처 : https://makeawebsitehub.com/css3-mega-cheat-sheet/ MakeaWebsiteHub.com 에서 CSS3 cheat sheet을 공개했습니다. (번역)CSS3의 주요 기능을 편리하게 인쇄가능한 카드로 표현했습니다.우리는 인쇄 가능한 CSS3 Cheat Sheet를 제공합니다. W3C에서 제공하는 CSS3의 모든 속성, 선택자, 사용할 수 있는 값의 목록입니다. 최대한 W3C 스펙의 섹션(모듈)과 밀접하게 연결시켜 각 속성들을 표현하기 위해 노력했습니다. 고해상도 PDF 다운로드 HTML5 Cheat Sheet MakeAWebsiteHub

이 포스트는 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) ..