반응형 전체 글136 em과 rem의 차이점 em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글에서는 em과 rem의 차이점에 대해 살펴보고, 어떤 경우에 어떤 단위를 사용하는 것이 적합한지 알아보겠습니다. em em은 현재 요소의 글꼴 크기에 대한 상대적인 크기를 정의하는 단위입니다. 이는 부모 요소의 글꼴 크기를 기준으로, 현재 요소의 크기를 설정하며, 부모 요소가 바뀌면 자식 요소의 크기도 변경됩니다. .parent { font-size: 16px; } .child { font-size: 1.5em; /* 부모 요소의 글꼴 크기의 1.5배 */ } 위의 코드에서, .parent 요소의 글꼴 크기.. 2023. 2. 28. sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 이전까지 몇번의 포스팅에서 자바스크립트의 배열을 반복적으로 다루며 정리를 해보았습니다. 그만큼 배열에 대해 이해하고 잘 다루는 게 중요하기 때문입니다. 이번 포스팅에서 딱 한놈만 패는 기분으로, sort() 메서드를 가지고 약간 심도 있게 다뤄보고 정리를 해봅시다. 연습문제를 푸는 마음으로 살펴 두면 도움이 될 것입니다. sort() 메서드 활용 - 1. 문자의 오름차순 정렬 아래 주어진 배열를 가나순으로 정렬해보세요. const str = ["B", "D", "A", "C"]; 이건 이제 너무 쉽게 느껴지죠? sort() 메서드만 갖다 붙여보면 되니까요. 당장 풀어버립시다! const str = ["B", "D", "A", "C.. 2023. 2. 27. 배열 객체 메서드 sort(), filter(), map() 기초 정리 배열 객체 메서드 sort(), filter(), map() 기초 정리 지난 포스팅에서 배열객체 내장 함수인 sort() 메서드를 다루고 정리를 했습니다. sort() 메서드를 이용해서 문자열을 정렬하거나 숫자를 정렬하는 방법을 살펴보았습니다. sort() 메서드로 상품 정렬 기능 만들기 sort() 메서드로 상품 정렬 기능 만들기 sort() 메서드로 상품 정렬 기능 만들기 지난 포스팅에서는 서버에서 Data를 받아 온 후, 브라우저 화면에 반복문을 돌며 뿌려주는 것에 대해서 공부하고 정리해보았습니다. 프론트단 구성에서 굉 kincoding.com 자바스크립트에서는 배열(Array)을 다루는데 있어서 sort() 이외에도 여러 유용한 메서드들이 존재합니다. 그 중에서도 가장 자주 사용되는 메서드로는 s.. 2023. 2. 26. 콜백 함수(Callback Function)는 뭘까? Please Call Me 콜백 함수(Callback Function)는 뭘까? Please Call Me 자바스크립트를 학습하다 보면, 콜백 함수(Callback Function)라는 말을 자주 듣게 됩니다. 영어 단어 자체는 쉬워보이는데 한국말에는 없는 단어라 왠지 낯설고 어렵게만 느껴지기도 합니다. 하지만 왜 영화에서 자주 보던 제스처 있죠? 나중에 나한테 전화줘~! 일단 딱 이런 이미지로 콜백 함수를 기억하면 좋을 것 같습니다. Please Call Me Back 콜백 함수는 함수를 인자(argument)로 받아들여서 다른 함수의 실행 결과를 나중에 처리하는 것입니다. 그냥 어떤 함수를 사용하는데, 인자(argument, parameter)로 함수가 떡하니 들어가 있는 걸 말합니다. 별거 아닙니다. 말만 어려워요. 콜백 함.. 2023. 2. 25. sort() 메서드로 상품 정렬 기능 만들기 sort() 메서드로 상품 정렬 기능 만들기 지난 포스팅에서는 서버에서 Data를 받아 온 후, 브라우저 화면에 반복문을 돌며 뿌려주는 것에 대해서 공부하고 정리해보았습니다. 프론트단 구성에서 굉장히 자주 사용되는 중요한 내용이니, 코딩까지는 직접 못하는 상태이더라도 해당 로직에 대해서는 꼭 이해를 해두시고 다음 단계로 넘어가실 것을 권장합니다. 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 이전까지 2~3개의 포스팅을 통해서, Javascript를 이용해서 동적으로 UI를 생성하는 과정을 정리해왔습니다. 기초적인 DOM 조작 및 Data 핸 .. 2023. 2. 24. 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 서버에서 받은 데이터를 forEach() 이용해서 UI 반복 생성하기 이전까지 2~3개의 포스팅을 통해서, Javascript를 이용해서 동적으로 UI를 생성하는 과정을 정리해왔습니다. 기초적인 DOM 조작 및 Data 핸들링에 코딩 근육이 붙었으니, 이번에는 서버에서 받아 온 Data를 이용해서 좀 더 코딩스럽게 구현해보는 과정을 정리해보려고 합니다. 서버에서 Data를 내려 받은 후 해당 데이터를 이용해서 아래아 같은 UI를 동적으로 만들어보려고 합니다. NETFLIX 비슷한 OTT 채널이라고 가정해봅시다. 좀비 영화만 주구장창 틀어주는 채널, ZomFLIX. 아주, 흥미진진하죠? 우선, 서버에서는 이런 정보를 전달 받았다고 가정해봅시다. const zombies = [ { id: 0, thumb: .. 2023. 2. 23. 이전 1 ··· 4 5 6 7 8 9 10 ··· 23 다음 반응형
