본문 바로가기
웹디자인기능사 - 디자인 개론 - 제3강 색의 기본 원리 1️⃣ 색의 의미- 색이란 우리 눈을 자극함으로써 생기는 지각현상- 빛에 의한 물체의 반사, 흡수등을 통해 얻어짐- 추상체 : 밝은 곳에서 색을 구별하는 시세포- 간상체 : 어두운 곳에서 명암을 구별하는 시세포2️⃣ 색채- 물리적인 색의 현상과 더불어 생리적, 심리적 현상에 의한 시감각- 상징성, 의미성, 연상 등의 현상  3️⃣ 빛의 정의- 전자파의 일종으로 인간이 볼 수 있는 가시광선을 의미함- 시지각의 근본이 되며, 형태, 색채, 질감 등을 보이도록 함[스펙트럼]  - 가시광선 : 380nm~780nm  - 380nm 이하 : 자외선, X선  - 780nm 이상 : 적외선, 라디오, TV전파 등 4️⃣ 물체의 색- 빛의 자극에 의해서 고유한 색을 가진 것처럼 보이게 됨 표면색(반사), 평면색(실제 ..
동적 임포트(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) 합목적성· 목적에 맞는 기능성· 실용성, 합리적, 객관적, 과학적· 디자인의 1차 조건 2) 심미성· 아름..
웹디자인기능사 소개 : 전문성과 취업을 함께 얻을 수 있는 IT 첫걸음 웹디자인기능사 자격증은 웹사이트의 디자인과 구축에 관련된 전문 기술과 지식을 평가하여 인증하는 국가공인 자격증입니다. 웹 페이지를 계획하고, 디자인하며, 제작하는 능력을 갖추었다는 것을 공식적으로 인정받을 수 있는 자격증이죠. 이 자격증은 정보처리기술사, 정보처리기능사와 같은 다른 IT 관련 자격증과 마찬가지로 한국산업인력공단에서 주관합니다.웹디자인기능사 자격증의 장점1. 전문성 인정 - 웹디자인기능사 자격증을 취득하면 웹 디자인과 관련된 전문적인 지식과 기술을 갖추었다는 것을 업계에 인정받을 수 있습니다. 이는 직장에서 승진이나 이직 시 유리한 조건을 만들어 줄 수 있습니다.2. 취업 경쟁력 향상 - 많은 IT 및 디자인 관련 기업들은 구직자의 자격증 보유 여부를 중요한 채용 조건으로 삼기도..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바