전체 글107 [CSS] Writing Mode 📢 들어가며기본 CSS를 사용하는 경우 텍스트는 왼쪽에서 오른쪽으로, 위에서 아래로 흐르는 레이아웃을 가지게 된다.하지만 일본어나 중국어의 세로쓰기를 구현하거나, 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어를 지원해야 할 때, 또는 독특한 디자인을 위해 텍스트 방향을 바꾸고 싶을 수 있다. CSS의 writing-mode는 이런 다양한 텍스트 방향을 자유롭게 제어할 수 있게 해주는 속성이다. ⚽ Writing ModeCSS 의 writing-mode속성은 아래와 같은 특징을 갖는다.텍스트의 진행 방향(인라인 방향)과 블록의 배치 방향(블록 방향)을 정의할 때 사용한다.이는 단순히 텍스트를 회전시키는 transform: rotate()와는 다르다writing-mode는 텍스트 흐름 자체를 바꾸며, 레이아웃.. 2025. 9. 13. [Javascript] 줄바꿈 기호 처리 📢 들어가며일반적으로 텍스트의 줄바꿈 표기는 CR, LF, CRLF 3가지가 사용된다.CR(Carriage Return, \r) : Mac OS 9 이전에 사용LF(Line Feed, \n) : 리눅스, 최신 버전의 Mac OS 에서 사용CRLF(\r\n) : CR + LF를 합친것으로 윈도우에서 사용텍스트에 위와 같은 기호가 포함되어 있는 경우, 동일하게 줄바꿈 처리가 될 수 있도록 작업을 해주어야 한다. 브라우저에서 지원하는 줄바꿈 표기HTML에서는 CR, LF, CRLF 3가지 방식 모두 지원한다. 그렇기 때문에 HTML을 작성할 때는 줄바꿈 표기에 주의해서 코드를 작성할 필요는 없다. 하지만 최종적으로 HTML 파싱하는 과정에서 CR, CRLF 표기는 모두 LF 표기로 변환되어 처리된다.html.. 2025. 9. 5. [Javascript] EventTarget, Node, Element, HTMLElement 간단 정리 📢 들어가며웹 개발을 하다 보면 브라우저가 제공하는 다양한 DOM 관련 클래스를 보게 된다. 그중에서도 EventTarget, Node, Element, HTMLElement는 가장 기본이자 자주 등장하는 네 가지로, DOM 구조와 이벤트 동작을 이해하는 데 핵심적인 역할을 한다. 🎈 EventTarget이름에서도 알 수 있듯이, 모든 이벤트 발생 대상이 구현하는 기본 인터페이스이다.이벤트를 등록하는 데 자주 쓰이는 Element뿐 아니라 AudioContext 같은 비 DOM 객체도 EventTarget을 상속한다. 주요 메서드addEventListener()removeEventListener()dispatchEvent()Element가 EventTarget을 상속하고 있기 때문에 아래와 같이 이.. 2025. 8. 8. [Javascript] setInterval과 requestAnimationFrame 📢 들어가며requestAnimationFrame(이하 rAF)이 등장하기 전에는 setInterval을 활용해 애니메이션을 구현했다.하지만 rAF이 등장고나서부터는 부드러운 애니메이션을 구현하기 위해 rAF를 주로 사용하게 되었다. 어떤 차이가 존재하는지 알아보자. 🎤 호출 타이밍두 함수 모두 특정 트리거에 따라 호출될 함수를 예약한다. setInterval은 지정된 시간 간격마다 타이머 이벤트가 트리거되어 반복적으로 콜백을 호출한다. rAF는 브라우저의 VSync 신호를 트리거로 하여 다음 리페인트 시점에 맞춰 콜백을 한 번 실행한다. 예를 들어, 아래와 같이 간격을 설정하면 1초에 약 60번 호출되어 60프레임의 애니메이션을 표현할 수 있다.setInterval(() => {}, 1000 / .. 2025. 8. 3. [Javascript] 값이란 무엇인가? 값에 대해 더 알아보기 📢 들어가며값은 자바스크립트에서 가장 많이 사용되는 요소 중 하나이다. 그렇기 때문에 값의 정의와 사용방법을 분명히 이해해야만 올바르게 활용할 수 있다.기본 문법에 대한 설명은 포함되어 있지 않습니다. 🖥 값과 표현식 값은 표현식이 평가된 결과로 자바스크립트에서 지원하는 8가 타입 중 하나에 속하는 데이터라고 할 수 있다. 그렇다면 표현식은 무엇일까? 표현식은 자바스크립트 소스에서 문법적으로 완결된 코드 단위로, 평가되면 단 하나의 값을 산출한다.쉽게 말해 표현식으로 작성 된 코드를 실행했을 때 오류 없이 동작하고, 실행의 결과가 값을 만드는 코드라고 할 수 있다.즉, 값을 만들지 못하는 코드는 표현식이 아니다. 표현식에는 무엇이 있는가?대표적으로 다음과 같은 표현식이 존재한다. 이외에도 다양.. 2025. 8. 2. [Javascript - 성능] 리플로우 줄이기 - 3 (requestAnimationFrame - 2) 🔗 이전 내용DOM 렌더링 방식에 따른 성능 비교해보기 - 1DOM 렌더링 방식에 따른 성능 비교해보기 - 2리플로우 줄이기 - 1리플로우 줄이기 - 2 (requestAnimationFrame - 1) 📢 들어가며requestAnimationFrame(이하 rAF)을 활용해서 리플로우를 줄이는 방법에 대해서 알아보자. 본래 목적은 애니메이션을 부드럽게 만드는 것에 있다. 하지만 이 타이밍을 활용하면 불필요한 레이아웃 계산을 줄이고, 백그라운드 탭에서 자동으로 멈추는 등 결과적으로 성능을 높일 수 있다. DOM 읽기/쓰기 작업 분리이전 포스트에서 확인했듯, 쓰기 직후 곧바로 레이아웃 값을 읽으면 강제 리플로우 가 일어난다.그래서 이를 방지하기 위해 쓰기 작업과 읽기 작업은 분리해서 강제 리플로우를.. 2025. 7. 27. 이전 1 2 3 4 ··· 18 다음
