분류 전체보기111 [ 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. [ JavaScript ] replace와 정규식을 사용해서 해당 문자 대체하기(제거하기) replace와 정규식을 사용해서 큰 따옴표 제거하기 한번씩 문자열을 가져올 때 큰 따옴표까지 같이 값으로 가져와지는 경우도 있다. 그럴 때 replace와 정규식을 사용해서 큰 따옴표를 제거할 수 있다. JavaScript의 replace()메서드는 첫번째로 일치하는 패턴을 대체한다. 모든 큰 따옴표를 제거하기 위해서 (대체하기 위해서는) 정규식에서 'g'플래그를 사용하면 전역 검색(global search) 이 가능해진다. /는 정규 표현식의 시작과 끝을 나타내는 구분자로 replace(/"/g, '')로 써주면 모든 큰 따옴표를 빈 문자열 ('') ←작은 따옴표 2개 로 대체하여 큰 따옴표를 제거할 수 있다. replace와 정규식을 사용해서 숫자를 제외한 문자 제거하기 const imgUrl = .. 2023. 8. 2. [ CSS ] font-size (폰트 사이즈) rem 과 em이 뭐죠? rem 과 em 은 CSS에서 사용되는 상대적인 길이 단위 rem (Root EM) 최상위 요소인 의 폰트 크기 기준으로 설정된 길이. 요소의 폰트 크기를 1rem으로 간주하여 이를 기준으로 상대적인 크기를 지정한다. ex) 3rem이라고 하면 현재 폰트 크기의 3배 em (EM) 현재 요소의 폰트 크기를 기준으로 설정된 길이. 상위 요소의 폰트 크기를 상속받아 계산된다. ex) 부모 요소의 폰트 크기가 18px이고 자식요소의 폰트 크기가 1.5em이면 27px html 폰트크기가 커져도 상관없이 해당 요소의 상위요소 크기를 기준으로 계산됨. rem이나 em을 쓰는 이유는? rem이나 em은 상대적인 길이 단위이기 때문에 반응형 웹 디자인을 구현하거나 유연한 레이아웃을 만들 때 유용하다. rem은 루트 .. 2023. 8. 2. 이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음
