전체 글 210

position : sticky 활용하기

참고 사이트 : apple.com/apple-tv-4k(사이트 레이아웃이 언제든 변경될 수 있기 때문에 밑 사진을 참고부탁드립니다)       position : sticky  (Edge 이상에서 사용가능)스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다.position : fixed 는 항상 화면에 고정이 되는 요소를 만들 때 사용한다고 배웠었는데 이거랑 뭔 차이가 있냐면,position : sticky 는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성이 있습니다.한번 위의 예제를 만들어보도록 합시다.   설명하다  Meet the first Triple Camera System 설명하다 .grey { background..

자바스크립트 2024.07.10

자바스크립트>DOM이라는 용어 개념정리 & load 이벤트

1. DOM 이라는 말이 자주 등장합니다. 책보고 검색하고 그러면 맨날 DOM이라는 용어를 남용하는데 그게 뭔지 알아봅시다.Document Object Model 이라는 뜻인데 그냥 설명하면 이해가 안되니 배경설명부터 갑니다.   자바스크립트는 HTML 조작에 특화된 언어라고 설명드렸습니다.그런데 자바스크립트가 어떻게 HTML을 조작할 수 있는지 원리를 생각해본 적이 있습니까. 생각해보면 HTML과 자바스크립트는 다른 언어입니다.그래서 자바스크립트에선 이런 html을 직접 해석하고 조작할 수 없습니다.  자바스크립트는 이런건 못알아듣습니다.그런데 어떻게 HTML 태그들을 알아보고 조작할 수 있는 것일까요?  자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 ..

자바스크립트 2024.07.09

자바스크립트> array 정렬 soft,map,filer

array 정렬하는 법 array 자료는 순서개념이 있다보니 정렬도 가능합니다.그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데 숫자정렬은 이렇게 코드짜면 됩니다. 설명하다 var 어레이 = [7,3,5,2,40];어레이.sort(function(a, b){ return a - b});console.log(어레이);이러면 숫자순으로 잘 출력됩니다.근데 왜 저렇게 코드짜면 숫자순 정렬이 되는지 알고싶지 않습니까코드 동작원리 이런걸 알면 나중에 응용도 쉽게 가능하기 때문에 sort() 동작원리를 알아봅시다.  어레이.sort(function(a, b){ return a - b}); 1. a, b는 array 안의 자료들입니다.2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.3...

자바스크립트 2024.07.09