Skip to content

Instantly share code, notes, and snippets.

View yamoo9's full-sized avatar
🎓
Blended Learning

야무 yamoo9

🎓
Blended Learning
  • Mentor of E.UID
  • South korea
  • X @yamoo9
View GitHub Profile
@yamoo9
yamoo9 / Product.css
Created June 26, 2024 16:42
Product & ProductList 스타일링
@layer components {
.Product {
--padding: 8px;
--round: 4px;
--border-weight: 0.5px;
--gap: 12px;
--color: 200, 15%, 42%;
--border-color: hsla(var(--color), 0.3);
--background-color: color-mix(in srgb, hsl(var(--color)) 2%, white 100%);
@yamoo9
yamoo9 / avatars.json
Last active June 25, 2024 20:08
Avatar 리스트 데이터
[
{
"id": "avatar-1",
"filename": "man-01",
"ext": "jpg",
"name": "박성준",
"isOnline": false
},
{
"id": "avatar-2",
@yamoo9
yamoo9 / search-form.html
Created June 25, 2024 18:35
검색 폼 HTML 마크업
<form method="get" action="/search">
<img src="search.png" alt="돋보기">
<br>
<label>
검색어
<input name="term" type="search">
</label>
<button type="submit">검색</button>
</form>
@yamoo9
yamoo9 / globals.css
Created June 23, 2024 12:07
글로벌 스타일 파일
:root {
--primary-rgb: 8, 126, 164;
--primary-rgba: var(--primary-rgb), 1;
--forground-rgb: 10, 24, 48;
--forground-rgba: var(--forground-rgb), 1;
--background-rgb: 200, 245, 255;
--background-rgba: var(--background-rgb), 0.3;
--inner-space: 8px 16px;
--spacing: 4px;
--rounded: 4px;
@yamoo9
yamoo9 / react-logo.svg
Created June 18, 2024 08:17
React 로고 (2023) SVG 파일
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@yamoo9
yamoo9 / bundleCSS.js
Created July 6, 2023 02:08
CSS 번들링 프로그램 (Node.js)
import { readFile, writeFile } from 'node:fs/promises';
import { existsSync, mkdirSync } from 'node:fs';
import { resolve } from 'node:path';
import { argv } from 'node:process';
const { cssDir, entryFile, outDir, outFile } = parseOptions();
const CSS_DIR = cssDir ?? 'src';
const ENTRY_FILE = entryFile ?? 'main.css';
const OUTPUT_DIR = outDir ?? 'styles';
@yamoo9
yamoo9 / _mixins.scss
Created September 5, 2022 07:37
font 믹스인 예시
@use "sass:meta" as *;
@use "sass:list";
@use "sass:string";
@function get-value($props, $key) {
$index: list.index($props, $key);
@if $index != null {
$value: list.nth($props, $index + 1);
@return if(type-of($value) != string, $value, string.unquote($value));
} @else {
@yamoo9
yamoo9 / validator.js
Last active January 3, 2022 00:04
폼 유효성 검사 유틸리티 - validator
/* eslint-disable no-useless-escape */
/* -------------------------------------------------------------------------- */
// 아이디 체크 유틸리티
// ▸ 5 ~ 20자 — 영문, 숫자 조합
/* -------------------------------------------------------------------------- */
export const isId = (value, { min = 4, max = 19 } = {}) => {
const regExp = new RegExp(`^[a-z]+[a-z0-9]{${min},${max}}$`, 'g');
return regExp.test(value);
@yamoo9
yamoo9 / focusOrTabbable.js
Last active December 22, 2021 22:42
focusable 또는 tabbable 할 수 있는 HTML 요소 검사 및 리스트 반환 유틸리티
/* -------------------------------------------------------------------------- */
/* FOCUSABLE (tabindex="-1" 포함) */
/* -------------------------------------------------------------------------- */
const focusableSelector = `
a[href],
area[href],
button,
input,
select,
@yamoo9
yamoo9 / Gridlover.markdown.md
Created February 25, 2020 14:26
Gridlover - 8pt Grid

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배입니다)