01_PROJECT30 [ css ] 스크롤 상관없이 동일한 위치에 요소를 고정시키기 position: fiexd 위와 같이 우리가 화면의 스크롤을 마구마구 내려도 로고, 카테고리, 내가 찜한 콘텐츠가 있는 상단에 위치한 네비게이션 바는 동일한 위치에서 움직이지 않음을 볼 수 있다. position: fixed CSS 속성 중에 position: fixed를 하면 이렇게 고정할 수 있다. fixed는 요소를 문서의 뷰포트에 상대적으로 고정시키는 역할을 하는데 스크롤이 되더라도 항상 뷰포트의 특정 위치에만 고정되어 있다. fixed의 특징은 항상 요소가 뷰포트 기준으로 위치가 고정되고 다른 요소들과의 겹침을 피할 수 있다. 그래서 다른 요소의 배치를 고려하지 않아도 된다. 또한 부모 요소 위치에도 영향을 받지 않는다. 헤더, 네비게이션 바, 공지사항, 광고 배너 같이 항상 표시되어야 하는 요소를 고정시키는 경우나 모달.. 2023. 8. 3. [ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자 이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다. 이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면 스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자. display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에 다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다. opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다. 마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데, 보이게 하기 싫다면 pointer-events: none 으로 해주면 포인터가 표시되지 않는다. 해당요소의 공간을 사용하지 않으려면 visibility: hid.. 2023. 8. 3. [ JavaScript ] 요소의 크기나 위치를 알 수 있는 getBoundingClientRect() getBoundingClientRect() 요소의 크기와 위치에 관한 정보를 제공하는 자바스크립트 메서드이다. 특정요소의 경계상자(BoundingBox)에 대한 정보를 얻을 수 있다. 메서드는 호출한 요소의 사각형 경계에 대한 정보를 포함하는 DOMRect 객체를 반환한다. 이 DOMRect 객체에는 다음과 같은 속성이 있다. top: 요소의 상단 경계선의 Y 좌표 right: 요소의 우측 경계선의 X 좌표 bottom: 요소의 하단 경계선의 Y 좌표 left: 요소의 좌측 경계선의 X 좌표 width: 요소의 너비 (right - left) height: 요소의 높이 (bottom - top) x: 요소의 좌측 경계선의 X 좌표 (left와 동일) y: 요소의 상단 경계선의 Y 좌표 (top과 동일) .. 2023. 8. 3. [ JavaScript ] substr() is deprecated -> substring() 문자열 일부 추출하기 권장되지 않는 substr() 메서드는 레거시 메서드 어디서 봤는지는 모르겠지만 substr()메서드를 썼다가 코드 위에 밑줄이 그어지며 마우스를 올리니 Deprecated Code라는 안내가 나타났다. 2021년 9월 기준으로 substr()메서드는 더 이상 권장되지 않는 레거시 메서드로 간주되었고 substring()메서드가 대체할 수 있게 되었다. *레거시(legacy) 메서드란? lecacy는 '전통,유산,옛날의 것'등을 의미하며 기술적인 의미에서 더 이상 권장되지 않거나 오래되어서 현재의 기술과는 맞지 않는 메서드를 의미합니다. substring() 메서드 string.substring(startIndex, endIndex) startIndex 시작 인덱스와 endIndex 끝 인덱스를 사용해 .. 2023. 8. 2. [ JavaScript ] 헷갈리는 for...in과 for...of, in의 내부,속성만 기억하자 for...in과 for...of가 헷갈린다면 for...in의 in으로 구분해서 기억하자. in은 '내부의' 라는 뜻으로 객체의 속성을 열거하는 데 사용한다고 기억하고 of는 '각각의'라는 뜻으로 기억하고 요소나 값을 순회한다고 생각하면 쉽다. for...in 자바스크립트에서 객체의 속성을 반복하는데 사용되는 루프로 객체의 모든 열거 가능한 속성에 대해 반복하며 각 속성의 키를 변수에 할당한다. for(const key in object){ } 여기서 key는 객체의 속성인 키를 나타내는 변수이고 object는 객체 const person = { name: 'John', age: 30, city: 'New York' }; for(const key in person){ console.log(key+":".. 2023. 8. 2. [ JavaScript ] 이벤트 핸들러를 등록할 때 ()빼고 함수명만 적기 처음에 공부할 떄는 이런 기본적인 부분도 헷갈리곤 한다. btnSend.addEventListner('click', sendLinkToEmail()); btnSend.addEventListner('click', sendLinkToEmail); addEventListner 메서드는 이벤트가 발생했을 때 실행할 함수를 인자로 받는다. 그럼 click 되었을 때 함수가 실행되어야 하니까 ()를 붙여서 sendLinkToEmail()이라고 써줘야 하지 않을까? 하고, ()를 쓰면 즉시 호출되는 건 알지만 인자로 들어가있는데 설마 즉시 호출 되겠어 하고, 그러나 괄호 ()를 추가하게 되면 함수를 즉시 실행시키는 것이 되어버린다. 즉시 호출이 되어버리면 이벤트 핸들러가 등록되자마자 함수가 실행된다. 페이지 로딩과.. 2023. 8. 2. 이전 1 2 3 4 5 다음
