코딩기록

vertical-align:middle;  전에도 헤맸던 부분인데[ html ] 오늘의 발견 | 오늘 쿠팡이 엄선한 가장 핫한 제품 [ css ].title h4,.title p { display: inline; vertical-align: middle;}  vertical-align: middle 을 .line, .title p 에 주어서 css가 안먹혔다. h4, p는 블럭요소라 inline을 주었고 그곳에서 수직정렬을 해야한다.  만약 div로 텍스트를 감싼 경우라면 display:table-cell; 과  vertical-align: middle 을 같이 쓰면된다.

은 가로 라인을 만드는 태그다이 태그를 꾸밀 수있다. css에서 border를 none으로 설정하고 height와 bacground-color를 설정한다.[css]hr { height: 1px; border: none; background-color: lightgray;}  완성!❤😍

1. 부트스트랩 아이콘 홈피에서 svg 주소를 html에 붙인다.   2. 마우스 호버 + script로 색상 변경1). css > hover 시 color: red로 변경.그리고 fill-heart를 우선 화면에 보이지 않게 변경하고 fill속성을 red로 채운다.[css].top-left span:nth-of-type(1):hover { color: red;}#fill-heart { display: none; fill: red;}  2). html에서 svg에 id값을 부여한뒤script에 하트, 채워진하트 addEventListener로 클릭이벤트 발생시 스타일의 디스플레이 속성을 변경한다.       참고 제로베이스 판다코딩 강의부트스트랩아이콘 - https://icons.getbootstr..

setArray와 Set 복잡도 비교기능 배열 (Array) Set (Set) 삽입 (Insertion)  push() - O(1) (배열 끝에 삽입 시)    splice() - O(n) (특정 위치에 삽입 시)  add() - O(1)(위치 지정 불가)삭제 (Deletion)  pop() - O(1) (끝에서 삭제 시)  splice() - O(n) (특정 위치에서 삭제 시)   filter() - O(n) (특정 요소 삭제 시)  delete() - O(1)검색 (Search)  indexOf() 또는 includes() - O(n)  has() - O(1)접근 (Access)  arr[index] - O(1) (인덱스를 통한 접근)  for...of 반복 필요 - O(n) (인덱스 없음)중복 허..

머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ babbling의 길이 ≤ 1001 ≤ babbling[i]의 길이 ≤ 15babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다.즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다.문자열은 알파벳 소문자로만 이루어져 있습니다...

문제 설명문자 "A"와 "B"로 이루어진 문자열 str과 part가 주어집니다. str의 "A"를 "B"로, "B"를 "A"로 바꾼 문자열의 연속하는 부분 문자열 중 part이 있으면 1을 아니면 0을 return 하는 solution 함수를 완성하세요.제한사항1 ≤ str의 길이 ≤ 1001 ≤ part의 길이 ≤ 10str과 part는 문자 "A"와 "B"로만 이루어진 문자열입니다.입출력 예str part result"ABBAA""AABB"1"ABAB""ABAB"0입출력 예 설명입출력 예 #1"ABBAA"에서 "A"와 "B"를 서로 바꾸면 "BAABB"입니다. 여기에는 부분문자열 "AABB"가 있기 때문에 1을 return 합니다.입출력 예 #2"ABAB"에서 "A"와 "B"를 서로 바꾸면 "BABA..

문제 설명알파벳 소문자로 이루어진 문자열 str이 주어집니다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 return 하는 solution 함수를 완성해 주세요.제한사항1 ≤ str ≤ 100,000str은 알파벳 소문자로 이루어진 문자열입니다.입출력 예str result"abcdevwxyz""lllllvwxyz""jjnnllkkmm""llnnllllmm"입출력 예 설명입출력 예 #10 ~ 4번 인덱스의 문자 "a", "b", "c", "d", "e"는 각각 "l"보다 앞서는 문자입니다. 따라서 "l"로 고쳐줍니다.그 외의 문자는 모두 "l"보다 앞서지 않는 문자입니다. 따라서 바꾸지 않습니다.따라서 "lllllvwxyz"을 return 합니다.입출력 예 #20번, 1번, 6번..

문제 설명영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 str이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요.제한사항str은 소문자와 공백으로 이루어져 있습니다.1 ≤ str의 길이 ≤ 1,000입출력 예str result"bus""bs""nice to meet you""nc t mt y"입출력 예 설명입출력 예 #1"bus"에서 모음 u를 제거한 "bs"를 return합니다.입출력 예 #1"nice to meet you"에서 모음 i, o, e, u를 모두 제거한 "nc t mt y"를 return합니다.const solution = str => { // do something};console.log(soluti..

문제 설명문자열 str과 문자 letter이 매개변수로 주어집니다. str에서 letter를 제거한 문자열을 return 하도록 solution 함수를 완성해 주세요.제한사항1 ≤ str의 길이 ≤ 100letter은 길이가 1인 영문자입니다.str과 letter은 알파벳 대소문자로 이루어져 있습니다.대문자와 소문자를 구분합니다.입출력 예str letter result"abcdef""f""abcde""BCBdbe""B""Cdbe"입출력 예 설명입출력 예 #1"abcdef"에서 "f"를 제거한 "abcde"를 return 합니다.입출력 예 #2"BCBdbe"에서 "B"를 모두 제거한 "Cdbe"를 return 합니다.const solution = (str, letter) => { // do somethi..

문제 설명2차원 정수 배열 matrix가 주어지면 모든 요소의 합을 반환하는 함수를 구현한다. const sumMatrix = matrix => { // do something};console.log(sumMatrix([[1, 2, 3], [4, 5, 6], [7, 8, 9]])); // 45console.log(sumMatrix([])); // 0 풀이1번 풀이 map + reducemap은 해당 행의 모든 숫자를 합산 한다.  [6, 15, 24] 그 다음 reduce로 [6, 15, 24] 의 값을 하나씩 축적하면서 더하고 그 값을 리턴한다.const sumMatrix1 = matrix => { const arr = matrix.map(row => row.reduce((sum, num) => su..

문제 설명문자열 str과 part가 주어집니다. str의 부분 문자열중 part로 끝나는 가장 긴 부분 문자열을 찾아서 return 하는 solution 함수를 완성해 주세요.제한사항5 ≤ str ≤ 201 ≤ part ≤ 5part은 반드시 str의 부분 문자열로 주어집니다.str과 part에 등장하는 알파벳은 대문자와 소문자를 구분합니다.입출력 예str part result"AbCdEFG""dE""AbCdE""AAAAaaaa""a""AAAAaaaa"입출력 예 설명입출력 예 #1"AbCdEFG"에서 "dE"는 한 번 등장하며 처음부터 해당 위치까지 잘라내면 "AbCdE"가 됩니다. 따라서 이 문자열이 "dE"로 끝나는 가장 긴 문자열이며, "AbCdE"를 return 합니다.입출력 예 #2"AAAAaa..

문제 설명문자열 str이 매개변수로 주어집니다. str에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ str ≤ 110str은 대문자, 소문자, 공백으로 구성되어 있습니다.대문자와 소문자를 구분합니다.공백(" ")도 하나의 문자로 구분합니다.중복된 문자 중 가장 앞에 있는 문자를 남깁니다.입출력 예str result"people""peol""We are the world""We arthwold"입출력 예 설명입출력 예 #1"people"에서 중복된 문자 "p"와 "e"을 제거한 "peol"을 return합니다.입출력 예 #2"We are the world"에서 중복된 문자 "e", " ", "r" 들을 제거한 "We arthwo..

문제 설명머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 nums가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요.제한사항1 ≤ nums의 길이 ≤ 1000 ≤ nums의 원소 ≤ 100,000입출력 예nums result[7, 77, 17]4[10, 29]0입출력 예 설명입출력 예 #1[7, 77, 17]에는 7이 4개 있으므로 4를 return 합니다.입출력 예 #2[10, 29]에는 7이 없으므로 0을 return 합니다./** * @param {number[]} nums * @return {number} */const solution = nums => { // do something};console.log(solution([7, 77..

1번const array = [3, 4, 5, 2, 1];// 각 요소를 문자열로 변환하여 새로운 배열 생성const stringArray = array.map(num => num.toString());console.log(stringArray); // ["3", "4", "5", "2", "1"] map으로 배열을 돌면서num.toString() 을 호출해 숫자를 문자열로 변환.  2번- 더 간단한 방법❗❗❗  const array = [3, 4, 5, 2, 1];const stringArray = [...array.join('')];// console.log(stringArray); [ '3', '4', '5', '2', '1' ]

join( ' , ' );  -  요소 사이에 , 쉼표가 들어감.join( ' ' );  -  요소가 붙어서 출력.  const array = [3, 4, 5, 2, 1];const string = array.join(', '); // "3, 4, 5, 2, 1"const string = array.join(''); // "34521"    .toString();  -  요소 사이를 , 쉼표로 구분하여 변환.const array = [3, 4, 5, 2, 1];const string = array.toString(); // "3,4,5,2,1"

웹접근성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: "구매하기" */}