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

	@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%);

	[
	{
	"id": "avatar-1",
	"filename": "man-01",
	"ext": "jpg",
	"name": "박성준",
	"isOnline": false
	},
	{
	"id": "avatar-2",

	<form method="get" action="/search">
	<img src="search.png" alt="돋보기">
	<br>
	<label>
	검색어
	<input name="term" type="search">
	</label>
	<button type="submit">검색</button>
	</form>

	: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;

	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';

	@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 {

	/* 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);

	/* -------------------------------------------------------------------------- */
	/* FOCUSABLE (tabindex="-1" 포함) */
	/* -------------------------------------------------------------------------- */

	const focusableSelector = `
	a[href],
	area[href],
	button,
	input,
	select,