I'm sw engineer!

pointer-events는 CSS 속성 중 하나로, 마우스 클릭이나 터치 같은 "포인터 이벤트"를 해당 요소에 전달할지 여부를 결정합니다.🔍 쉽게 말해:pointer-events: none;을 주면,해당 요소는 클릭되지 않으며, hover, active 등도 무시됩니다.🧪 예시클릭 안 됨클릭 됨 none → 클릭해도 아무 일도 안 생김auto → 기본 동작 (클릭 가능) 이 버튼도 클릭 안됨 부모인 에 pointer-events: none을 줘도, 자식인 버튼도 클릭 안 됩니다. 값설명auto기본값, 포인터 이벤트 정상 처리none포인터 이벤트 무시 (클릭, hover 모두 무시)inherit부모 요소의 값을 상속

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}🔧 구성 요소 설명✅ grid-template-columnsCSS Grid의 열 너비를 설정하는 속성입니다.✅ repeat(3, 1fr)repeat() 함수는 같은 값을 반복할 때 사용하는 축약 문법입니다.repeat(3, 1fr)는 1fr 1fr 1fr와 동일한 의미입니다.여기서 fr은 **fractional unit (비율 단위)**로, 남은 공간을 균등하게 나누는 단위입니다.🎯 의미 정리그리드를 3개의 열로 나누되,각 열의 너비를 동일하게 (1fr) 설정하겠다는 뜻입니다. 1 2 3이렇게 하면 3개의 칸이 수평으로 균등하게 배치됩니다.필요하다면 r..

.wrap-type1 { padding: 1.6rem; } 안에 요소를 하나만 제외시키고 싶을땐?  방법 1: margin을 이용한 보정.wrap-type1 { padding: 1.6rem;}.wrap-type1 .exclude-padding { margin: -1.6rem;}  방법 2: position: absolute 사용 (상황에 따라).wrap-type1 { position: relative; padding: 1.6rem;}.wrap-type1 .exclude-padding { position: absolute; top: 0; left: 0; right: 0;}  방법 3: padding을 특정 요소에만 적용.wrap-type1 { display:..

📌 동일한 z-index일 때 위로 표시되는 요소 순서HTML에서 나중에 선언된 요소가 위로 표시됨DOM(Document Object Model) 구조에서 뒤쪽(later in the DOM)에 있는 요소가 위에 표시됩니다.Box 1Box 22. 요소의 부모(stacking context)가 높은 z-index를 가지면 그 안의 요소도 영향을 받음부모 요소의 z-index가 높은 요소 안의 자식 요소는, z-index가 같더라도 다른 부모 아래에 있는 요소보다 위에 올 수 있음. A B 3. position: relative | absolute | fixed | sticky가 적용된 요소가 position: static인 요소보다 위에 표시됨position이 설정되지 않은(static) 요소..

rem(root em) 단위는 CSS에서 글꼴 크기 및 레이아웃을 상대적으로 설정하기 위해 사용되는 단위입니다. rem은 "root em"의 줄임말로, 이는 문서의 루트 요소()의 글꼴 크기와 관련이 있습니다.기본적으로, 1rem은 루트 요소의 글꼴 크기와 동일합니다. 예를 들어, 브라우저의 기본 설정에서 루트 요소의 기본 글꼴 크기는 16px입니다. 이 경우 1rem은 16px을 의미합니다. 따라서, font-size: 1rem;은 16px 크기의 글꼴을 설정하는 것입니다. 만약 루트 요소의 글꼴 크기가 변경되면, rem 단위로 설정된 요소들의 크기도 이에 따라 자동으로 조정됩니다.예를 들어, 루트 요소의 글꼴 크기를 20px로 설정하면 1rem은 20px을 의미하게 됩니다. 이 방식은 전체 레이아웃을..

style="display:none;"으로 설정했는데 해당 영역의 높이만큼 자리차지는 하게 해주고 싶으면 어떻게 해야될까? Visibility를 활용하는 방법:내용visibility:hidden; 속성은 요소를 보이지 않게 하지만, 공간은 그대로 유지합니다. style="visibility:hidden;" 을 해제하는 jquery 코드 $('#myElement').css('visibility', 'visible'); 이 영역은 처음에 보이지 않습니다. Show Element

가 스크롤을 내려도 페이지 최상단에 고정되도록 하려면 CSS의 position: sticky 속성을 사용할 수 있습니다.  1. 을 감싸는 에 길이를 설정한다.나는 max-height:80vh로 화면의 길이에 따라 유동적으로 변하게 높이를 설정해주었다.2. thead th에 css 설정을 해주었다.$(document).ready(function(){ const $tableHead = $('thead th'); $tableHead.css({ 'position': 'sticky', 'top': '0', 'z-index': '2', 'background-color': '#f2f2f2' }..

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse have shared or separate borders." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse" data-og-url="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse" data-og-image="https://blog.kakaocdn.net/dna/i8FKa/hyWdnEAtaO/AAAAAAAAAAAAAAAAAAAAAKHY1BsENQWgx5rJJ13lRv2fr5059mk-e-UcABBcICK9/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=%2BLr0pvr3jQl5anx0%2F3%2F0LKp7EuU%3D

multiselect를 datatables 안의 에 넣어서 사용을 하는 상황.multiselect를 클릭하여 dropdown menu가 펼쳐질때 의 아래에 펼쳐지게 하는 옵션을 찾아보았는데,기본적으로는 원래 아래에 펼쳐지는건데 영역에 따라 위치가 변하고 있는거라, 따로 CSS로 설정을 해줘야하는 상황.그런데 js로 css를 설정해주려고 했는데,$(td).on('click', () => { // 드롭다운 메뉴가 확장될 때 if (!$(td).find('div.multiselect-container').hasClass('show')) { $(td).find('div.multiselect-container').css({ 'position': 'absolute !imp..

https://darrengwon.tistory.com/130 Flexbox 제대로 활용하기 (flex-grow, flex-shrink, flex-wrap etc) Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번 darrengwon.tistory.com .flex-container { width: 550px; margin: 0px auto; display: flex; } .flex-item:nth-child(3) { margin-left: auto; } margin: 0px auto;..