즐겁게, 코드

프론트엔드 개발자로의 취업을 준비하는 과정에서 자연스레 UI/UX에도 많은 관심을 갖게 되었는데요, 그러던 중 Diana Malewicz 님의 글을 읽으면서 한국어로 옮겨본 내용입니다. 오탈자 및 오역 지적은 소중히 받겠습니다! 😄 모던 미니멀 UI 스타일 가이드 : A guide to the Modern Minimal UI style 기능, 가독성, 매끄러움, 매력을 모두 갖는 UI 디자인하기 저는 오래 전부터 기능 및 시각적으로 매혹적인 새 디자인이 나타나기를 기다려 왔는데요, 오늘 다룰 모던 미니멀 UI는 오랜만에 제 마음에 쏙 들었습니다. 많은 인터페이스들의 디자인 스타일 유형을 보아왔을 때 눈길을 끌면서도 가독성이 좋고, 친근하면서 너무 튀지도 않는 인터페이스가 바로 UI의 기능성과 디자인을 모..

개인적으로는 색과 "선" 을 잘 사용하는 것이 감각적인 페이지 디자인의 성패를 결정한다고 생각하는데요, 사실 CSS에서 직사각형이 아닌 도형을 다루는게 마냥 쉽지는 않습니다. 😂 예를 들어 한쪽 귀퉁이가 접힌 사각형을 그려야 한다고 하면, 큰 사각형(하늘색)을 그린 후 흰색의 작은 사각형을 회전시켜 위에 포개는 방식으로 구현할 수 있습니다. 하지만 이건 너무 지저분하지 않나요? 모바일에서도 동일하게 보일 것이라는 보장도 없고, CSS의 신이 아닌 이상 몇 도를 회전시켜야 하는지 얼마나 Y축으로 이동시켜야 하는지 등을 한번에 예측하기 어렵습니다. 📎 clip-path 속성 그래서 이런 복잡한 도형을 구현할 때는 clip-path 라는 속성을 사용할 수 있습니다. clip-path 속성은 이미지나 요소를 말..

웹 개발과 디자인은 뗄레야 뗄 수 없는 관계인데요, 이번에는 font-awesome을 활용해 간단하게 디자인을 꾸미는 방법을 알아보겠습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com Font Awesome(FA)은 수많은 아이콘을 자체 라이브러리뿐만 아니라 SVG, 유니코드 등 다양한 포맷으로 제공하는데요, 정말 다양한 종류의 아이콘을 무료로 제공할 뿐만 아니라 크기와 색상 등의 커스텀도 얼마든지 가능해 많은 사랑을 받고 있습니다. CDN을 통해 아이콘 사용하기 (* 21년 2월 기준 FA 버전..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..