JAVASCIPT

곽민서·2026년 4월 17일

JavaScript란?

자바스크립트는 웹 페이지에 동적인 기능을 추가하기 위해 사용하는 프로그래밍 언어입니다.

  • HTML: 웹의 구조(뼈대)
  • CSS: 웹의 디자인(피부)
  • JavaScript: 웹의 동작(근육/신경)

주요 특징

  1. 동적 상호작용: 클릭 시 메뉴가 나타나거나, 폼 데이터를 검사하는 등 사용자와 소통합니다.
  2. 이벤트 기반: 클릭, 마우스 휠, 키보드 입력 등 특정 사건(Event)에 반응합니다.
  3. 웹 브라우저에서 실행: 별도의 설치 없이 크롬, 사파리 같은 브라우저만 있으면 작동합니다.

자바스크립트가 하는 일(예시)

  • 버튼을 클릭했을 때 알림창 띄우기
  • 다크 모드/라이트 모드 전환하기
  • 서버에서 데이터를 받아와서 화면에 보여주기
  • 실시간 계산기나 게임 만들기

변수

데이터를 저장하는 바구니입니다. 선언 방식에 따라 특징이 다릅니다.

  • const: 재할당 불가능 (상수). 값이 변하지 않을 때 사용합니다.
  • let: 재할당 가능. 값이 변해야 할 때 사용합니다.
  • var: 예전에 쓰던 방식(중복 선언 가능 등 문제가 있어 현재는 거의 쓰지 않습니다).

데이터 타입(Data Types)

자바스크립트의 값은 크게 두 가지 타입으로 나뉩니다.

원시 타입(Primitive Types): 값이 하나인 단순한 타입

  • Number: 숫자 (예: 10,3.14)
  • String: 문자열 (예: 'Hello',"안녕하세요")
  • Boolean: 참/거짓 (true,false)
  • null: 값이 없음을 명시적으로 나타냄
  • undefined: 값이 할당되지 않은 상태

객체 타입(Object Types): 여러 데이터를 하나로 묶은 타입

  • object: 키(key)와 값(Value)의 쌍으로 이루어진 집합
  • Array: 순서가 있는 데이터의 목록(배열)
    💡정리
  1. 변수 선택: 기본적으로 const를 쓰고, 나중에 값을 바꿔야 할 떄만 let을 쓰기
  2. 객체(Object): 실제 사물을 묘사할 때 유용하다. (예: 자동차 = {색상: '빨강', 속도: 100})
  3. 배열(Array): 같은 종류의 데이터 목록을 관리할 때 씁니다. (예: 상품리스트 = ['사과', '배', '포도'])

DOM 선택 메서드

DOM(Document Object Model) 선택 메서드는 자바스크립트가 HTML 뼈대에서 특정 요소를 집어내어 명령을 내릴 수 있게 해주는 통로이다.

1. 고전적인 선택 방식(빠름)

  • document.getElementById('아이디'): 해당 id를 가진 단 하나의 요소를 반환합니다.
  • document.getElementsByClassName('클래스'): 해당 class를 가진 모든 요소를 리스트(HTMLCollection) 형태로 반환합니다.
  • document.getElementsByTagName('태그명'): 해당 태그(div,p)를 가진 모든 요소를 반환합니다.

2. 현대적인 선택 방식

CSS 선택자 문법을 그대로 사용할 수 있어 매우 편리합니다.

  • document.querySelector('CSS선택자'): 조건에 맞는 요소 중 가장 첫 번째 것 하나만 가져옵니다.
  • document.querySelectorAll('CSS선택자'): 조건에 맞는 모든 요소를 리스트(NodeList) 형태로 가져옵니다.
    💡정리
  • 하나만 고를 때: getElementById 또는 querySelector를 사용하세요.
  • 여러 개를 고를 때: querySelectorAll이 가장 범용성이 높고 편리합니다. (forEach 반복문을 바로 쓸 수 있기 때문입니다.)
  • CSS 선택자 활용: querySelector('.my-class'), querySelector('#my-id'), querySelector('div > p') 처럼 CSS에서 쓰던 방식 그대로 사용하면 됩니다.

window.scroll()

브라우저의 스크롤을 특정 위치로 이동시킬 수 있는 메소드. 사용 방법은 다음과 같다.
1. 문법

  • 좌표 방식: window.scroll(x좌표, y좌표)
  • 옵션 방식: window.scroll({ top: y좌표, left: x좌표, behavior: 'smooth' })
  1. 주요 속성
  • top:이동하고 싶은 세로 위치(단위:px)
  • left: 이동하고 싶은 가로 위치(단위:px)
  • behavior: 스크롤 동작 방식
    - auto: 즉시 이동(기본값)
    - smooth: 부드럽게 애니메이션 효과와 함께 이동

💡정리
1. scroll() vs scrollTo(): 둘은 완전히 같습니다. 보통 더 명확한 의미인 scrollTo()를 선호하기도 합니다.

  1. scrollBy(): 현재 스크롤 위치를 기준으로 상대적으로 이동합니다. (예: scrollBy({top: 100})는 현재 위치에서 100px 더 아래로 내려감)

  2. 마크다운 정리 팁: "특정 위치로 이동할 때는 scrollTo, 현재 위치에서 더 움직일 때는 scrollBy"라고 요약해보기

HTML요소.offsetTop

요소의 윗면 경계가 최상위 요소의 윗면 경계와(쉽게 말해 브라우저 화면 맨 위) 얼마만큼 떨어져 있는지 그 거리를 반환해주는 속성이다.

offsetTop

offsetTop 속성은 읽기 전용 속성으로, 현재 요소의 상단 면과 offsetParent(가장 가까운 상위 배치 요소) 상단 면 사이의 거리를 픽셀(px) 단위로 반환합니다.

1. 특징

  • 상대적 거리: 문서 전체(body) 기준이 아니라, 가장 가까운 포지셔닝된(Position이 static이 아닌) 부모를 기준으로 합니다.
  • 단위: 숫자 값만 반환합니다. (예: 150 -> 150px을 의미)
  • 읽기 전용: element.dffsetTop = 100) 처럼 값을 직접 수정할 수 없습니다.

2. 활용 사례

  • 스크롤 시 특정 섹션의 위치를 파악하여 메뉴 활성화
  • "Top"버튼이나 "특정 위치로 이동" 버튼 구현
  • 무한 스크롤 구현 시 마지막 요소의 위치 파악

💡정리
1. 기준점 확인: 만약 offsetTop값이 예상보다 작게 나온다면, 부모 요소에 position: relative;가 걸려 있는지 확인하기
2. 문서 전체 기준: 만약 부모가 아닌 전체 문서 상단에서의 위치를 알고 싶다면, 요소의 offsetTop과 부모들의 offsetTop을 계속 더해나가거나 getBoundingClientRect().top _ window.pageYOffset공식을 주로 사용합니다.

offsetParent

offsetParent속성은 해당 요소의 위치를 계산할 떄 기준이 되는 가장 가까운 배치된(positioned) 조상 요소를 반환합니다.

1. 기준이 되는 조건 (우선순위)

다음에 해당하는 가장 가까운 조상 요소를 찾습니다.
1. position 속성이 static이 아닌 요소(relative,absolute,fixed,sticky)
2. <td>,<th>,<table>태그
3. 위 조건에 아무도 해당하지 않으면 <body>

2. 예외 사항

  • 요소의 display가 none인 경우: null 반환
  • 요소의 position이 fixed인 경우: 브라우저에 따라 다르지만 보통 null반환(화면 전체가 기준이 되기 때문)
    💡정리
  1. 계산의 기초: offsetTop: 100px이라는 결과를 봤을 때, "그 100px이 어디서부터의 100px인가?"를 결정하는 것이 바로 offsetParent입니다.
  2. 레이아웃 팁: 자식 요소를 특정 박스안에서 절대 위치(absolute)로 배치하고 싶을 때 부모에게 position: relative;를 주는 이유가 바로 이 offsetParent를 해당 부모로 고정하기 위함입니다.

textContent와 innerText의 공통점

textContent와 innerText는 요소와 그 자식 요소의 텍스트 콘텐츠를 반환하거나 대입할 수 있다.

textContent와 innerText의 차이점

'텍스트 콘텐츠를 읽거나 변경한다...결국 둘은 같은 것 아니야?'라고 생각하기 쉽지만, 실은 서로 조금씩 다르다.

textContent

  • 엔터를 이용한 줄바꿈 포함
  • 스페이스를 이용한 연속적인 공백 포함
  • 모든 텍스트 노드를 반환
  • 모든 노드 개체에 대해 정의

innerText

  • 엔터를 이용한 줄바꿈 미포함
  • 스페이스를 이용한 연속적인 공백 미포함
  • 사용자가 볼 수 있는 텍스트 노드만을 반환
  • HTMLElement 개체에 대해서만 정의

setInterval

일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드

clearInterval

setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다.
숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.

profile
곽민서
이전 포스트

CSS

다음 포스트

프로젝트가 진행 되는 방법/순서

0개의 댓글