본문 바로가기

JavaScript85

CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 오늘은 한줄짜리 아주 간단한 css 이지만 잊어버릴까봐 기록으로 남겨놓는다. 1, 3, 5번째 줄만 옅은 회색을 만들고 싶다면 ? 자 만들러가보자. 결과화면 미리보기 아래처럼 홀수 번째 태그에만 색상이 적용되어있다. CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 HTML 홀수 짝수 홀수 짝수 홀수 짝수 CSS div { background-color: white; } div:nth-child(2n+1) { background-color: gray; // 홀수만 적용 } div:nth-child(2n) { background-color: gray; // 짝수만 적용 } 요즘엔 죽어라 하지만 정체되는 느낌을 받고 있다ㅠ 스스로에게 조금이라도 나아가고 있는 거라고 다독이며 포스팅을 써본다 2022. 5. 13.
JavaScript 알고리즘(7) Multiple Pointers Pattern - averagePair 차근차근 시간날 때마다 알고리즘을 풀고 있다. 이번에는 Multiple Pointers 패턴에서 평균구하기 문제이다. 실컷 고민하다 결국 지난번 패턴과 같은 공식을 적용했더니 별문제 없이 통과를 했기 때문에, 이번에는 다른 사람의 풀이를 가지고 와 분석해보았다. JavaScript 알고리즘(7) Multiple Pointers Pattern - averagePair 매개변수로는 array 와 average가 주어지고, array 를 검사해서 두 수를 더한 평균이 average 와 같으면, 통과! (true) 이고, 같은 average 가 없다면 false 이다. 나의 풀이 while 문으로 계속 조건이 맞을때까지 무한반복하도록 만들었다. if 문으로 (맨앞과 + 맨뒤 숫자 / 2) 로 만든 평균값으로 매.. 2022. 4. 26.
JavaScript 알고리즘(6) Multiple Pointers Pattern -areThereDuplicates 돌아온 알고리즘 6번째 시간, 조금씩 조금씩 꾸준히 학습해 나가면서 사고의 방향이 다양하게 확장되는 것을 느끼고 있다. 오늘의 패턴은 Multiple Pointers Pattern 이다. 핵심은 포인터 두개를 양끝단에 지정하고 요소를 하나씩 검사하는 방법으로 Big O notation 에서의 O(N) 만을 이용해 구현해야만 한다. (쉽게 생각하면 배고픈 탈옥수가 배식줄에 서있는데 도망치지 못하게 맨 앞과 맨 뒤에서 경찰들이 한명씩 심문하며 다가오는 느낌이랄까) JavaScript 알고리즘(6) Multiple Pointers Pattern 매개변수로 받은 값들 중에 겹치는 값들이 있는지 확인하는 일종의 validator function 을 만들어보자. 겹치면 true 안겹치면 false 가 리턴된다. f.. 2022. 4. 9.
CSS - z-index 적용 안될때 (Why your z-index isn't working) (오랜만의 포스팅) z-index 는 나에게 너무 심플하게 다가왔다. 숫자가 높을수록 화면 상단에 div 등의 엘레멘트를 고정해주는 편리한 녀석😏 하지만 심플할수록 적용이 안되는 일이 빈번했다. 😑 이유를 파악도 못한 채 나는 css 여기저기 z-index 를 랜덤하게 넣었다 빼기를 반복하였고 어느날 정확하게 왜 안되는지 궁금해졌다. z-index 가 적용되지 않는 이슈를 해결해줄 강려크한 내용을 아래 블로그에서 참고하여 내가 이해해본 방식으로 정리해 보았다. Why your z-index isn't working (왜 나의 쥍인덱스는 안먹히는가) 1. Elements in the same stacking context will display in order of appearance, with latte.. 2022. 4. 4.
JavaScript 알고리즘(5) Same Frequency Counter Pattern 요즘에는 자바스크립트로 알고리즘 코드 패턴 공부 중이다. 여러 패턴들을 익히면서 재미를 찾아가는 중이다. 오늘 공부한 패턴은 Frequency Counter Pattern 이다. JavaScript 알고리즘(5) Same Frequency Counter Pattern 두개의 인자가 같은 숫자 혹은 글자 인지를 비교할 때, 하나의 객체에 요소 하나하나를 저장해 중복의 갯수를 표시하고, 나머지와 비교하며 같으면 제거해버린다. 만약에 같은 숫자라면 빈 객체로 돌아갈 것이고(true), 그게 아니라면 뭐라도 하나 남아있을 것이다.(false) function sameFrequency(firstNum, secondNum){ // 1. 숫자를 문자열로 만든다. (그래야 배열화할수있기 때문) const first =.. 2022. 3. 23.
JavaScript - Webpack 이란 웹팩을 일하면서 정말 많이 들어보았다. 대충 개념만 알고 있는 거와 정리해보는 건 다르다. 도대체 웹팩의 정체는 뭘까? 블로그들을 참고하여 개념적인 부분만 먼저 정리해보았다. JavaScript - Webpack 이란 직관적으로 그림을 먼저 살펴보자. 많은 네모들이 보이다 → 네모의 수가 줄어들었다. 복잡한 것들 깔끔하게 정리가 된 느낌이다. 웹팩이 뭘까? 웹팩은 모듈 번들러 라이브러리이다. 그럼 모듈 번들러는 뭘까? 여러개의 나누어진 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다. 왜 사용할까? 하나의 웹페이지가 로드될 때 여러개의 자바스크립트 파일들을 가져와 퍼즐조각처럼 맞추며 우리앞에 짜잔하고 나타난다.(렌더링) 그래서 전역적으로 한꺼번에 많은 파일을 불러오면 뻑(?)이 날 가능성이 농후하다.. 2022. 3. 16.
JavaScript - 페이지이동 location.href / location.replace() / location.assign() 주말의 끝을 맞아 오늘은, 페이지 이동할 때 숨쉬듯 사용하였던 내장 메소드들의 속성을 심층 비교하며 공부해보았다. 어느 날 열심히 일하다가 페이지 이동 관련하여 히스토리 이슈가 생겼었는데 replace() 를 사용하니 히스토리가 남지않아 [뒤로가기] 기능이 의미를 잃어버리는 일이 생기게 된 일이었던 것이다. 그 땐 옆에서 🙄어🙄리🙄둥🙄절🙄 줏어듣기만 했었는데 우연한 기회로 정리해보게 되었다. 그럼 공식문서를 참고하며 차이를 알아보도록 하즈아 JavaScript - 페이지이동 location.href / location.replace()/ location.assign() location.href href는 태그를 사용하면서 가장 익숙하게 보았던 속성이다. 현재 접속 중인 페이지 정보를 가지고 있다. 또한 .. 2022. 2. 27.
JavaScript - Array.from() 으로 배열만들기 Updated 08/22/22 Array.from 은 배열이나 객체를 복사해 새로운 Array 를 만든다. 함수나 컴포넌트 내에서 한번 쓰이고 말 간단한 배열이나 객체를 후딱 만들어 써야 할 때, 자주 사용되는 것 같다. 이터러블 객체(for of)과 유사배열은 배열같은 객체이다. 객체이기 때문에 push 나 pop 등의 메소드를 사용할 수 없다. 하지만 이러한 객체들을 배열처럼 사용해야 할 때, → Array.from() 을 사용한다. 그럼 공식문서에 있는 예제 코드를 살펴보면서 Array.from 을 익혀보자. 이터러블 객체와 유사배열 이터러블(iterable) 은 메서드 Symbol.iterator가 구현된 객체이다. 유사 배열(array-like) 은 인덱스와 length 프로퍼티가 있어서 배열처.. 2022. 2. 8.
CSS - 헤더와 푸터 영역 고정하기 헤더와 푸터를 고정한 채로 가운데 body 부분만 overflow 속성으로 스크롤을 사용하여 올렸다 내렸다 하고 싶다. 이럴 때는 position 의 sticky 라는 속성을 사용하면 된다. HTML 헤더영역 // 스크롤바가 나오는 긴 내용 푸터영역 CSS header { position: sticky; // 포지션을 스티키로 주면 자연스레 고정된다. top: 0; // 탑에 붙여야 하므로 0을 준다. } footer { position: sticky; bottom: 0; // 여기는 바텀에 붙여야 하므로 0을 준다. } 2022. 1. 26.
반응형