코딩기록

웹접근성1-1. 텍스트가 화면에는 안 보이고 스크린리더기만 읽게 하는 방법CSS에 설정  class이름은 "sr-only"로!!display: none;이걸 쓰면 폭망. 화면에도 안 보이고 스크린 리더기도 못 읽는다. 아예 정보가 존재하지 않게 돼서 레이아웃도 틀어진다. 보통 클래스 이름을 '스크린리더기만'이라는 의미의 sr(screen reader)-onlysr-only를 많이 쓴다.[css].sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); white-space: nowrap; /* 줄바꿈 강제 금지 */}..

[html]aria-label="원하는 텍스트적기"    [css]가상요소 content 에 아리아 라벨을 쓰면 html에 적은 aria-label의 텍스트를 불러온다.일반적으로 content에 쌍따옴표"" 안에 텍스트를 쓰는 것과 동일한 효과이다.content: attr(aria-label).link:hover .button::before { content: attr(aria-label); /* content: "구매하기" */}

a태그안에 img를 넣고 a태그에 border를 주는데 아래 그림처럼[html]         [css]a {border: 1px; solid blue; a, 앵커태그가 생각보다 짧다 그이유는?[css]a {display: block;border: 1px; solid blue;  a태그의 기본 display  속성 때문이다.display: block; 설정후 다시 확인하면 border 가 제대로 보인다.또 이렇게 해야 span태그도 제대로 포함시킬수 있다.

1. 알고리즘 복잡도입력 크기의 값에 대해 단위 연산을 몇  번 수행하는지 계산하여, 알고리즘의 수행시간을 평가하는 방법. 3가지 점근적 표현법O(빅오): 최악의 상황을 고려하여 성능 측정 결과 표현.Θ(세타): 평균적인 경우에서의 성능 측정 결과 표현.Ω(오메가): 최선의 상황일 때의 성능 측정 결과 표현.  2. 경우의 수 (순열과 조합)어떤 사건 혹은 일이 일어날 수 있는 경우의 가짓수를 수로 표현완전탐색으로 경우의 수를 푸는 알고리즘순열: 서로 다른 n 개의 원소 중에서 r를 중복 없이 골라 순서에 상관 있게 나열하는 경우의 수 (nPr)조합: 서로 다른 n개의 원소 중에서 r를 중복 없이 골라 순서에 상관 없이 나열하는 경우의 수 (nCr)중복 순열: 서로 다른 n개의 원소 중에서 r개를 중복 ..

1. 객체를 배열로  -  [ ]를 씌운다.  기존 { } 코드에 배열을 씌운다let array = { id: 1, content: 'Javascript', completed: false };const newArray = [ array ];//console.log(newArray);[ { id: 1, content: 'Javascript', completed: false } ] 2.  객체를 배열로  -  Object.entries()자바스크립트에서 사용되는 참조값  object(객체)와 array(배열) 이 있는데 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다. Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배..

자주쓰는 js 문법 모음*배열안 객체 찾기 [  {~~}, {~~}, {~~}  ] 예제const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content: 'Javascript', completed: false },];console.log(getValues(todos, 'id')); // [3, 2, 1]console.log(getValues(todos, 'content')); // ['HTML', 'CSS', 'Javascript']console.log(getValues(todos, 'completed')); // [false, true, fal..

문제 설명문자열 str과 정수 배열 indices가 주어질 때, str에서 indices의 원소에 해당하는 인덱스의 글자를 지우고 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요.제한사항1 ≤ indices의 길이 str은 영소문자로만 이루어져 있습니다0 ≤ indices의 원소 indices의 원소는 모두 서로 다릅니다.입출력 예 strindicesresult"apporoograpemmemprs"1, 16, 6, 15, 0, 10, 11, 3]"programmers" 입출력 예 설명입출력 예 #1예제 1번의 str의 인덱스가 잘 보이도록 표를 만들면 다음과 같습니다.index 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18strapporoo..

문제 설명문자열 str과 정수 배열 indices가 매개변수로 주어집니다. str의 indices의 원소들에 해당하는 인덱스의 글자들을 순서대로 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요.제한사항1 ≤ str의 길이 ≤ 1,000str의 원소는 영소문자로 이루어져 있습니다.1 ≤ indices의 길이 ≤ 1,0000 ≤ indices의 원소 입출력 예 strindicesresult"cvsgiorszzzmrpaqpe"[16, 6, 5, 3, 12, 14, 11, 11, 17, 12, 7]"programmers""zpiaz"[1, 2, 0, 0, 3]"pizza" 입출력 예 설명입출력 예 #1예제 1번의 str에서 인덱스 3, 5, 6, 11, 12, 14, 16, 17에 해..

문제 설명정수가 담긴 리스트 nums가 주어집니다. nums의 홀수만 순서대로 이어 붙인 수와 짝수만 순서대로 이어 붙인 수의 합을 return하도록 solution 함수를 완성해주세요.제한사항2 ≤ nums의 길이 ≤ 101 ≤ nums의 원소 ≤ 9nums에는 적어도 한 개씩의 짝수와 홀수가 있습니다.입출력 예numsresult[3, 4, 5, 2, 1]393[5, 7, 8, 3]581 입출력 예 설명입출력 예 #1홀수만 이어 붙인 수는 351이고 짝수만 이어 붙인 수는 42입니다. 두 수의 합은 393입니다.입출력 예 #2홀수만 이어 붙인 수는 573이고 짝수만 이어 붙인 수는 8입니다. 두 수의 합은 581입니다.const solution = nums => { // do something};co..

문제 설명어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다.문자열 str이 매개변수로 주어질 때, str의 모든 접미사를 사전순으로 정렬한 문자열 배열을 return 하는 solution 함수를 작성해 주세요.제한사항str은 알파벳 소문자로만 이루어져 있습니다.1 ≤ str의 길이 ≤ 100입출력 예str result"banana"["a", "ana", "anana", "banana", "na", "nana"]"programmers"["ammers", "ers", "grammers", "mers", "mmers", "ogrammers", "progra..

문제 설명길이가 같은 두 문자열 str1과 str2가 주어집니다.두 문자열의 각 문자가 앞에서부터 서로 번갈아가면서 한 번씩 등장하는 문자열을 만들어 return 하는 solution 함수를 완성해 주세요.제한사항1 ≤ str1의 길이 = str2의 길이 ≤ 10str1과 str2는 알파벳 소문자로 이루어진 문자열입니다. 입출력 예str1 str2 result"aaaaa""bbbbb""ababababab" const solution = (str1, str2) => { // do something};console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'   풀이1.  map, concat 으로 문자 뒤에 문자 붙여 배열로 반환   // const result..

37장 Set과 Map  37-1. Set Set 객체는 중복되지 않는 유일한 값들의 집합. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있음.이러한 Set 객체 특성은 수학적 집합의 특성과 일치함. Set은 수학적 집합을 구현하기 위한 자료구조임. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있음. 1). Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성함. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성됨.   [예제 37-01]   const set = new Set();   console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성함. 이때 이터러블의 중복된 값은 Set..

문제 todos 배열과 todos 배열의 특정 요소의 id를 인수로 전달하면 해당 요소의 completed 프로퍼티 값을 반전한 todos 배열을 반환한다.todos 배열 요소의 id 프로퍼티 값은 절대 중복되지 않는다.for 문, for…in 문, for…of 문, Array#forEach, Array#splice는 사용하지 않는다.todos 배열을 변경하지 않는다.const toggleCompletedById = (todos, id) => { /* Do something */ };const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content..

문제 todos 배열에서 완료(completed: true)한 할일의 갯수를 구해 반환한다.for 문, for…in 문, for…of 문, Array#forEach는 사용하지 않는다.todos 배열을 변경하지 않는다.const countCompletedTodos = todos => { /* Do something */ };const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content: 'Javascript', completed: false }];console.log(countCompletedTodos(todos)); // 1  풀이1번풀이 - ..

문제 todos 배열의 모든 요소의 completed 프로퍼티 값을 true로 설정해 todos 배열을 반환한다.for 문, for…in 문, for…of 문, Array#forEach는 사용하지 않는다.todos 배열을 변경하지 않는다. const toggleCompletedAll = todos => { /* Do something */ };const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content: 'Javascript', completed: false }];console.log(toggleCompletedAll(todos));/*[ ..

문제 todos 배열과 todos 배열의 특정 요소의 id를 인수로 전달하면 해당 요소의 completed 프로퍼티 값을 반전한 todos 배열을 반환한다.todos 배열 요소의 id 프로퍼티 값은 절대 중복되지 않는다.for 문, for…in 문, for…of 문, Array#forEach, Array#splice는 사용하지 않는다.todos 배열을 변경하지 않는다.const toggleCompletedById = (todos, id) => { /* Do something */ };const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content..

문제todos 배열과 todos 배열에서 삭제할 요소의 id를 인수로 전달하면 해당 요소를 삭제해 todos 배열을 반환한다.todos 배열 요소의 id 프로퍼티 값은 절대 중복되지 않는다.for 문, for…in 문, for…of 문, Array#forEach, Array#splice는 사용하지 않는다.todos 배열을 변경하지 않는다. const removeTodo = (todos, id) => { /* Do something */ };const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content: 'Javascript', completed..