I'm a Fig, Not a Pig

오늘은 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 다룰 것이다. 우선 둘의 공통점부터 살펴보자. HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 둘 다 length 프로퍼티를 가지기 때문에 객체를 배열처럼 접근할 수 있고 반복문을 돌릴 수 있다. 하지만 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드를 사용할 수 없다는 특징이 있다. (ex. map, forEach, reduce 등등) (유사 배열 객체에 대한 자세한 내용은 아래 링크에서 볼 수 있다.) https://codingtod..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

목차 1. flex-basis 2. flex-grow 3. flex-shrink 1. flex-basis flex-basis는 flex 아이템의 크기를 설정하기 위해 존재하는 속성이다. 아이템의 크기를 직접 설정한다는 점에서 width와 유사하지만 1. flex-basis는 width나 height와 달리 flex-direction의 영향을 받는다는 점 2. flex-basis와 width가 동시에 적용될 경우 flex-basis가 더 높은 우선순위를 갖는다는 점의 차이가 있다. flex-basis의 기본 값은 auto로, - width를 따로 설정하지 않으면 컨텐츠가 차지하는 width와 같은 값이되고 - width를 설정하면 설정값과 동일한 값이 된다. .container { display: flex..

이메일 폼을 만들던 중.. 이메일이 유효하지 않은 상태에서 다음 버튼을 누르면 주황색으로 변하는 문제가 있었다. (이메일이 유효한 상태에서만 주황색으로 변하게 하고 싶음) 내가 원하는 건 변하지 않게 하는 것..! 그래서 active를 사용해서 이메일이 유효하지 않은 경우 버튼 클릭 시 그레이 색으로 유지되도록 코드를 짰는데 계속 주황색으로 바뀌었다. 구글링 도중 스택오버플로에서 나와 비슷한 상황이신 분을 발견했고 active가 아닌 focus로 하는게 적절하다는 답변을 보았다. 이후에 active 대신 focus를 적용했더니 문제해결! 그래서 오늘은 active와 focus에 대해 알아보았다. active와 focus acitve나 focus 둘 다 user의 action에 따라 스타일링의 변화를 주고..

목차 1. 동기 (Synchronous)와 비동기(Asynchronous) 2. 동기와 비동기의 장단점 3. 동기적 처리 4. 비동기적 처리 1. 동기 (Synchronous)와 비동기(Asynchronous) 동기(synchronous) : 동시에 일어나는 동기는 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이므로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어저야 한다. 비동기(Asynchronous) : 동시에 일어나지 않는 비동기는 동시에 일어나지 않는다는 뜻이다. 요청과 그 결과가 동시에 일어나지 않을 것이라는 약속이다. 2. 동기와 비동기의 장단점 - 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있..

목차 1. 자바스크립트의 드래그 앤 드롭 API 2. draggable 항목의 이벤트 3. drop target에 대한 이벤트 4. dataTransfer 객체를 활용한 자료 전송 5. 예제 6. 드롭 타겟의 이벤트 제어하기 1. 자바스크립트의 드래그 앤 드롭 API HTML5는 공식적으로 드래그 앤 드롭 스팩을 공개했다. 대부분의 최신 웹 브라우저는 HTML5 스팩을 기반으로 네이티브 드래그 앤 드롭 기능을 구현 할 수 있다. 기본적으로 이미지와 텍스트만 끌 수 있으며 이미지를 끌려면 마우스 버튼을 누른 상태에서 이동하면 된다. 텍스트를 끌려면 일부 텍스트를 하이라이트 해놓고 이미지를 끌 때와 같은 방식으로 끌어다 놓으면 된다. 요소를 끌기 위해서는 HTML 태그에 draggable=true 속성을 넣..

목차 1. 무한 스크롤이란? 2. 구현 방식 3. 자바스크립트 fetch API 4. async / await 5. 구현 과정 6. 전체 코드 1. 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 2. 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(append)하는 방식으로 구현했다. 3. 자바스크립트 fetch API 자바스크립트에서는 fetch로 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고 응답 데이터를 받아오는 데에 주로 사용한다. fetch("https://jsonplaceholder.typicode.com/posts") .then(function(res)..

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때 유용하다. visible overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값이다. overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나온다. 또한 overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다. See the Pen Untitled by lin (@nnlynn) on CodePen. hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨길 ..

transform 이 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다. 1. translate (이동) 요소를 각각 x축과 y축으로 지정 한 값 만큼 이동시킨다. .box:hover { transform: translate(100px, 50px); } px대신 %도 가능하며 위 코드는 평소에는 원래 위치해있고, 마우스 오버시 X 100px, Y 50px씩 이동한다. 2. scale (늘리거나 줄이거나) 요소의 크기를 변경하는 태그이며 (좌우, 상하)로 늘어난다. translate과 마찬가지로 scale(X, Y)로 입력해 사용하며 단위는 '기존 사이즈의 몇 배' 이므로 width, height의 속성과는 다르다. .box:hover { transform: scale(2, 1.5)..

isEven() isEven 함수는 주어진 숫자가 짝수인지의 여부를 반환한다. 나머지 연산자(%)를 활용하여 아래와 같이 홀/짝인지 확인할 수 있는 코드를 짤 수 있다. const isEven = n => n % 2 === 0; console.log(isEven(8)); // true console.log(isEven(23)); // false console.log(isEven(514)); // true