분류 전체보기45 웹 표준화의 중요성: 왜 웹 개발에서 준수해야 할까? "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 웹 디자이너와 개발자로서 우리 모두는 멋진 웹 사이트를 만들고자 노력합니다. 그러나 이를 가능하게 하는 데는 웹 표준화를 준수하는 것이 중요한 역할을 합니다. 웹 표준화는 웹 개발에서 필수적인 원칙으로, 왜 그렇게 중요한지 살펴보겠습니다. 1. 다양한 플랫폼 및 브라우저 호환성 웹 표준을 준수하면 웹 사이트가 다양한 브라우저와 플랫폼에서 일관되게 표시됩니다. 이는 사용자들이 어떤 브라우저나 기기를 사용하더라도 웹 사이트에 쉽게 접근하고 사용할 수 있음을 의미합니다. 웹 표준을 따르지 않으면 웹 사이트가 특정 브라우저에서만 제대로 작동하거나 일부 기기에서만 보이는 문제가 발생할 수 있습니다. 2. 검색 엔진 최적화 .. 2023. 9. 11. 웹 디자인의 핵심 원칙과 트렌드 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 1. 웹 디자인의 기본 원칙 UI vs. UX 디자인: 사용자 인터페이스 (UI)와 사용자 경험 (UX) 디자인의 차이 및 중요성에 대한 설명. Responsiveness: 모바일 및 데스크톱 장치에서 웹 사이트가 어떻게 동작해야 하는지에 대한 가이드. 칼러 팔레트와 타이포그래피: 웹 사이트의 시각적 요소를 개선하기 위한 적절한 색상 및 글꼴 선택 방법. 2. 웹 디자인 트렌드 플랫 디자인 vs. 스케머 디자인: 각 스타일의 특징과 언제 사용해야 하는지에 대한 비교. 애니메이션 및 마이크로 인터랙션: 사용자의 관심을 끌기 위해 웹 사이트에 애니메이션과 마이크로 인터랙션을 적용하는 방법. 다크 모드: 웹 사이트에 어.. 2023. 9. 11. 시작일/종료일을 선택하는 DatePicker 구현하기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 1. HTML 구성 먼저 HTML 파일을 생성하고 DatePicker를 위한 두 개의 입력 필드를 추가합니다. 시작일: 종료일: 2. JavaScript로 DatePicker 동작 추가 이제 JavaScript를 사용하여 DatePicker를 동작하게 만들어 보겠습니다. 아래의 코드는 시작일과 종료일 간의 유효성을 검사하고, 종료일이 시작일보다 이후인 경우 경고를 표시합니다. document.addEventListener("DOMContentLoaded", function () { const startDateInput = document.getElementById("start-date"); const endDate.. 2023. 9. 5. 서비스의 효율성 향상을 위한 UX 원칙 1. 사용빈도가 높거나 중요한 기능은 바로 접근할 수 있어야 합니다. 사용자 행동과 사용 맥락에 대한 이해를 바탕으로 사용자가 자주 쓰거나 중요한 기능 및 정보에 대해 즉시 접근할 수 있도록 디자인해야 합니다. 대표적인 예시는 단축 실행 방법인 숏컷(Shortcut)과 단축키입니다. 사용빈도가 높은 기능이나 정보를 상위 항목에서 제공하면, 탐색을 줄여 효율적인 접근이 가능해집니다. [이미지 3]은 대표적인 지도 앱인 ‘TMap’과 ‘네이버지도’의 메인 화면인데요. 화면 하단에는 사용자가 자주 검색한 목적지 리스트를 사용 빈도 및 최신성에 기반해 우선순위로 추천합니다. 여행이나 출장과 같이 특별한 이벤트에는 새로운 장소를 검색하기도 하지만, 주로 사용자는 자주 검색했던 장소로 다시 이동하는 경우가 많습니다.. 2023. 1. 9. 플러그인 예제 모음 ChartJS : https://jsfiddle.net/y82r56un/200/ DatePicker : https://jsfiddle.net/w8ajceuf/2/ 2022. 11. 11. [jQuery] 제이쿼리로 Roulette(룰렛) 이벤트 구현하기 룰렛 스타일의 이벤트는 사용자에게 재미와 흥미를 제공하는 데 유용합니다. jQuery를 사용하여 이미지를 돌리는 간단한 룰렛 이벤트를 만들어보겠습니다. 1. HTML 구조 먼저 HTML 구조를 설정합니다. 룰렛 이미지와 시작 버튼을 포함하는 간단한 구조를 만듭니다. 시작 2. CSS 스타일링 이미지와 버튼의 스타일을 원하는대로 추가합니다. 'styles.css' 파일을 사용하여 스타일링합니다. /* styles.css */ .roulette-container { text-align: center; } .roulette { width: 300px; transition: transform 5s ease-in-out; } #start-button { font-size: 18px; padding: 10px 20.. 2021. 11. 19. 휴대폰/디바이스 별 해상도 / Galaxy 폴더폰 해상도 / Galaxy Flip 3 / Galaxy Fold 3 해상도 휴대폰 및 디바이스 별 일반적인 해상도 Apple Products iPhone Pixel Size Viewport iPhone XR 828 x 1792 414 x 896 iPhone XS 1125 x 2436 375 x 812 iPhone XS Max 1242 x 2688 414 x 896 iPhone X 1125 x 2436 375 x 812 iPhone 8 Plus 1080 x 1920 414 x 736 iPhone 8 750 x 1334 375 x 667 iPhone 7 Plus 1080 x 1920 414 x 736 iPhone 7 750 x 1334 375 x 667 iPhone 6 Plus/6S Plus 1080 x 1920 414 x 736 iPhone 6/6S 750 x 1334 375 x.. 2021. 11. 18. [jQuery] 플러그인 없는 아코디언 Accordion 부트스트랩이나 플러그인을 사용하지 않은 아코디언 입니다. css에서 이미지를 변경하여 화살표를 바꿀 수 있으며, 다른 조건을 주어서 js를 수정할 수 있습니다. 2021. 10. 18. [JS] 스크롤 진행률 표시줄 / scroll indicator pixels와 pageHeight값으로 현제 사용하는 값을 구한 후 progress로 100%수치로 전환 시킨다. 추가적으로 실제 텍스트로 보여질 수치는 소수점을 잘라서 표기한다. 2021. 6. 7. [jQuery] 제이쿼리 keyup 숫자만 입력 가능한 input input에 type="number"가 아닌 text로 숫자만 입력이 가능하게, keyup()메소드를 이용하여 val()값이 숫자가 아닌 다른 값이 들어올 경우 replace(/[^0-9]/g, "")를 이용하여 필터링 하는 방식입니다. 선택자는 별도로 변경하셔서 커스텀으로 사용할 수 있습니다. 2021. 4. 19. [JS] Input 검색 필터 / 검색 창 만들기 (복제), input 검색 딜레이 / 검색 필터 딜레이 전에 Input 검색 필터 생성버전으로 추가하는 형식이였다. 이번 방식은 #searchBox에 있는 #noResult를 clone()메소드를 이용하여 생성하는 방식이다. 앞에 게시물에 추가하지 못했던 검색 시 딜레이를 추가하여 제작했다. 검색 시 딜레이를 주지 않으면, 타이핑을 칠때마다 js를 읽기 때문에, 딜레이를 주어서 타이핑이 끝날때 js를 읽도록 하는 방식입니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 19. [JS] Input 검색 필터 / 검색 창 만들기 (생성) input에 keyup 메소드로 위아래 방향키와 엔터를 눌렀을때 이벤트가 발생되도록 했습니다. nav클래스는 데이터를 불러오기위해 숨겨놓고 input에서 타이핑 시 val값을 가져와 데이터와 매핑을 한 후 append로 searchBox에 생성되는 형식입니다. 더불어 한글을 사용 할 경우 length를 이용해 2개나 3개 이상 타이핑 시 검색을 할 수 있게 if문을 사용 했습니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 15. [CSS] 커스텀 셀렉트박스 디자인 / Custom Select Design 기존 셀렉트 박스는 노멀하게 사용이 가능하지만 핸들링 및 디자인이 어렵게 되있는 단점이 있습니다. 그렇기 때문에 위처럼 커스텀마이징으로 셀렉트 박스를 이용하는 경우가 있습니다. 2021. 2. 24. [JS] Table input checkbox All click / 테이블 전체 체크 테이블 에서 를 전체 체크하거나 해제하는 방법입니다. 테이블해더의 인풋을 클릭하면 전체 체크가 되며 테이블바디의 인풋을 클릭 시에도 전체체크 헤제 및 선택이 가능합니다. 2021. 2. 22. (3) [jQuery] 제이쿼리 Fade 사라지기 이벤트 / jq fadeIn fadeout JQ 제이쿼리 기본 메서드 중에서 Fade 사용법을 알려드리겠습니다. 저번에 알려 드렸던 클릭 이벤트에 응용 하서 적용시켰습니다. show hide 이벤트 보다 부드럽고 매끄러운 효과를 줄 수 있는 이벤트입니다. 추가적으로 fade이벤트는 딜레이를 주어 빠르거나 느리게 이벤트를 적용할 수 있습니다. ex) 숫자, fast, slow 2020. 12. 28. (2) [jQuery] 제이쿼리 클릭(click) 시 show, hide / 보이기 숨기기 저번 시간에 이어서 JQ 제이쿼리 기본 메서드 중에서 show, hide 응용법을 알려드리겠습니다. 위 예시처럼 버튼에 클릭 이벤트를 부여해서 show 버튼에는 show 이벤트가 hide 버튼 엔 hide 이벤트가 있습니다. 그렇기 때문에 텍스트가 보였다가 숨겼다가 하는 show, hide 응용 사용이 가능합니다. 2020. 12. 28. (1) [jQuery] 제이쿼리 show, hide 이벤트 JQ 제이쿼리 기본 메서드 중에서 show, hide 사용법을 알려드리겠습니다. 위 예시처럼 jq에서 선택자인 test1은 hide 이벤트로 숨겨지며, show는 기존 element 디폴트가 show이기 때문에 이벤트를 안 주어도 show 이벤트처럼 보입니다. 다음에는 오늘 배운 2가지 이벤트를 응용하는 법을 알려드리겠습니다. 2020. 12. 28. [JS] input type file 파일 미리보기 수정 삭제 기능 이번에는 파일 업로드 시 미리보기 가능 수정 삭제 입니다. input type="file"은 별도로 커스텀으로 css로 변경이 가능하며 미리보기 구역의 크기또한 조절이 가능하다. 2020. 9. 12. [JS] 네이버 에디터 스타일 제거 이미지 제거 문자만 추출 하기 네이버 에디터 2에서 미리보기 형식 또는 리스트 형식입니다. 게시판에 뿌려질때, 에디터에 적용된 스타일 적용되지 않게 나와야 하므로, 위 js를 사용하여 div 안에 있는 element 스타일은 모두 제거가 된다. 2020. 9. 3. [JS] 이미지 업로드 미리보기 소스 뽑기 별도로 리소스 및 플로그인 없이 사용이 가능한 코드입니다. 다른 미리보기는 이미지 소스값을 뽑을때 inputinput type="file"이 체인지로 사라지는 경우가 있습니다. 위 코드는 input type="file"를 체인지 되지않고 숨긴상태로 있어 소스를 뽑을때 유용할 것 입니다. 2020. 9. 3. 이전 1 2 3 다음
