Skip to content

Instantly share code, notes, and snippets.

View yamoo9's full-sized avatar
🎓
Blended Learning

야무 yamoo9

🎓
Blended Learning
670 followers · 0 following
View GitHub Profile
@yamoo9
yamoo9 / index.slim
Created December 19, 2012 00:06
A CodePen by 야무. RWD Media :: jQuery Plugin - 반응형 웹 디자인에 적용 가능한 유연한 미디어(embed, object, iframe) 처리 jQuery 플러그인입니다.
div#page
/ vimeo 영상
iframe class="rwd-video" src="http://player.vimeo.com/video/48857883?title=0&byline=0&portrait=0&color=ff9933" width="400" height="300" webkitAllowFullScreen mozallowfullscreen allowFullScreen
/ youtube 영상
iframe class="rwd-video" width="640" height="360" src="http://www.youtube-nocookie.com/embed/rHAKK6eDsU4?list=PLvaeCFvGpjsNc9lvJ2TribIiN3-g8Bkyu&hl=ko_KR" allowfullscreen
@yamoo9
yamoo9 / _shapes.scss
Last active August 29, 2015 14:02
CSS3 도형(원, 삼각형)을 빠르게 그릴 수 있는 SASS 믹스인: Create Configurable CSS3 Shapes with SASS Mixins
// CSS3 둥근 테두리
// https://developer.mozilla.org/ko/docs/CSS/border-radius
@mixin border-radius ($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
// CSS3 배경 위치 설정
// http://www.css3.info/preview/background-origin-and-background-clip/
@yamoo9
yamoo9 / _ir+each.scss
Created June 3, 2014 04:35
이미지대체기법 + SASS @each문 활용
// 이미지 대체기법
// http://nicolasgallagher.com/another-css-image-replacement-technique/
// https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7
%ir {
font: 0/0 a;
color: transparent;
text-shadow: none;
}
// SASS 리스트(Lists) 데이터 타입 선언
@yamoo9
yamoo9 / _text-contrast-function.scss
Created June 3, 2014 07:55
텍스트/배경 색상 대조를 조정하는 SASS 사용자 정의 함수
// 배경색상에 대한 대조(contrast) 글꼴 컬러를 설정하는 사용자 정의 함수
@function contrast-text($bgcolor, $amount: 50%) {
$text-color: null;
// 유효성 검사
@if type-of($bgcolor) != color {
@warn "전달받은 인자의 데이터 형이 잘못되었습니다. color 형이 필요합니다.";
@debug "전달 받은 인자 $bgcolor 값은 #{type-of($bgcolor)} 입니다.";
}
@yamoo9
yamoo9 / config.rb
Created June 9, 2014 23:25
Compass 프로젝트 config.rb
# Compass 플러그인 추가
# CSS 파일 기본 인코딩(Default Encoding) 설정
# Windows에서 한글, 일어, 중국어 등 SCSS 파일을 CSS로 컴파일 시 문자 인코딩 에러가 생길 경우
# 아래 코드를 설정하여 기본 인코딩을 UTF-8로 설정하면 문제가 해결됨.
Encoding.default_external = "utf-8"
# 프로젝트 내 폴더 경로 지정
http_path = "/"
css_dir = "css"
@yamoo9
yamoo9 / improveIR.js
Last active April 22, 2016 13:22
CSS Background 이미지 대체기법(Image Replacement Tech.) 사용시, 문제가 되는 접근성을 해결하기 위한 방법입니다.
/*! improveIR.js © yamoo9.net, 2014
* CSS (on), Img (off) 로컬호스팅, 웹서버 환경에서만 테스팅 가능
* Windows High Contrast 모드 테스팅은 로컬 환경에서도 가능
*/
// 참조URL
// http://blog.paciellogroup.com/2011/10/detecting-if-images-are-disabled-in-browsers/
// http://blog.paciellogroup.com/2012/08/notes-on-accessible-css-image-sprites/
// http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
@yamoo9
yamoo9 / toggleFirstLayersVisible.jsx
Created June 23, 2014 12:10
포토샵 첫번째 레이어(그룹) 토글 스크립트
/*! toggleFirstLayersVisible.jsx(첫번째 레이어 보임/숨김 토글 스크립트), 2013 @ yamoo9.net */
(function(docuemnt){
var firstLayers = docuemnt.layers[0];
firstLayers.visible = !firstLayers.visible;
})(activeDocument);
@yamoo9
yamoo9 / terminal_poweshell_cmd.txt
Created June 24, 2014 10:20
terminal 또는 powershell(installed gow) 에서 Compass 프로젝트 생성 시, 사용되는 명령어
# --------------------------------------------------------------------------
# 윈도우(Windows) CMD/Powershell + Gow(https://github.com/bmatzelle/gow/wiki)
# --------------------------------------------------------------------------
# 기본 정보
$ whoami 사용자 정보를 보여줍니다.
$ ipconfig IP 정보를 보여줍니다.
$ ver windows 버전을 보여줍니다.
# 날짜/시간
@yamoo9
yamoo9 / Gemfile
Created June 27, 2014 10:50
bundler를 사용하여 다수의 gem 파일 설치를 위한 Gemfile 코드 (bundle init → bundle install)
source 'http://rubygems.org'
gem 'compass', '~>1.0.0.alpha.13'
gem 'breakpoint', '~>2.4.2'
gem 'singularitygs', '~>1.2.0.rc.6'
gem 'singularity-extras', '~>1.0.0.alpha.3'
gem 'toolkit', '~>2.0.0.alpha.7'
gem 'susy', :git => 'git://github.com/ericam/susy.git', :tag => 'v1.0.rc.1'
@yamoo9
yamoo9 / grid.scss
Last active August 29, 2015 14:03
960.gs 그리드 시스템 생성기(Grid System Generater) Using Sass
@mixin generate-960gs (
$grid_count: 12
) {
@if($grid_count != 12 or $grid_count != 16 or $grid_count != 24) {
@warn "960 그리드 시스템에 해당하는 숫자 값이 아닙니다.";
@debug "입력하신 전달인자 $grid_count 값은 #{$grid_count}(#{type-of($grid_count)}) 입니다.";
}
// =======================================
// Grid Options
// =======================================