본문 바로가기

분류 전체보기253

Web Accessibility Tutorials(웹 접근성 자습서) 페이지 구조 개념 잘 설계된 content는 더 효율적인 네비게이션과 프로세스를 허용한다. HTML과 WAI-ARIA를 사용해, 네비게이션과 웹 지향성을 향상시킨다. 페이지 영역 HTML 및 WAI-ARIA를 사용하여 웹 페이지에서 영역을 식별하고 마크업한다. 라벨 영역 사용자가 라벨 영역을 구분하고 액세스 할 수 있도록 라벨을 지정한다. 제목 제목을 추가하고 관계 및 중요도에 따라 웹 페이지의 섹션에 레이블을 지정하기 위해 논리적으로 중첩시킨다. 콘텐츠 구조 적절하고 의미있는 요소를 사용하는 방식으로 콘텐츠를 마크업한다. Space Teddy Inc. Navigation Menu … An inside look at the new Space Teddy 6 Table of Contents … … Duis .. 2019. 8. 6.
Contrast Ratio(색 대비) 배경과 폰트 색깔 https://contrast-ratio.com/ Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy! How to use As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different c contrast-ratio.com 배경과 .. 2019. 8. 6.
[CSS] :before, :after 사용하는 방법 배경 모바일 일때와, 데스크톱 일때 밑의 사진처럼 ' / ' 이 필요할 때가 있고 필요하지 않을때가 있다. 이럴때 JS를 써야하나 싶지만 친절하게 CSS에서 지원해준다. HTML CSS .seperate:before{ content: " / "; } HTML CSS .seperate:before{ content: ""; display: block; } 이런식으로 CSS에 따라 글자를 넣고 뺄 때, :before, :after{ content: ""; } 를 사용해서 넣으면 된다. before와 after의 차이는 그 객체의 앞, 뒤에 넣느냐의 차이다. 2019년 12월 07일 추가 리본 스타일을 만들고 싶을 때에도 쓸 수 있다. https://codepen.io/nxworld/pen/oLdoWb Demo.. 2019. 7. 31.
리액트 네이티브 VS 플러터 리액트 네이티브: 페이스북 플러터: 구글 리액트 네이티브 : 모두 라이브러리 갖다 써야한다. 플러터 : 웬만하면 잘해놨다. 리액트 네이티브 : 자바스크립트라 배우기 수월하다. 플러터 : 언어를 처음부터 배워야한다. 2019. 7. 28.
background-size background에 이미지를 넣어서 사용할 때, cover containa만 써서 사용했는데 중앙 정렬을 맞추기 힘들었다. 그럴땐 background: url("/static/img/landing_front.png") no-repeat center center/contain; 로 맞추었다. 2019. 7. 25.
Date Time Picker https://flatpickr.js.org/ flatpickr Introduction Introduction flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any env flatpickr.js.org 웹, 안드로이드, 아이폰 모두 작동하며 IE9에서도 지원되는 아주 좋은 library다. 하지만 아이폰에서는 mindate같은 옵션을 추가하면 더블클릭으로만 .. 2019. 7. 15.
새로고침 및 뒤로가기 시 폼 유지 이벤트 window.onbeforeunload = function(e) { return false; }; 새로고침이나 뒤로가기로 인해 작성한 내용이 없어질 수 있을때 쓸 수 있다. 2019. 7. 4.
[CSS]여러 개의 버튼을 가운데 정렬하는 방법 CSS를 사용하여 여러 개의 버튼을 가운데 정렬하는 방법은 다양한 방식으로 구현할 수 있습니다. 여기서는 가장 간단하고 널리 사용되는 두 가지 방법을 설명하겠습니다. 1. Flexbox를 이용한 가운데 정렬: Flexbox는 요소들을 효율적으로 정렬하고 배치하기 위한 CSS 레이아웃 모델입니다. 버튼들을 가로 방향으로 배치하고 그 부모 컨테이너를 가운데 정렬하여 구현할 수 있습니다. HTML: 버튼1 버튼2 버튼3 CSS: .button-container { display: flex; justify-content: center; } CSS Grid를 이용한 가운데 정렬: CSS Grid는 요소들을 그리드(행과 열)로 배치하기 위한 CSS 레이아웃 모델입니다. 여러 개의 버튼을 그리드로 배치하고 부모 컨테.. 2019. 7. 4.
[밑바닥부터 시작하는 딥러닝] No module named 'dataset.mnist' 드디어 실용적인 단계로 넘어가는 듯 한 예제를 실행하려고 하는데No module named 'dataset.mnist'라고 하는 오류가 떠서 고쳐지지도 않고 다른 사람의 해결 방법도 먹지 않아서해결 방법을 적어본다. 1. 출판사 홈페이지에서 전체 소스코드를 다운받아 실행한다. 2. 구조를 분석해보고 mnist.py 의 위치가 dataset폴더에 있는데, 그게 마음에 안드는 듯 하다. 3. dataset폴더를 만들어주고 그 폴더 자체를 실행파일과 같은 경로에 넣어버린다. - 1st folder- 실행파일- dataset(folder) 이런 식으로. 그럼 상위 폴더로 갔다가 검색할 필요도 없이 그냥 해버린다. 2019. 2. 18.

티스토리툴바