본문 바로가기

전체보기

CSS 기술 학습 자료(웹사이트) 소개 CSS 학습을 위한 최고의 자료: 포괄적인 가이드CSS를 학습할 때 초급부터 고급까지 안내해주는 고품질의 자료를 접하는 것이 중요합니다. 다음은 CSS를 마스터하는 데 도움이 되는 최고의 일반 CSS 학습 자료입니다:1. MDN Web DocsMozilla Developer Network (MDN)는 CSS에 대한 광범위하고 잘 문서화된 가이드를 제공합니다. 기본 문법과 선택자부터 애니메이션 및 사용자 정의 속성과 같은 고급 주제까지 모두 다룹니다. MDN은 포괄적인 설명과 예제로 모든 수준의 학습자에게 가치 있는 자료입니다.MDN Web Docs: CSS2. CodecademyCodecademy는 CSS에 대한 인터랙티브하고 실습적인 학습 경험을 제공합니다. 이들의 강의는 프로젝트와 퀴즈를 포함하여 학..
심화 CSS 기술 학습 자료(웹사이트) 소개 심화 CSS 기술, 특히 삼각 함수와 마스킹을 포함한 고급 기술을 깊이 파고들고자 한다면, 아래의 훌륭한 자료들이 도움이 될 것입니다. 이 자료들은 여러분의 스킬과 지식을 향상시키는 데 큰 도움이 될 것입니다.1. Frontend Masters: CSS 마스크 및 삼각 함수를 사용한 꽃 모양 만들기이 튜토리얼은 CSS 마스크와 삼각 함수를 사용하여 꽃과 같은 복잡한 모양을 만드는 방법을 보여줍니다. SVG 없이도 정교한 디자인을 만들 수 있는 CSS의 힘을 탐구하는 상세한 가이드입니다.Frontend Masters: CSS 마스크 및 삼각 함수를 사용한 꽃 모양 만들기2. LogRocket 블로그: CSS 삼각 함수의 실용적인 응용이 기사에서는 삼각 함수를 사용하여 삼각형 및 평행사변형과 같은 모양을 만..
CSS Flexbox(플렉스)와 Grid(그리드) 학습 사이트 소개 프론트엔드 개발자를 위한 CSS 학습 리소스CSS를 배우는 과정에서 인터랙티브하고 흥미로운 리소스는 큰 도움이 됩니다. 잘 알려진 도구 중 하나는 Flexbox Froggy로, CSS 코드를 작성하여 개구리를 도와주는 게임입니다. 그러나 이 외에도 훌륭한 리소스가 많이 있습니다. 학습 경험을 향상시킬 수 있는 실용적이고 잘 알려진 CSS 학습 도구를 소개합니다. 다만 하기 자료들은 대부분 영어 기반이기에 영어를 기반으로 학습을 하거나, 번역 도구를 활용해 학습하시기를 권장합니다:1. Flexbox FroggyFlexbox Froggy는 CSS Flexbox의 기본 개념을 가르치는 재미있는 게임입니다. 개구리를 릴리패드로 안내하면서 justify-content, align-items 등 다양한 Flexbo..
[CSS라이브러리] shadcn/ui 소개: 아름답게 설계된 컴포넌트 라이브러리 shadcn/ui란 무엇인가요?shadcn/ui는 현대 웹 애플리케이션 제작을 단순화하기 위해 설계된 오픈 소스 컴포넌트 라이브러리입니다. 시각적으로 매력적이고 접근 가능한 다양한 컴포넌트를 제공하며, 이를 프로젝트에 쉽게 복사하여 붙여넣을 수 있어 웹 개발을 더욱 효율적이고 즐겁게 만듭니다.주요 특징접근성: 모든 컴포넌트가 접근성 표준을 충족하여 누구나 사용할 수 있는 더 나은 사용자 경험을 제공합니다.맞춤화: 광범위한 맞춤화를 통해 컴포넌트를 디자인 언어에 쉽게 맞출 수 있습니다.사용의 용이성: 사용자 친화적으로 설계되어 명확한 문서와 예제로 빠른 통합을 지원합니다.성능: 컴포넌트는 성능 최적화를 통해 빠른 로드 시간과 원활한 상호 작용을 보장합니다.광범위한 컴포넌트 라이브러리shadcn/ui는 다양..
[CSS라이브러리] Radix UI 소개: 세련된 UI 컴포넌트 라이브러리 Radix UI란 무엇인가요?Radix UI는 웹 개발 프로세스를 개선하기 위해 정교하게 설계된 오픈 소스 컴포넌트 라이브러리입니다. 고품질의 접근 가능한 UI 컴포넌트를 포괄적으로 제공하여 빠른 개발과 쉬운 유지 보수를 지원합니다.주요 특징접근성: Radix UI는 접근성을 우선시하여 모든 컴포넌트가 최고 실천 사례와 표준을 준수하도록 설계되었습니다.맞춤화: 컴포넌트는 매우 맞춤화 가능하여 특정 디자인 요구에 맞게 손쉽게 조정할 수 있습니다.성능: 성능을 위해 설계된 Radix UI 컴포넌트는 빠른 로드 시간과 효율적인 작동을 보장합니다.사용 용이성: 명확하고 상세한 문서와 실용적인 예제를 제공하여 초보자도 쉽게 접근할 수 있습니다.포괄적인 컴포넌트 컬렉션Radix UI는 다양한 UI 요구를 충족하는 ..
대체텍스트용 엘리먼트(visually-hidden) 만들기 접근성 준수를 위해 스크린리더용 텍스트 엘리먼트를 별도로 만드는 방법에 대해 소개하고자 합니다. 테일윈드 등 대부분 UI 프레임워크는 기본적으로 내장하고 있는 내용이지만, 별도의 코드를 통해 구현하고 싶은 경우 활용할 수 있습니다.HTML이 텍스트는 스크린 리더용입니다.CSS.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}설명position: absolute;: 요소를 절대 위치시켜 문서 흐름에서 제거합니다.width: 1px; 및 height: 1px;: 요소를 거의 눈에 띄지 않는 ..
유튜브를 통해 접근성용 한글 자막 자동으로 생성하기 웹 접근성 준수를 위해서는 동영상 컨텐츠에 대한 자막 제공이 필수적으로 이뤄져야 합니다. 수기로 자막을 쓰는 것도 방법일 수는 있지만, 시간이 많이 걸리는 작업이기에 자동으로 자막을 생성해 주는 방법을 알아 보고자 합니다.유튜브를 통해 한글 자막 자동으로 생성하기자막을 생성해 주는 프로그램은 여러가지 있지만, 대부분 영어 중심의 텍스트 추출에 초점을 두고, 한글과 같은 언어와는 호환성이 떨어지는 편입니다. 한글 언어에 대한 자동 자막 추출을 지원하는 프로그램 중 가장 좋은 것은 유튜브 스튜디오입니다. 다음은 유튜브 스튜디오를 통해 한글 영상의 자막을 추출하는 방법을 설명하고자 합니다.영상을 업로드한 후 자막 생성 후 다운로드방법은 간단합니다. 우선 당연하게도 유튜브 계정이 있어야 하며, 유튜브 프로필 버..
웹 접근성 준수 지침 - 인식의 용이성 - 2. 자막 제공 2. 자막 제공멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.1) 멀티미디어자막 또는 대본 또는 수화를 제공한다.2) 사용자가 업로드하는 멀티미디어대체 콘텐츠를 제공할 수 있도록 안내하고 툴을 제공한다.3) 음성이 나오지 않는 멀티미디어청각적으로도 인식이 가능하도록 원고 등의 대체 콘텐츠를 제공한다.
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바