야무 yamoo9

8pt Grid

8pt 그리드를 활용해 타이포그래피, 아이콘, 레이아웃을 작성하고 UI 디자인을 시작해보세요. 8pt 그리드를 사용하는 것이 가장 좋은 이유는 거의 모든 디지털 디자인 프로젝트 또는 제품 디자인에 적용 가능하기 때문입니다.

픽셀(px)이 아닌, 포인트(pt)

iPhone XR의 너비(width)는 414×896픽셀(px)이 아닙니다. 828×1792 픽셀입니다. 2배 커진 크기죠. iPhone XR은 일반 화면(Regular Display)보다 PPI(인치당 픽셀 수)가 2배인 Retina 디스플레이를 사용하므로 2배 크기로 화면에 렌더링됩니다. (너비 2배, 높이 2배의 픽셀이 필요하기에 실제 필요한 픽셀 개수는 4배입니다)

	/**
	* 이듬(E.UID) 라이브러리
	* 블렌디드 러닝: yamoo9.github.io/EUID
	* 작성자: yamoo9.naver.com
	*/
	var EUID = {
	_version: '0.0.1',

	// querySelector() = IE 9+
	// 참고: https://caniuse.com/#feat=queryselector

	// GotoTop 컴포넌트 모듈
	(function GotoTopComponent() {
	'use strict';

	// @생성자_함수(ES6, class 역할)
	function GotoTop(domNode, options) {

	// 문서객체를 참조하여 컴포넌트 안에서 사용합니다.
	this._button = domNode;

	<div class="container">
	<h2 class="h2 a11y-hidden">일반 캐러셀 데모</h2>
	<div id="caro1"
	class="carousel"
	aria-roledescription="상품 캐러셀"
	aria-label="OOO 상품 쇼케이스">
	<div class="carousel__controls">
	<button type="button"
	class="button carousel__button carousel__button--prev"
	aria-controls="carousel-slides">이전</button>

	import gsap from 'gsap'
	import { mixins, makeArray } from '../utils'

	/**
	* Carousel 클래스 생성 과정에서 전달된 인자의 유효성 검사 함수
	* @private
	*/
	const validateArgs = (selector, options = {}) => {
	if (typeof selector !== 'string')
	throw new Error('첫번째 인자인 선택자(selector)는 문자 값을 전달해야 합니다.')

	(function (global) {
	'use strict';

	function animate(render, duration, easing, callback) {
	duration = duration \|\| 400;
	easing = easing ? animate.easings[easing] : animate.easings['linear'];
	var start = performance.now();
	requestAnimationFrame(function _animate(time) {
	var timeFraction = (time - start) / duration;
	var progress = easing(timeFraction);

	{

	"Vue TS Component": {
	"prefix": "v-component",
	"description": "Vue TypeScript 컴포넌트",
	"body": [
	"import Vue from 'vue';",
	"import { Component${1:, Prop, Emit, Watch} } from 'vue-property-decorator';",
	"",
	"@Component({$3})",

	/! jquery.ajax.extends.js @ 2018, yamoo9.net /
	;(function(global, $) {
	'use strict';

	if (!$) { throw new Error('jQuery 라이브러리를 호출해야 사용 가능합니다.'); }

	if ( !$.put ) {
	$.put = function(api_with_id, put_data, success, fail) {
	$.ajax({
	method: 'PUT',

	var PathAnimate = (function(global){
	'use strict';

	// ——————————————————————————————————————
	// PRIVATE
	// ——————————————————————————————————————
	function getLength(el) {
	if(el.nodeName) {
	var tagName = el.nodeName.toLowerCase(), d;
	if(tagName === 'path') {

	<!DOCTYPE html>
	<html lang="ko-KR">
	<head>
	<meta charset="UTF-8">
	<title>iPhone Notch(v자형 새김을 뜻함) 디자인 대응법</title>

	<!-- 참고: https://goo.gl/oXuCuy -->

	<!-- 방법 1. body 요소의 배경 색 설정 -->
	<style>