frontend, backend, 개발툴등에 대한 개인 자료 정리 공간입니다.

Note > tailwindcss div 안의 내용에 맞게 width자동 조절하기

By a3040, Published on Invalid Date

display: inline-block; /* 또는 display: inline-flex; */

Note > 자바스크립트 관련 클래스 이름 얻기 classList

By a3040, Published on Invalid Date

HTML요소에서 클래스 목록을 얻습니다. DOMTokenList 객체를 반환합니다.

관련 메소드는

add(className): 클래스 추가

remove(className): 클래스 삭제

toggle(className): 클래스 토글 (존재하지 않으면 추가, 존재하면 삭제)

contains(className): 클래스 포함 여부 확인

item(index): 클래스 목록에서 인덱스로 클래스 얻기

length: 클래스 목록의 길이

가 있습니다.

classList

const element = document.getElementById("myElement");
// 클래스 추가
element.classList.add("newClass");
// 클래스 삭제
element.classList.remove("oldClass");
// 클래스 토글
element.classList.toggle("active");
// 클래스 포함 여부 확인
const hasClass = element.classList.contains("active");
console.log(hasClass);
// 클래스 목록의 길이
const classCount = element.classList.length;
console.log(classCount);

Note > tailwindcss 요소의 위치 조절 position:relative, position:absolute

By a3040, Published on Invalid Date

설정 하지 않았을때 (position: static ) 기본은 요소가 일반적인 문서 흐름에 따라 다른 요소와 겹치지 않고 자연스럽게 쌓이며 배치됩니다. top, right, bottom, left 속성 무시: static 위치 속성을 가진 요소는 top, right, bottom, left 속성을 사용하여 위치를 조절할 수 없습니다.

position: relative; 부모 요소의 컨텍스트 내에서 동작합니다.

position: absolute; 부모 요소의 컨텍스트 내에서 동작합니다.

position: relative;

부모 요소 내에서 자신의 원래 위치를 기준으로 상대적인 위치를 조절합니다.

부모 요소의 레이아웃 흐름에 영향을 미치지 않으며, 다른 요소와 겹치지 않습니다.

부모 요소의 위치를 변경할 때, position: relative;로 설정된 자식 요소도 함께 움직이지만, 다른 요소에 영향을 주지 않습니다.

position: absolute;

부모 요소 중에서 position 속성이 static이 아닌(기본 값) 첫 번째 부모 요소를 기준으로 위치를 결정합니다.

부모 요소의 레이아웃 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

부모 요소의 위치를 변경하면 position: absolute;로 설정된 자식 요소도 영향을 받아 위치가 변경됩니다.

position: sticky

스크롤될 때 일정 위치에서 고정되도록 하는 속성입니다.부모 요소의 영향을 받습니다.top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정할 수 있습니다.