지속가능한 개발

요소의 alt 속성을 생략해도 되는 경우 이미지에 적절한 설명을 제공하기 어려울 때 구조에서 요소로 이미지 설명을 제공할 때 이미지 설명 은 비시각장애인에게도 제공되는 정보를 담으며 을 쓸 경우 스크린리더가 두 번 읽어주지 않도록 의 alt 속성은 생략해주는 게 좋다. '앨리스가 왼쪽, 밥이 오른쪽에 있다'와 같은 정보는 비시각장애인에게도 유용한 정보일 수 있으므로 에 써줘도 좋다. 뒤로 가기용 화살표 버튼, 메시지 읽음 여부로 달라지는 편지 봉투 아이콘 등 상호작용이 가능한 기능성 이미지일 경우 대신 의 alt 속성을 사용한다. ('파란색 왼쪽 화살표(모양)'가 아닌 '뒤로 가기(기능)'로 표기) Reference https://stackoverflow.com/questions/58447538/acce..

해결 방법 바로 가기 npm 패키지를 전역으로 실행하면 권한 에러 문제가 발생할 수 있어 npm 문서에선 노드 버전 매니저로 nodejs를 다운받는 것을 권장. 윈도우용 nvm(안내 문서 / 설치,삭제 방법)을 다운받았다. nvm list available 명령어로 설치 가능 버전 목록을 보고 Current(최신 기능 제공, 업데이트가 잦음, 홀수로 시작) / LTS(Long Term Supported: 안정되고 신뢰도가 높은 버전, 짝수로 시작) 중 LTS로 설치... C:\WINDOWS\system32>nvm list available C:\WINDOWS\system32>nvm install 14.16.1 설치하려 했으나 다음과 같은 오류 발생 C:\Users\������\AppData\Roaming..

아래는 Sass 공식 홈페이지의 가이드(sass-lang.com/guide)를 발췌 번역하고 생활코딩(opentutorials.org/module/237/2489)의 설명을 일부 참고해 정리한 글입니다. - 프로젝트 규모가 커지면 HTML 요소를 꾸며주는 선택자(selector)가 중복되면서 유지 보수에 비효율이 발생하는데 이를 보완해주는 것이 바로 전처리기(preprocessor)다. - 대표적인 전처리기로는 Less, Sass(SCSS), Stylus가 있다. - Sass(Syntactically Awesome Style Sheets)는 2006년에 등장해 성숙도와 사용도가 높은 편이다. - Sass엔 CSS엔 없는 변수(variables), 중첩(nesting), 재사용(mixins), 상속(inh..

빠르고 작지만 기능이 풍부한 자바스크립트 라이브러리 손쉬운 DOM 조작, 이벤트 핸들링, 애니메이션, Ajax 작업 API 크로스 브라우징 지원 최근 경향 브라우저와 Javascript가 발전하면서 클라이언트 단에서 렌더링 + 서버는 렌더링에 필요한 데이터만 제공(REST API / GraphQL) jQuery의 가장 큰 장점은 DOM 조작이 쉽고 크로스 브라우징 이슈가 적다는 것이었는데 최근엔 DOM을 직접 조작하기보다 상태 관리 라이브러리/프레임워크를 통해 컴포넌트 단위의 상태(state)에 따라 DOM을 렌더링하는 추세 간단히 살펴보기 jQuery 작동 방식 파일 다운로드 jQuery 파일을 다운받아 HTML 파일 위치와 같은 폴더에 저장한다. 압축 버전은 성능 향상에 좋고 비압축 버전은 디버깅에 ..

코로나 방역을 위한 미국 주요 도시의 폐쇄 정책이 몇 달째 제각각입니다. 이 때문에 소비자들이 상점의 영업 여부를 파악하기 어려워지자 애플과 구글이 실시간 정보 격차 해소를 위해 적극 나서고 있다고 합니다. 지역 정부가 공식 웹사이트에 전반적인 가이드라인을 게시하는 한편 두 기업이 iOS 지도앱과 구글맵을 통해 식당의 조정된 영업 시간과 픽업 서비스, 임시 영업 중단 정보를 업데이트하는 것이죠. 또 앱의 '수정 제안하기' 기능을 통해 잘못됐거나 지난 정보를 사용자가 수정할 수 있도록 해 정보의 정확도를 올리기도 합니다. 애플 지도앱은 옐프 제공 식당 목록 페이지에 임시 / 영구 영업 중단 여부와 영업 시간을 표기하고 구글은 식당 정보 페이지에 식사, 포장, 배달 가능 여부를 추가했습니다. 그래도 혹시 몰..

"시각 장애인이 음성 안내만으로 웹사이트를 쉽게 이해할 수 있도록 직접 눈을 감고 syntax를 작성해라" "적성이 있는진 모르고 시작했으나 산만한 내가 몇 시간씩 붙들고 있는 걸 보면 재미있는 건 확실하다. 재미있는 걸 계속해서 하다 보면 잘하게 되는 날이 온다고 믿는다." "https://www.w3.org/standards/ Standards - W3C W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, ..

node.js는 브라우저 없이도 자바스크립트를 실행할 수 있게 하는 엔진 nodejs와 webAPI에 consoleAPI가 있고 인터페이스가 동일 Application Programming Interface 브라우저가 이해할 수 있는 함수 +가구 만들기 키트처럼 이미 만들어진 코드의 집합체 개발자가 쉬운 구현을 하도록 돕는 프로그램 cf) cs50에서 printf/scanf 함수 쓰려고 #include 포함 #include 헤더파일 포함 개발자 도구 html, css는 elements에서 확인 js는 console에서 확인 + 작성 가능 ECMA문서보다 MDN에서 JS 참고 추천 브라우저가 JS 코드를 한 줄 한 줄 PARSING, 분석 → DOM(Document Object Model) 요소로 변환 S..

위 표는 KOSIS에서 가져온 최근 10년 소비자물가지수 통계 자료이다. 엑셀에서 시계열 도표로 바꿨을 때 X축에 연도가 아닌 위와 같은 숫자로 표시되는 경우가 있다. 이때 연도에 해당하는 셀들만 드래그하면 위처럼 오류 표시가 뜨는데 숫자의 서식이 텍스트로 지정되어서 나타나는 문제다. 저 오류 표시를 클릭해 숫자로 변환하면 0~12였던 X축이 연도로 바뀐다. 연도의 범위를 표와 일치시키고 싶다면? X축을 더블 클릭했을 때 나타나는 축 옵션 - 표시 형식 - 원본에 연결의 체크를 해제한 후 축 옵션 - 경계 - 최소, 최대 범위와 단위를 원하는 범위로 바꿔주면 위처럼 연도의 범위가 표와 일치하게 된다.