본문 바로가기
동적 임포트(Dynamic Import) 이해하기 동적 임포트의 개념자바스크립트에서 동적 임포트를 사용하면 코드의 나머지 부분과 함께 초기에 로드하는 대신 자바스크립트 모듈을 동적으로 로드할 수 있습니다. 이는 웹 페이지나 애플리케이션의 초기 로드 시간을 줄이거나 사용자의 행동이나 기타 런타임 조건에 따라 모듈을 조건부로 로드할 필요가 있을 때 유용합니다.사용법 및 구문동적 임포트는 import() 함수를 사용하며, 이 함수는 모듈 객체를 포함하는 프라미스를 반환합니다. 이 모듈 객체는 일반적으로 모듈의 모든 내보내기를 포함합니다. 다음은 그 사용 방법입니다:import('module-name').then(module => { // 모듈 사용});동적 임포트와 함께 async/await을 사용할 수도 있습니다:async function loadMo..
CSS로 다크모드(라이트모드) 구현하는 방법 2가지 @media (prefers-color-scheme)prefers-color-scheme CSS 미디어 기능은 사용자가 시스템 환경 설정에서 밝은 색상 테마 또는 어두운 색상 테마를 요청했는지 감지하도록 설계되었습니다. 이를 통해 개발자는 사용자의 선호 테마에 맞게 웹사이트 또는 애플리케이션의 모습을 자동으로 조정할 수 있습니다.prefers-color-scheme 사용하기이 미디어 기능은 세 가지 값을 지원합니다:no-preference: 사용자가 테마 선호도를 지정하지 않았음을 나타냅니다. CSS에서는 불리언 컨텍스트에서 false로 평가됩니다.light: 사용자가 밝은 배경에 어두운 텍스트를 특징으로 하는 밝은 테마를 선호한다고 나타냅니다.dark: 사용자가 어두운 배경에 밝은 텍스트를 특징으로 하..
랜덤라이터 - 한글 랜덤 텍스트 생성기(한글입숨, 로렘입숨) 랜덤라이터 새 창으로 열기Vite와 Vanilla JavaScript를 사용하여 간단하지만 강력한 무작위 텍스트 생성기를 구축했습니다. 이 애플리케이션은 플레이스홀더 텍스트를 생성하는 데 도움이 될 뿐만 아니라 텍스트 길이를 사용자 정의할 수 있어 다양한 사용 사례에 유연하게 대응할 수 있습니다.왜 무작위 텍스트 생성기를 사용해야 할까요?무작위 텍스트 생성기는 웹 개발 및 디자인에 필수적인 도구입니다. 이들은 디자이너와 개발자가 실제 텍스트로 웹페이지가 어떻게 보일지 확인하게 해주며, 최종 콘텐츠가 준비되기 전에 디자인의 가독성과 미적 균형을 보장할 수 있도록 합니다. 또한, 이 도구는 디자인의 반응성을 테스트하는 데 도움이 되며, 다양한 장치 및 화면 크기에서 텍스트가 어떻게 흐르는지 확인할 수 있습니..
테일윈드(TailwindCSS)에서 다크모드 비활성화하기 TailwindCSS에서 다크 모드를 완전히 비활성화하는 것은 간단합니다. 기본적으로 tailwind.config.js에서 다크 모드와 관련된 구성을 설정하지 않으면 다크 모드 변형이 활성화되지 않습니다. 그러나 기존 구성이 있거나 명시적으로 다크 모드를 비활성화하고 싶다면 Tailwind 구성 파일을 수정할 수 있습니다.TailwindCSS에서 다크 모드 비활성화 방법tailwind.config.js 수정다크 모드를 비활성화하려면, darkMode 옵션이 설정되지 않았거나 명시적으로 false로 설정되었는지 확인하세요. 이는 Tailwind CSS가 다크 모드 변형을 생성하지 않도록 합니다. 별도의 클래스르 다크모드를 구현한 스타일링 코드가 있다면 해당 부분은 직접 제거해야 합니다.// tailwind..
디자인 개론 - 제2강 디자인의 요소와 원리 1️⃣ 디자인의 요소1) 개념의 요소 : 지각되지 않는 이론상의 요소 (점, 선, 면, 입체)· 모든 조형의 기본 요소· 이념상으로만 존재하는 요소 [1] 점- 형태를 지각하는 최소 단위- 위치만을 나타내며, 크기, 방향은 존재하지 않음- 가장 핵심- [포지티브] 명확히 지각되는 점- [네가티브] 선의 한계나 교차, 꼭지점 등의 점 [2] 선- 점이 이동한 흔적이나 자취- 두께와 폭은 없으며, 길이와 방향을 나타냄- 느낌  · 곡선 : 여성적, 우아, 자유스러움 (레이스)  · 수평선 : 평온, 평화, 무한함, 정적인 느낌 (지평선)· 수직선 : 희망, 상승, 권위, 숭고  · 사선 : 운동감, 속도감, 불안감 (산) [3] 면- 점의 확대, 선이 이동한 자취- 넓이는 존재하며, 두께는 없음- 입체를 생..
디자인 개론 - 제1강 디자인의 의미와 조건 1️⃣ 디자인의 의미1) 디자인의 유래· 라틴어의 데지그나레(Designare)에서 유래· 불어의 데생(Dessein)과도 연관됨· 구상하다, 기획하다, 계획하다· 설계, 도안, 의장· 그리다, 표현하다, 만들다· 산업혁명 이후 본격화 : 수공업이 없어지면서· 욕구 - 조형 - 재료 - 기술 과정을 거쳐 성립됨 2) 디자인의 정의· 도안이나 장식, 계획, 설계, 의장· 모든 조형 활동에 대한 종합적인 계획과 작업· 기능과 아름다움을 조화시키는 일체의 행위 3) 디자인의 목적· 기능성과 심미성의 조화를 극대화한다.· 인간의 생활보다 더 윤택하고, 편리함, 아름다움을 창조한다 2️⃣ 굿디자인의 조건1) 합목적성· 목적에 맞는 기능성· 실용성, 합리적, 객관적, 과..
웹디자인기능사 소개 : 전문성과 취업을 함께 얻을 수 있는 IT 첫걸음 웹디자인기능사 자격증은 웹사이트의 디자인과 구축에 관련된 전문 기술과 지식을 평가하여 인증하는 국가공인 자격증입니다. 웹 페이지를 계획하고, 디자인하며, 제작하는 능력을 갖추었다는 것을 공식적으로 인정받을 수 있는 자격증이죠. 이 자격증은 정보처리기술사, 정보처리기능사와 같은 다른 IT 관련 자격증과 마찬가지로 한국산업인력공단에서 주관합니다.웹디자인기능사 자격증의 장점1. 전문성 인정 - 웹디자인기능사 자격증을 취득하면 웹 디자인과 관련된 전문적인 지식과 기술을 갖추었다는 것을 업계에 인정받을 수 있습니다. 이는 직장에서 승진이나 이직 시 유리한 조건을 만들어 줄 수 있습니다.2. 취업 경쟁력 향상 - 많은 IT 및 디자인 관련 기업들은 구직자의 자격증 보유 여부를 중요한 채용 조건으로 삼기도..
전 세계 정부 공공 UI/UX 디자인 시스템(가이드) 소개 디지털 정부 서비스에서 디자인 시스템은 공공 부문 웹사이트와 애플리케이션 전반에 걸쳐 일관된, 사용자 친화적이며 접근 가능한 경험을 만드는 데 중요한 역할을 합니다. 전 세계 여러 정부가 이러한 시스템을 도입하여 일관성을 보장하고, 사용성을 개선하며, 온라인 공공 서비스의 효율성을 향상시키고 있습니다. 다음은 다른 국가들의 정부 디자인 시스템에 대한 사례 연구로, 각 국가 정부가 디자인 시스템을 구축하고 실행하는 방식을 보여줍니다. 미국: 미국 웹 디자인 시스템(USWDS) 미국 웹 디자인 시스템은 연방 웹사이트용 오픈 소스 디자인 시스템입니다. 접근 가능하고 모바일 친화적인 정부 웹사이트를 구축할 수 있는 일관된 프레임워크를 제공합니다. 시스템에는 디자인 원칙, UI 컴포넌트 및 시각 스타일이 포함되어..
외주/과외 문의

티스토리툴바