본문 바로가기

전체보기

디자인 개론 - 제5강 색의 지각효과와 감정효과 1️⃣ 색의 대비 1) 정의- 하나의 색이 그 주위의 색의 영향을 받아 실제 색과 다르게 지각되는 현상- 색이 다르게 보이거나 강조되는 현상- 우리 눈에서 일어나는 생리적인 현상과 신경과정에서 일어남 2) 동시대비- 가까이 있는 두가지 이상의 색을 동시에 볼 때 다르게 지각되는 현상 [1] 색상대비- 근접한 색의 영향을 받아 색상 차가 크게 느껴지는 현상[2] 명도대비- 명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상- 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴진다.- 동시대비 중에서 가장 예만하게 작용된다. [3] 채도대비- 채도가 다른 두 색의 영향에 의해 채도차가 크게 느껴지는 현상- 무채색끼리는 채도 대비가 일어나지 않음 [4] 보색대비- 색상 차이가 가장 많이 나는 ..
디자인 개론 - 제4강 색의 혼합 및 표시방법 1️⃣ 색의 혼합1) 정의- 서로 다른 성질의 색이 섞이는 것- 두 개 이상의 색광 또는 색료가 혼합되는 색감각- 가산 혼합, 감산 혼합, 중간 혼합 등2) 감산 혼합- 감색, 감법, 색료의 혼합- 혼합할수록 어두워지는 색, 물감, 잉크, 인쇄 등의 혼합 - 색의 3원색 : 마젠타(Magenta), 옐로우(Yellow), 시안(Cyan)3) 가산 혼합- 가법, 플러스, 빛의 혼합- 혼합할수록 밝아지는 빛, 무대조명, 스크린, 모니터 등의 혼합- 빛의 3원색 : 빨강(Red), 녹색(Green), 파랑(Blue)2️⃣ 물체의 색1) 중간 혼합- 실제 혼합된 것처럼 보이는 시각적 혼합- 회전 혼합, 병치 혼합 2) 회전 혼합- 두 개 이상의 색을 회전하여 혼합되어 보이는 현상 - 맥스웰의 회전판이라고도 함 ..
디자인 개론 - 제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] 면- 점의 확대, 선이 이동한 자취- 넓이는 존재하며, 두께는 없음- 입체를 생..
외주/과외 문의

티스토리툴바