반응형 멋쟁이사자처럼후기65 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 42 (요소의 크기와 위치 정보, DOM 탐색) 목차요소의 크기와 위치 정보DOM 탐색(Traversal)오늘 하루를 돌아보며 요소의 크기와 위치 정보요소의 너비나 높이 값을 알아야 할 때가 있다. 또는 문서에서 요소가 어디에 있는지 알아야 할 때도 있다. 그럴 때는 getBoundingClientRect() 메서드를 사용한다.const DOMRect = 요소.getBoundingClientRect() getBoundingClientRect() 메서드로 가져오는 DOM 요소의 Rect 정보는 아래와 같다.left (x 값과 같다)righttop (y 값과 같다)bottomwidth (right - left)height (bottom - top) DOM 탐색(Traversal)인접한 요소에서 하나의 다른 요소를 선택하는 것을 DOM 트래버서(Traver.. 2025. 6. 25. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 41 (빌트인 / 커스텀 속성 설정) 목차빌트인 속성과 커스텀 속성속성 설정 / 읽기 / 제거데이터 세트오늘 하루를 돌아보며 빌트인 속성과 커스텀 속성속성(attribute)은 HTML 요소에 추가된 값으로, 요소를 브라우저가 해석해서 DOM 요소 생성 과정에서 사용된다. HTML의 속성은 attributes라고 부르고, DOM의 속성은 properties라고 부른다. 모든 태그는 여러 개의 속성을 가질 수 있습니다! 위 코드에서 id, class, contenteditable 속성은 HTML이 기본으로 제공하는 빌트인 속성이다. 각 속성마다 쓰임새가 다르다. data-category 속성은 사용자가 정의한 커스텀(custom) 속성이다. 커스텀 속성을 사용하면 요소에 대한 정보를 임의로 사용자가 저장할 수 있다.커스텀 속성을 정의할 때는.. 2025. 6. 24. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 40 (여러 요소 선택, 노드 vs. 요소, 요소 선택하기, JS로 CSS 스타일 설정 및 읽기) 목차여러 요소 선택노드 vs. 요소요소 선택하기JavaScriipt로 CSS 스타일 설정JavaScript로 CSS 스타일 읽기오늘 하루를 돌아보며 여러 요소 선택문서에서 여러 요소(elements)를 선택해야 할 때가 있다. querySelectorAll() 메서드를 사용하면 CSS의 선택자를 문자열로 전달받고, 해당하는 모든 요소를 선택해서 NodeList로 반환한다. 반환 값은 유사 배열 객체다. 배열은 아니지만, 배열과 비슷한 객체다.const nodeList = element.querySelectorAll(selector) NodeList의 특정 요소에 접근하려면 숫자 타입의 키를 사용한다. 배열처럼 각 항목에 접근할 수 있다.const paragraphs = document.querySelec.. 2025. 6. 23. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 39 (루프(Loop), forEach 루프) 목차루프(Loop)while 문do ... while 문for 문흐름 제어문배열 반복객체 반복forEach 루프오늘 하루를 돌아보며 루프(Loop)while 문while 문은 if 문과 유사한 구조로 if 키워드 대신, while 키워드를 사용한다. 단, 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다는 점이 다르다. 그래서 while 문을 사용할 때는 무한 루프(Infinite Loop)에 빠지지 않도록 주의해야 한다. 루프가 종료될 수 있도록 특정 상황에서 조건이 거짓으로 평가되도록 해야 한다.function draw() { // 드로잉 코드 작성}// [조건] 반복자(iterator)let i = 0// [반복문] 조건 평가// i 값이 50보다 작으면 참 (반복)// 50이상이 되면 거.. 2025. 6. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 38 (배열, 배열 메서드, 루프) 목차배열(Array)배열 메서드루프(Loop)오늘 하루를 돌아보며 배열(Array)배열(Array)은 순서대로 번호가 붙은 원소들이 연속적인 형태로 구성된 구조다. 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체다. 배열을 만들 때는 대괄호([])를 사용하여 생성한다. 배열을 생성하면서 여러 값(value)을 추가할 수 있다. 각 값은 쉼표로 구분한다. 배열 값으로는 모든 유효한 JavaScript 값을 할당할 수 있다. 기본 타입과 객체 타입 모두 가능하다.// 빈 배열 생성const shoppingCart = []// 여러 값을 가진 배열 생성const shoppingList = ['두부', '양파', '대파', '부추', '계란'] 배열 항목배열은 객체이기 때문에 속성과 메서드를 갖는다. .. 2025. 6. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 반응형
