JavaScript로 텍스트 줄 간격 설정하기텍스트에서 줄 사이의 거리, 즉 행간을 설정하려면 lineHeight 속성을 사용하면 됩니다. 이 속성은 CSS의 line-height와 동일한 방식으로 작동하며, 단위 없는 숫자를 지정하면 해당 요소의 글꼴 크기를 기준으로 한 배수로 적용됩니다.예를 들어 값이 2라면 기본 행 높이의 두 배가 되어 텍스트 줄 사이가 훨씬 넓어지고, 1보다 작은 값을 지정하면 줄이 서로 붙어 좁게 표시됩니다.예제아래 코드는 버튼을 클릭하면 문단의 줄 간격이 변경되는 간단한 예제입니다. 직접 실행해 결과를
JavaScript에서 키/값 쌍 저장하기키/값 쌍 형태의 데이터를 JavaScript에서 다룰 때는 객체(Object)를 사용하는 것이 가장 효과적입니다. 아래 예시처럼 데이터를 저장할 수 있습니다.var players = { 600 : Sachin, 300 : Brad, };객체를 선택한 이유위와 같은 방식으로 저장한 이유는 키(key)와 값(value)이 일대일(one-to-one)로 매핑되기를 원했기 때문입니다. 특히 키를 조회(lookup) 용도로 활용할 수 있다는 점이 큰 장점입니다. 예를 들어 player
자바스크립트 가비지 컬렉션이란?자바스크립트는 개발자가 직접 메모리를 할당하거나 해제하지 않아도 됩니다. 변수가 선언되는 시점에 엔진이 자동으로 메모리를 할당하고, 더 이상 사용되지 않는 메모리를 스스로 찾아 회수하는데, 이 과정을 바로 가비지 컬렉션(Garbage Collection)이라고 합니다.가비지 컬렉터는 애플리케이션에서 더 이상 사용되지 않는 메모리 영역을 탐색한 뒤, 해당 공간을 자동으로 해제하여 시스템 리소스를 효율적으로 관리합니다. 이때 주로 활용되는 알고리즘이 바로 Mark-and-Sweep(마크 앤 스윕) 알고리즘
목록 항목(list-item)의 마커를 이미지로 설정하려면 자바스크립트에서 listStyleImage 속성을 사용하면 됩니다. 이 속성은 CSS의 list-style-image 속성에 대응하며, 순서 있는 목록(<ol>)과 순서 없는 목록(<ul>) 모두에 적용할 수 있습니다.listStyleImage 속성이란?listStyleImage 속성은 목록 항목 앞에 기본적으로 표시되는 마커(숫자, 불릿 등) 대신 지정한 이미지를 표시해 줍니다. 값은 url(이미지 경로) 형식으로 지정하며, none을 설정하면 이미지
JavaScript로 목록 항목 마커 위치 설정하기목록 항목(list-item)의 마커 위치를 설정하려면 listStylePosition 속성을 사용하면 됩니다. 이 속성은 두 가지 값을 가질 수 있습니다.inside — 마커가 항목 텍스트의 흐름 안쪽에 배치되며, 들여쓰기된 본문과 함께 정렬됩니다.outside(기본값) — 마커가 텍스트 블록 바깥쪽에 배치되어 일반적인 목록 모양이 됩니다.다음 예제 코드를 실행하면 버튼 클릭 한 번으로 목록 항목 마커의 위치를 동적으로 변경할 수 있습니다.예제<!DOCTYPE html>
플렉스(Flex) 레이아웃에서 특정 항목의 표시 순서를 변경하려면 order 속성을 사용합니다. 이 속성은 플렉스 컨테이너 안에서 다른 형제 항목들과 비교하여 해당 항목이 배치되는 순서를 결정합니다. 기본값은 0이며, 값이 작을수록 앞쪽에 배치됩니다. JavaScript로 order 속성 설정하기 JavaScript에서는 element.style.order 구문을 사용하여 페이지가 로드된 후에도 버튼 클릭 같은 이벤트를 통해 항목의 순서를 동적으로 변경할 수 있습니다. 아래 예제 코드를 직접 실행해 결과를 확인해 보세요. 예제 &
네, iOS에서도 스크롤이 발생하면 onscroll 이벤트를 정상적으로 캡처합니다. iOS에서는 이러한 스크롤 동작을 원 핑거(one-finger) 이벤트라고 부르며, 사용자가 화면을 어떻게 탭하고 터치하는지에 따라 이벤트 발생 여부가 결정됩니다.데스크톱과 달리 모바일 기기는 터치 기반으로 화면을 조작하기 때문에, 스크롤 이벤트가 트리거되는 방식도 제스처 종류에 따라 달라집니다. 대표적인 제스처는 다음과 같습니다.1. 패닝(Panning) 제스처손가락 하나로 화면을 드래그해 내용을 밀어내는 패닝 제스처는 가장 일반적인 스크롤 방식입
자바스크립트에서 익명 함수(anonymous function)를 사용하면 성능에 영향을 줄 수 있습니다. 특히 반복문 안에서 익명 함수를 선언하면 매 반복(iteration)마다 새로운 함수 객체가 생성되기 때문입니다. 이는 불필요한 메모리 할당과 가비지 컬렉션 부담으로 이어져 전체 실행 성능을 떨어뜨릴 수 있습니다. 익명 함수란? 이름 그대로 익명 함수는 식별자(함수 이름) 없이 생성되는 함수입니다. 일반적으로 변수에 할당되어 사용되며, 변수 이름을 통해 호출합니다. 또한 다른 함수의 인수로 전달하는 콜백(callback) 용도
setInterval() 메서드란?JavaScript의 setInterval() 메서드는 지정한 시간 간격마다 특정 함수나 표현식을 반복적으로 실행할 때 사용합니다. 이 함수는 설정된 밀리초(ms) 단위의 시간이 경과할 때마다 호출되며, 별도로 중지하지 않는 한 무한히 반복됩니다.setInterval() 기본 예제아래 예제는 2000밀리초(2초)마다 alert(Hello)를 실행합니다. 단 한 번만 실행되는 것이 아니라, 중지하기 전까지 계속 반복됩니다.setInterval(function() { alert(Hello); }, 20
텍스트를 작은 대문자(small capital letters) 형태로 표시하고 싶다면 JavaScript에서 fontVariant 속성을 사용하면 됩니다. 이 속성에 small-caps 값을 설정하면 소문자가 크기가 작은 대문자로 변환되어 화면에 나타납니다.fontVariant 속성이란?fontVariant는 CSS의 font-variant 스타일을 JavaScript로 제어할 수 있게 해주는 DOM 속성입니다. 주요 값은 다음과 같습니다.normal: 기본값으로, 일반적인 글자 형태로 표시합니다.small-caps: 소문자를 크기
JavaScript에서 글꼴 스타일을 설정하려면 fontStyle 속성을 사용합니다. 이 속성에는 세 가지 값을 지정할 수 있습니다.normal — 기본값으로, 기울어지지 않은 일반적인 글꼴 스타일입니다.italic — 해당 글꼴에 기울임꼴 버전이 있으면 그것을 사용합니다.oblique — 일반 글꼴을 단순히 기울여 표시한 사선 형태입니다.아래 예제 코드를 실행하면 버튼 클릭 시 지정된 문단의 글꼴 모음(fontFamily)과 함께 글꼴 스타일을 italic으로 변경할 수 있습니다.예제<!DOCTYPE html> <
JavaScript에서 동적 너비에 맞춰 높이 설정하기 반응형 웹 페이지를 만들다 보면 요소의 높이를 동적으로 변하는 너비와 동일하게 맞춰야 하는 경우가 자주 발생합니다. 예를 들어 정사각형 카드나 이미지 컨테이너처럼 화면 크기에 따라 너비가 변해도 높이가 그에 비례해 함께 변해야 하는 상황입니다. JavaScript(및 jQuery)를 사용하면 몇 줄의 코드로 이 문제를 간단히 해결할 수 있습니다. 아래 예제를 확인해 보세요. 예제 코드 <!DOCTYPE html> <html> <head> &l
터치 스크린 장치 감지의 핵심 원리터치 스크린 장치를 감지하는 가장 좋은 방법은 문서 객체 모델(DOM) 안에 터치 관련 이벤트나 메서드가 존재하는지 확인하는 것입니다. 가장 널리 쓰이는 방식은 ontouchstart 속성의 존재 여부를 검사하는 것입니다.function checkTouchDevice() { return ontouchstart in document.documentElement; }코드 설명document.documentElement는 HTML 문서의 최상위 요소인 <html> 태그를 가리킵니다. 터
JavaScript에서 글꼴의 굵기를 설정하려면 fontWeight 속성을 사용하면 됩니다. 이 속성은 CSS의 font-weight와 동일하게 작동하며, normal, bold, bolder, lighter 같은 키워드 값뿐만 아니라 100부터 900까지의 숫자 값도 지정할 수 있습니다. 숫자가 클수록 글자가 더 굵게 표시됩니다.예제아래 코드를 실행하고 버튼을 클릭하면, 해당 문단의 글꼴 모음(font-family)과 글꼴 굵기(font-weight)가 동시에 변경되는 것을 확인할 수 있습니다.<!DOCTYPE html>
HTML 요소의 높이를 설정하려면 JavaScript에서 height 속성을 사용하면 됩니다. 이 속성은 element.style.height 형태로 접근하며, 픽셀(px)과 같은 단위를 포함한 값으로 원하는 높이를 지정할 수 있습니다. 예제 아래 코드를 실행한 후 버튼을 클릭해 보세요. 클릭하는 순간 해당 버튼의 높이가 100px로 변경되는 것을 확인할 수 있습니다. <!DOCTYPE html> <html> <body> <h1>
JavaScript로 요소 내부 페이지 나누기 동작 설정하기 JavaScript에서는 pageBreakInside 속성을 사용하여 요소 내부에서 페이지가 나뉘는 방식을 제어할 수 있습니다. 이 속성에 auto 값을 지정하면 필요한 경우 요소 내부에서 자동으로 페이지 나누기가 삽입되고, avoid 값을 지정하면 요소 내부에서 페이지가 나뉘는 것을 최대한 방지할 수 있습니다. 참고: 이 속성의 변경 사항은 문서를 인쇄하거나 인쇄 미리보기를 통해 확인할 때만 화면에 반영됩니다. pageBreakInside 속성의 주요 값 auto: 기
웹 페이지에서 이미지나 텍스트 등 특정 요소를 수평으로 정렬하고 싶다면 JavaScript의 cssFloat 속성을 활용하면 됩니다. 이 속성은 CSS의 float 속성에 대응하며, 요소를 왼쪽(left) 또는 오른쪽(right)으로 띄워 주변 콘텐츠와 자연스럽게 배치할 수 있도록 도와줍니다.cssFloat 속성이란?cssFloat는 DOM 요소의 인라인 스타일에서 float 값을 읽거나 설정할 때 사용하는 JavaScript 속성입니다. 값으로는 left, right, none을 지정할 수 있으며, 버튼 클릭과 같은 사용자 이벤트
JavaScript에서는 pageBreakBefore 속성을 사용하여 특정 요소 앞의 페이지 나누기(page-break) 동작을 설정할 수 있습니다. 이 속성 값을 always로 지정하면 해당 요소 앞에 항상 페이지 나누기가 삽입됩니다.참고: 이 속성의 변경 사항은 실제로 문서를 인쇄하거나 브라우저의 인쇄 미리보기 화면에서만 확인할 수 있습니다. 일반 화면에서는 시각적으로 변화가 없습니다.예제아래 예제 코드를 실행해 보세요. 버튼을 클릭하면 myFooter 요소 앞에 페이지 나누기가 설정됩니다. 이후 인쇄 미리보기를 열면 푸터 텍스
JavaScript에서 orphans 속성을 사용하면 페이지 나누기(page break)가 요소 내부에서 발생할 때 페이지 하단에 남겨야 할 최소 줄 수를 지정할 수 있습니다. 이 속성은 주로 인쇄 또는 페이지 형태의 출력 환경에서 문서의 가독성을 높이는 데 활용됩니다.orphans 속성 값 반환하기현재 설정된 orphans 속성 값을 가져오려면 다음과 같이 작성합니다.var res = object.style.orphans;orphans 속성 값 설정하기orphans 속성을 설정하려면 아래와 같이 값을 할당합니다.object.sty
JavaScript에서 텍스트의 글꼴 크기를 설정하려면 fontSize 속성을 사용하면 됩니다. 이 속성은 DOM 요소의 스타일 객체에 접근하여 원하는 크기 값을 지정하는 방식으로 동작합니다.fontSize 속성에는 smaller, larger 같은 상대 키워드뿐만 아니라 16px, 1.5em, 120%처럼 구체적인 단위 값도 사용할 수 있어, 상황에 맞게 유연하게 활용할 수 있습니다.예제아래 예제는 버튼을 클릭하면 지정된 문단 텍스트의 글꼴 종류와 크기가 함께 변경되도록 구현한 코드입니다.<!DOCTYPE html> &