본문 바로가기

전체 글22

BEM으로 클래스명 정하기 장점: - 가독성이 뛰어나다. - 재사용성이 높다. - 유지보수가 쉽다. - 검색 엔진 최적화(SEO)에 도움이 된다. 단점: - 클래스 이름이 길어질 수 있다. - 다른 클래스 네이밍 규칙과 다르므로 협업 시 일관성 유지가 어렵다. - 모든 프로젝트에 적용하기에는 지나치게 복잡할 수 있다.BEM은 무엇인가요?BEM(Block Element Modifier)은 웹 개발에서 사용되는 CSS 클래스 네이밍 규칙 중 하나입니다. BEM은 모듈식 CSS 아키텍처를 사용하여 CSS 클래스 이름을 구조화합니다. 클래스 이름은 블록, 요소 및 수정자로 구성됩니다.BEM의 명명규칙[block]__[element]--[modifier]블록(Block): 페이지 상에서 독립적으로 존재하는 블록의 이름을 나타냅니다.블록 이.. 2023. 4. 28.
이미지 포맷선택 (jpg, png, webp, avif ), webp/avif로 변환하는 방법 (SEO) 이미지 형식(jpg, png, webp, avif)은 모두 다른 특징과 용도를 가지고 있습니다. 각각의 장단점과 SEO 관점에서 어떤 것이 좋은지, 그리고 크로스 브라우징 방법에 대해 설명해보겠습니다. JPG(JPEG) JPG(JPEG)은 손실 압축 이미지 형식으로, 색상 수를 줄이면서 파일 크기를 줄입니다. 이는 대부분의 사진에 적합합니다. JPG 이미지는 압축률을 높일수록 이미지 품질이 떨어지므로, 이미지 품질이 중요한 경우에는 PNG, WebP, AVIF 형식을 고려해보는 것이 좋습니다. 장점: 파일 크기를 줄일 수 있습니다. 대부분의 브라우저에서 지원됩니다. 단점: 손실 압축 방식으로 이미지 품질이 떨어질 수 있습니다. 투명도를 지원하지 않습니다. PNG PNG는 비손실 압축 이미지 형식으로, 투.. 2023. 4. 28.
figma 토큰 디자인을 sass/scss에서 사용하는 방법 토큰 디자인의 변수 json 파일 예시: (tokens.json) { "color": { "primary": "#007bff", "secondary": "#6c757d", "success": "#28a745", "danger": "#dc3545", "warning": "#ffc107", "info": "#17a2b8", "light": "#f8f9fa", "dark": "#343a40" }, "font": { "family": "Arial, sans-serif", "size": { "xs": "12px", "sm": "14px", "base": "16px", "lg": "18px", "xl": "20px", "xxl": "24px" } }, "spacing": { "xxs": "4px", "xs": "8.. 2023. 4. 27.
디자인 시스템 width 피그마 토큰 플러그인 디자인 시스템이란? 디자인 시스템은 일관된 디자인과 사용자 경험을 제공하기 위한 일련의 가이드라인, 도구, 자산 및 프로세스를 포함하는 포괄적인 디자인 컨셉입니다. 디자인 시스템은 다음과 같은 장점을 제공합니다. 일관성: 디자인 시스템은 일관된 디자인과 사용자 경험을 제공합니다. 이는 사용자들이 제품의 인터페이스를 이해하고, 쉽게 사용하고, 빠르게 학습할 수 있도록 도와줍니다. 생산성 향상: 디자인 시스템은 재사용 가능한 디자인 요소를 제공하므로 디자인 작업 시간과 비용을 절약할 수 있습니다. 협업 용이성: 디자인 시스템은 디자인 팀과 개발 팀 간의 협업을 용이하게 합니다. 모든 팀원은 일관된 디자인 시스템을 공유하고, 이를 기반으로 개발할 수 있습니다. 브랜드 아이덴티티 강화: 디자인 시스템은 브랜드 .. 2023. 4. 27.

티스토리툴바