공부하는 블로그 ✍️

✅ 12. 정지 기능 제공 - 자동으로 변경되는 콘텐츠는 움직임 제어할 수 있어야 한다 - 스크롤이나 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 한다 (1) 자동 변경 슬라이드 - 이전, 다음, 정지 기능을 제공해야 한다 - 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정된다 (2) 자동 변경 콘텐츠 실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지 않더라도 마우스 오버, 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하다면 준수한다고 간주한다 - 비 장애인들도 이전 콘텐츠를 보고 싶었는데 넘어간 경우, 이를 제어할 수 있는 기능을 제공해야 한다 - 스크롤 및 자동 ..

✅ 7. 콘텐츠 간의 구분 - 웹 페이지의 콘텐츠를 통해 정보를 인식할 때, 이웃한 콘텐츠는 시각적으로 구별될 수 있어야 한다 (1) 이웃한 콘텐츠 구분 방법 1. 테두리를 이용한 구분 2. 콘텐츠 사이에 시각적인 구분선을 삽입해 구분 3. 서로 다른 무늬를 이용한 구분 4. 콘텐츠 배경색 간의 명도 대비(채도)를 달리하여 구분 5. 줄 간격과 글자 간격을 조절하여 구분 6. 기타 콘텐츠를 시각적으로 구분하할 수 있는 방법을 통한 구분 ✅ 8. 키보드 사용 보장 - 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색한다 - 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다 - 즉, 마우스로 조작 가능한 기능과 키보드로 조작 가능한 기능을 동일하게 구현해야만..

✅ 2. 자막 제공 (1) 멀티미디어 대체 수단 제공 - 청각적으로 내용을 인식할 수 없는 사용자를 위해 시각적인 인식이 가능한 대체 수단 제공이 필요하다 - 대체 콘텐츠로는 자막, 대본, 원고, 수화 등이 있다 (2) 사용자가 업로드하는 멀티미디어 - 제 3자가 영상을 업로드하는 경우, 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공한다 (3) 음성이 나오지 않는 영상 - 멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는, 시각적 인식만이 가능하다 - 이런 경우는 따로 원고를 제공하는 등의 방법을 통해 대체 콘텐츠를 제공한다 ✅ 3. 색에 무관한 콘텐츠 인식 - 콘텐츠는 색상에 관계없이 인식이 가능하도록 작성되어야만 한다 - 색을 구분하지 못하더라도 콘텐츠 인식에 문제가 없어야 한다 - ..

✅ 1. 이미지에 대한 적절한 대체 텍스트 제공 - 시각적 정보 습득에 어려움이 있는 사용자는 스크린리더와 같은 보조 기술을 통해 콘텐츠를 이용한다 - 스크린리더가 페이지를 음성으로 설명하기 위해서 어떤 이미지인지를 말해주는 대체 텍스트가 필요하다 (1) alt로 대체 텍스트를 제공 - 이미지 요소를 마크업 할 때, 이미지를 텍스트로 설명하는 alternative 속성인 alt를 사용한다 - 이미지에 텍스트가 있는 경우에는 해당 텍스트를 'alt' 에 입력해준다 - 스크린 리더는 alt 의 값을 읽어 사용자에게 이미지를 설명하기 때문에 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공한다 - alt를 사용하지 않으면, 스크린 리더는 src에 있는 파일명을 읽어준다 - alt의 값에 공백이 있는 경우도 s..

📌 웹 접근성이란 ✅ 웹 접근성 - 접근성이란 사용자가 제품이나 서비스 등을 편리하게 이용할 수 있는 정도를 의미한다 - 사용자가 어떤 기술 환경에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장한다 - 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것 ✅ 웹 접근성을 지켜야하는 이유 (1) 장애인 차별 금지법(장차법) 장애인들도 비장애인과 동등하게 전자정보 및 비전자 정보 사용을 법적으로 의무화 (2) 장애인 차별 금지법 처벌 법적 진행 절차 (1) 1. (인권위) 민/형사 고발 2. 형사의 경우 3개월 이내 수사, 민사의 경우 손해 배상 제도 절차 3. 악의로 인정된 경우 3년 이하 징역 또는 3천만원 이하의 벌금에 처한다 (3) 장애인 차별 금지법 처벌 법..

블로그를 다시 열심히 하려고 이것저것 만져보다가 티스토리 블로그에 파비콘을 설정할 수 있다는 걸 알았다. 파비콘으로 쓰고자하는 이미지는 있는데, 파이콘에 필요한 ico 파일로 변경해야 한다. 포토샵에서 이렇게 저렇게 할 필요 없이 그냥 아래 사이트에서 바로 변경 가능하다. 단계별로 고대로 진행하면 된다. ICO Convert - Create Icons From PNG & JPG Images Online ICO Convert is a free online icon maker and favicon generator, with it you can make icons from png or jpg images, just upload a photo of yourself, resize and crop it, conv..

📌 Recap 제로베이스 네카라쿠배 JavaScript 강의를 완강하고, 복습하기 위해 정리해본다. [참고] 표준 내장 객체 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 - JavaScript | MDN 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org 2021-09-30 / Initial Posting 💛 형변환 title des code result String() Data type을 String으로 String(123); "123" Number() Data type을 Number로 Number(""); Numb..

📌 Django 프로젝트(3) 👉 프로젝트에 Application 추가하기 필요한 라이브러리 설치와 디렉토리 설정을 마쳤다면 이번에는 Django 프로젝트를 생성하며 자동 설정된 setting.py 를 필요에 맞게 수정하자. time zone은 현재 국가와 맞춰주고, Django와 연결할 데이터베이스 계정 정보를 수정해주어야한다. 1. application 통합 template 디렉토리 templates 만들기 - 디렉토리 생성 : Pycharm 프로젝트 폴더 안에 templates 생성 - 디렉토리 설정 : setting.py 에서 templates 디렉토리를 설정 # import os 'DIRS' : [os.path.join(BASE_DIR, 'templates'] 2. hello world (1) ..

📌 Django 프로젝트(2) 👉 초기설정 (setting.py) 과 DB 생성 필요한 라이브러리 설치와 디렉토리 설정을 마쳤다면 이번에는 Django 프로젝트를 생성하며 자동 설정된 setting.py 를 필요에 맞게 수정하자. time zone은 현재 국가와 맞춰주고, Django와 연결할 데이터베이스 계정 정보를 수정해주어야한다. 0. setting.py 파일 열기 1. time zone 설정 : 기본 설정인 'UTC' 대신 현재 국가를 넣어준다. (UTC → Asiz/Seoul) TIME_ZONE = 'Asia/Seoul' 2. database 설정 : 연결할 데이터베이스 정보를 입력 - mysql이 사용하고 있는 포트 확인 방법은 아래를 참고 - [WINDOW] : ** 추후 추가 예정 ** -..

📌 Mac에서 MySQL 다루기 Mac OS환경에서 mysql을 사용할 때에 필요하던 정보 정리해두자. 👉 mysql 설치 경로 확인하기 0. 맥 OS가 익숙하지 않아서 설치 경로 찾기가 힘들었는데 시스템 환경설정에서 쉽게 확인할 수 있었다. 1. 시스템 환경 설정 : MySQL 이 설치되어있다면, 하단에 돌고래 모양의 파일이 보임. 클릭. 2. 버전 정보 아래에 바로 설치 경로가 뜬다. 누르면 해당 경로로 이동한다. 👉 mysql 가 사용중인 포트 확인하기 1. 터미널을 켜서 아래 명령어 입력 sudo lsof -PiTCP -sTCP:LISTEN 2. 비밀번호를 입력하라고 나오는데 pc 로그인 비밀번호를 입력하면 된다. 그럼 포트 확인 가능! 👉 mysql 서버 켜기 1. 터미널을 켜서 아래 명령어 입..