HTML
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
[JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기
2025.04.17이미지 비교 슬라이더는 핸들을 좌우로 움직여서 두 이미지를 비교할 수 있는 UI 패턴으로 쇼핑몰이나 제품 소개 페이지 등에서 자주 볼 수 있다. 이러한 이미지 비교 슬라이더는 range 타입의 input 태그와 6줄 정도의 자바스크립트 코드만으로 구현할 수 있다. range 타입의 input은 슬라이드바를 조정하여 범위 내 숫자 값을 선택할 수 있는 입력 필드다. 기본적으로 브라우저에서 제공하는 스타일이 적용되어 있다. 이 기본 스타일을 모두 제거하고 이미지의 너비/높이만큼 크기를 확장하면, 슬라이더 영역을 클릭 혹은 드래그할 때마다 (스타일을 제거해서 화면에 보이지 않는) 핸들이 해당 위치로 이동해서 값이 변경된다. 기본적인 구현 방법은 다음과 같다.이미지 1, 이미지 2를 감싸는 마스크 요소, ran..
[CSS] 쌓임 맥락 Stacking Context
[CSS] 쌓임 맥락 Stacking Context
2025.02.26TL;DR기본적으로 요소들은 DOM 순서에 따라 쌓인다.positioned(position ≠ static) 요소는 non-positioned(position = static) 요소보다 위에 쌓인다.positioned 요소들 중 z-index 값이 높을수록 위에 쌓인다.새로운 쌓임 맥락이 생성되면 자식 요소는 해당 맥락 안에서 순서가 결정된다. 설명쌓임 맥락(Stacking Context)은 HTML 요소들을 가상의 z축(깊이) 방향으로 배치하는 개념이다. 기본적으로 요소들은 DOM 순서에 따라 쌓인다. 즉, 뒤에 정의한 요소일수록 화면에선 위에 위치한다. position을 적용한 요소(positioned)는 position을 적용하지 않은 요소(non-positioned)보다 위에 쌓인다. posit..
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
2024.06.02insertAdjacentHTML vs innerHTMLelement.insertAdjacentHTML(position, htmlString) element.insertAdjacentHTML() 메서드는 인자로 전달한 문자열(htmlString)을 HTML로 파싱해서 지정된 위치(position)에 삽입하는 메서드다. 사용자 입력을 받지 않는 곳에 사용하면 createElement() 메서드를 사용하는 것 보다 간편하게 요소를 삽입할 수 있다. 사용자 입력을 받아서 처리할 때는 XSS 공격을 방지하기 위해 별도의 sanitizing이 필요하다. 비슷한 메서드로 element.innerHTML()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있..
[HTML] select, option 태그 주요 속성과 특징
[HTML] select, option 태그 주요 속성과 특징
2024.05.29Option 생성자 함수 | MDN💡 HTML 옵션 태그의 selected 어트리뷰트와 자바스크립트로 접근하는 option.selected 속성(프로퍼티)은 서로 독립적인 기능을 가진다. 옵션 태그의 selected 어트리뷰트는 초기 선택 상태를 나타내고, option.selected 속성은 현재 선택 상태를 반영하고 제어하는데 사용한다.// Option 생성자를 사용하면 document.createElement() 보다 더 간결하게 작성할 수 있다new Option(text?, value?, defaultSelected?, selected?) ◼︎ text : 옵션 요소에 표시할 텍스트 | 기본값 "" 빈 문자열text에 지정한 값은 option.textContent로 설정된다.◼︎ value : 옵..
[Markdown] GitHub 마크다운 작성 꿀팁 모음
[Markdown] GitHub 마크다운 작성 꿀팁 모음
2024.05.23Admonition Box인용구(Blockquote)를 활용해서 중요한 정보를 강조할 수 있다. NOTE, IMPORTANT, WARNING 세 가지 타입을 지원하며, 각 타입에 해당하는 아이콘과 컬러로 자동 변경된다. 참고로 README.md 마크다운 편집기에선 미리보기(Preview)로 표시되지 않지만 저장 후엔 정상적으로 표시된다.> [!NOTE] > Highlights information that users should take into account, even when skimming.> [!IMPORTANT] > Crucial information necessary for users to succeed.> [!WARNING] > Critical content demanding immed..
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
2024.05.22목표아래 DOM 구조에서 가장 안쪽 요소부터 시작해 부모 요소로 갈 수록 중첩 레벨이 1씩 늘어나고, class에 대응하는 dataset에 중첩 레벨 값을 할당해야 한다. 예를들어 class가 "clause" 이고, 해당 요소의 중첩 레벨이 2라면 data-clause-lv="2" 속성을 할당한다. Hello ; 만약 자식 요소가 2개 이상일 땐 자식 요소들중 중첩 레벨이 가장 높은 값 + 1이 부모 요소의 중첩 레벨이 된다. 아래 예시를 기준으로 1번째 자식의 중첩 레벨(data-word-lv="1") 보다, 2번째 자식의 중첩 레벨(data-phrase-lv="2")이 더 높으므로, 부모 요소의 중첩레벨은 3이 된다(data-clause-lv="3"). ..
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
2024.05.21아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 태그로 감싸도록 구현하는 게 목표. Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim 드래그한 문자열 랩핑❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출 ❷ 선택한 영역에 대한 Selection 객체 획득const selection =..
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
2024.05.13prettier-plugin-tailwindcss 플러그인을 사용하면 TailwindCSS의 유틸리티 클래스 정렬 규칙에 따라 클래스를 자동 정렬해준다. 이전까진 Tailwind Formatter 같은 IDE 플러그인을 사용해서 정렬이 필요할 때마다 부가기능을 실행(⌃ ⇧ H)했는데 그럴 필요가 없어졌다. prettier-plugin-tailwindcss 플러그인을 설치하고 파일 저장시 자동 포매팅 되도록 IDE를 설정하면, 유틸리티 클래스도 함께 정렬돼서 편하다. 참고로 클래스 자동 정렬 외에도 잘못 입력한 클래스 오류 표시, 축약(shorthand) 사용 강제, 임의(arbitrary) 값 사용 금지 같은 규칙이 적용된 eslint-plugin-tailwindcss ESLint 플러그인도 있다. 설정..
[JS] 인라인 스타일 정의 - cssText
[JS] 인라인 스타일 정의 - cssText
2024.05.13cssText는 새로운 요소에 여러 스타일을 추가해야 할 때 유용하다. 기존 인라인 스타일을 완전히 교체하므로 그 외 상황에선 잘 사용하지 않는다. 자바스크립트를 이용해 엘리먼트 스타일을 수정할 땐 elem.style.propertyName(프로퍼티 이름은 카멜 케이스 사용) 으로 접근한 뒤 원하는 스타일 값을 할당하는 방식을 사용한다. 하지만 여러 스타일을 추가할 때마다 일일이 propertyName으로 접근하기엔 조금 번거롭다.// CSS 파일에 width, height, margin, font-size 등의 스타일이 적용된 엘리먼트const $header = document.querySelector('.header');$header.style.fontSize = '20px'; 🔍 엘리먼트의 sty..
[React] 캐로셀(Carousel) 작동 방식 살펴보기
[React] 캐로셀(Carousel) 작동 방식 살펴보기
2024.05.13캐로셀 구조많은 웹사이트에서 여러 이미지를 슬라이드 형식으로 보여주기 위해 사용하는 캐로셀 뷰어는 생각보다 간단하게 구현할 수 있다. 캐로셀 뷰어의 DOM 구조는 대략 아래와 같다. 캐로셀 아이템 Wrapper : 넘침 영역 숨김 처리 overflow: hidden; width: 100%; height: 100%;캐로셀 아이템 Parent : 여러개의 캐로셀 아이템을 감싸는 부모 ⚡️캐로셀 아이템들의 수평 쌓임을 위해 Flexbox 레이아웃 적용스크롤바 숨김 처리전환 효과(transition)다음 버튼을 누를 때마다 좌측으로 이동 transform: translateX(-100%|-200%|...)캐로셀 아이템 : 1개 아이템만 보이도록 처리 width: 100%; ..
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
2024.05.11form 외부에서 form 관련 요소 연결form 관련 요소(button, input 등)의 form 속성으로 어떤 form에 속할지(연결) 지정 할 수 있다. 주로 form 외부에 있는 form 관련 요소를 form에 연결할 때 사용한다. 이때 form 요소의 id 값과 form 관련 요소의 form 속성 값이 동일해야 하고, 같은 문서(document)에 있어야 된다. form 내부에 있는 form 관련 요소는 자동으로 해당 form에 속하므로 form 속성으로 명시하지 않아도 된다. Submit 💡 button 요소의 type 속성 기본 값은 submit이며, 클릭해서 양식을 제출하면 새로고침하는 기본 동작을 가진다. 새로고침을 방지하려면 form 요소 onsubmit 핸들러에 event.p..
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
2024.05.11Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. e.g. peer-hover peer-focus peer-disabled 참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..