사진과 실제가 다르게 보이는 경우가 많다. 몇 가지 이유가 있지만, 그 중 하나가 동시 대비 효과이다. 영어로는 Simultaneous Contrast 라고 한다. 한가지 계열의 색깔을 가진 한 오브젝트를 바라볼때, 인간은 그 속에서 디테일을 찾아내려고 하는 경향이 있다. 단순히 옐로가 아니라 옐로 안에서의 섬세한 대비를 인지하게 된다. 즉, 인간은 실제보다 과장된 대비를 실제라고 믿게 된다. 반면, 카메라는 … 동시 대비 효과 Simultaneous Contrast 더보기
Lab Color 는 RGB 나 CMYK 컬러 스페이스와는 완전히 다른 구조를 가진다. RGB나 CMYK 에서 작업하면, 어떤 채널을 만지든지 컨트라스트와 색상을 모두 변화시키게 된다. 하지만, Lab Color 스페이스를 사용하면, 컨트라스트는 L채널에서 결정되고 색상은 a, b 채널에서 담당한다. 즉, Lab Color 스페이스에서는 색상과 컨트라스트를 완전히 분리해서 작업할 수 있다. L 채널은 Lightness or Luminosity 채널이며 디테일을 … 랩 컬러 개념 Lab Color Space 더보기
‘wp_loaded’ hook을 사용해서, 어떤 기능을 실행했다. 한 번 페이지를 열면, 한 번 실행되는 것이 맞다. 그런데, 해당 function 이 두 번이나 실행되는 어처구니 없는 일이 계속 발생한다. 도대체 이유가 뭘까? 아무래도 페이지가 두 번 로드되는 것 같은데… 워드프레스 플러그인과 테마의 php 코드를 아무리 뜯어보아도 원인을 파악할 수가 없다. 오랜 시간을 코드 속을 헛되이 헤메이며 머리카락을 … 워드프레스 페이지 두 번 로드되는 현상 ( loading page twice ) 더보기
css 에서 불편한 점 중 하나가 반복적인 값을 반복적으로 기입해야하는 것이다. 변수(Variable) 을 사용할 수 있으면 얼마나 좋을까? scss 는 이 부분을 쉽게 해준다. 변수명 앞에는 달러 표시($)를 붙여준다. //Variable $text-color:#333; $font-family: Hevlvetica, Arial, sans-serif; * { box-sizing: border-box; } body { margin:0; padding:0; /* font-family: $font-family; font-size: 1.125em; line-height: 1.5; font-weight: 400; */ font: 400 1.125/1.5 … Variable 변수 사용하기 – scss 문법 3 더보기
아래 scss 파일을 살펴보자. 폰트 프라퍼티 (font-family,font-size,font-weight)를 보면 font 라는 단어가 반복된다. 이 부분을 좀 더 편하게 쓸 수는 없을까? scss 에서는 가능하다. * { box-sizing: border-box; } body { margin:0; padding:0; font-family: Hevlvetica, Arial, sans-serif; font-size: 1.125em; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; color: #333; &.boxed-layout { background-color: #F9F9F9; } } p { margin-bottom: … Nested Properties – scss 문법 2 더보기
워드프레스 사이트를 만들어놓고 한 참 후, Genymotion Android Emulator 라는 모바일 에뮬레이터를 사용하여 사이트를 테스트해보았다. 그런데, PC에서는 잘 작동하던 사이트가 먹통이되었다. 가만히 살펴보니, jquery 를 사용한 부분이 작동되지 않는다. Android API 18 이하의 버전에서 Webview 를 사용해 테스트해보니 jquery 부분이 모두 작동되지않는다. 그런데 안드로이드 API 19 이상에서는 잘 작동된다. PC Chrome 크롬에 Remote Device 기능을 이용해 … 워드프레스 jquery 적용 방법 더보기
sass 와 scss 에서 가장 중요한 특징 중 하나가 네스팅(nesting)이다. 네스팅은 한국말로 ‘둥지를 틀다’라는 뜻이지만, Sass 에서는 하나의 정의 안에 또 다른 정의를 하는 것을 말한다. 언듯 이해하기가 힘들 수 있으니, 예를 들어보자. 아래처럼 css 를 쓰려면 하나의 { } 안에 하나의 요소만 정의할 수 있다. 하지만, scss 또는 sass 에서는 하나의 { } 안에 … Nesting – scss 문법 1 더보기
워드프레스와 네이버 블로그를 연동해주는 플러그인으로 IdeaNaverSync 가 있다. 원래 NaverSync 라는 플러그인이 있었는데 더이상 작동하지 않고, IdeaNaverSync 가 활용가능한 유일한 플러그인인 것 같다. 코드를 뜯어보니 무척 짜임새 있게 잘 만들어져 있다. 그런데, 문제가 있다. Contents1 IdeaNaverSync 는 Custom Post Type 에서 작동하지 않는다.1.0.1 ⓐ 제 1단계 작업1.0.2 ⓑ 제 2단계 작업1.0.3 ⓒ 제 3단계 작업1.0.4 … 워드프레스 네이버 블로그 싱크 연동 플러그인 IdeaNaverSync 를 Custom Post Type 에 적용 더보기
sass 와 scss 는 SASS 의 두가지 형태이다. 각각 파일 확장자가 sass 나 scss 로 끝난다. sass 나 scss 나 모두 똑같이 css 파일로 컴파일되지만, 문법에 있어 약간의 차이가 있다. 각자 장단점이 있지만, scss가 최신 문법으로 css 에 보다 가깝고 최근에는 더 보편적으로 쓰인다. 매우 단순하게 차이점을 정리하면, sass 는 인텐트에 기반한 문법이고 scss 는 … sass vs scss 문법 차이 더보기
Contents1 SASS 는 무엇인가?2 SASS 설치방법 – Command Line 을 이용하기3 SASS 를 CSS 로 컴파일하기 – 커맨드라인4 SASS 를 css 로 컴파일하기 – 전용 프로그램 사용 SASS 는 무엇인가? Sass 는 preprocessor 이다. Preprocessor는 이미 존재하는 다른 랭귀지를 확장하여 그 작업을 더 간편하게 또는 빠르게 해주는 도구이다. Sass 는 css 작업을 위한 preprocessor인 셈이다. … Sass 는 무엇이며 어떻게 설치하나요? – Sass 설치방법 더보기
