z-index가 높은 요소가 다른 요소 위에 놓이면 해당 요소 위의 요소를 가리게 되므로, display:none으로 설정했더라도 클릭 이벤트가 전달되지 않을 수 있습니다. Super-Sub 관계가 아닌 경우 다음과 같이 z-index값 때문에 btn이 overlay 요소 아래에 위치하는 경우, 클릭하세요 .container { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:none; /* 보이지 않음 */ z-index: 100; /* 다른 요소 위에 위치 */ pointer-events: none; /* 다른 요소에 이벤트 전파 중단 */ } .btn { pos..
CSS 프레임워크인 Tailwind CSS와 PurgeCSS를 함께 사용하여 프로젝트의 스타일 시트 크기를 줄이는 방법 Tailwind CSS의 크기가 커질 수 있다 Tailwind CSS는 유틸리티-퍼스트(Utility-first) 방식의 CSS 프레임워크로, 반응형 디자인, 상태 변화, 그리고 커스텀 컴포넌트를 쉽게 구현할 수 있게 해줍니다. 하지만, 많은 유틸리티 클래스로 인해 최종 CSS 파일의 크기가 커질 수 있는 단점이 있습니다. 이를 해결하기 위해 PurgeCSS를 사용할 수 있습니다. PurgeCSS란? PurgeCSS는 사용되지 않는 CSS를 제거해주는 툴입니다. 이를 사용하면 웹사이트의 로딩 시간을 줄이고 성능을 향상시킬 수 있습니다. Tailwind CSS 및 purgeCSS를 공식 ..
1. parseInt 아래와 같이 사용하면 된다. parseInt(string) 2. string + 1 또는 string - 1 문자열에서 더하기나 빼기 연산을 추가해주면, 알아서 숫자 연산으로 인식하고 숫자 타입으로 바꿔준다. 인덱스는 0부터 시작하기에 -1이 유용하게 쓰이는 경우가 많다. 그러나 다른 사람과 협업할 경우에는 명시적으로 타입을 변환했다는 걸 나타내는 게 좋다.
배열 등을 순회하며 특정 동작을 실행시킬 수 있다. for of 내용을 바꾸지 않는다면 let을 const로 바꿔도 무방하다. const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // Expected output: "a" // Expected output: "b" // Expected output: "c" let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // [a, 1] // [b, 2] // [c, 3] for (let [key, value] of iter..
var로 정의된 opacity값을 쓰다가 설정한 색 대로 안 나오는 걸 체험(?)으로 알게된 것들이다. 보통 복붙을하면 콤마가 들어간 값인 경우가 많은데 현재의 CSS는 opacity값 앞에 슬래시가 있었다. 이 경우 작동하지 않는다. 사실 그냥 생각해보면 당연히 저렇게 안 쓸 것 같은데 var 때문에 자연스럽게 넘어가버렸다.. 사용 가능 rgb(127 179 216 / var(--tw-text-opacity)); rgba(127 179 216 / var(--tw-text-opacity)); rgba(127, 179, 216, var(--tw-text-opacity)) 사용 불가능 rgba(127, 179, 216 / var(--tw-text-opacity))
cateBadge 로 변수 선언한 부분은 아래 캡쳐에서 썸네일 좌측 상단에 있는 Record 부분을 말하는 것이다. 원래 카테고리명은 상위카테고리/하위카테고리로 표시가 되지만, 하위카테고리만 표시되도록 하고 싶은 경우에 활용 가능하다. lastIndexOf & substring lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 -1을 반환합니다. substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. IndexOf 함수의 종류인 lastIndexOf를 사용하여 뒤부터 탐색하여 최초로 마주치는 / 부터 잘라주면 ..
1. background background size 배경으로 들어갔을 때만 사용 가능 contain : 이미지의 가로세로 비율을 유지하면서, 이미지가 잘리지 않을 때까지만 채운다. cover : 이미지의 가로세로 비율을 유지하면서, 이미지가 잘리더라도 주어진 크기를 꽉 채운다. 사이즈 직접 입력 : (100%, 200px, 50em 등) 비율 무관, 입력한 값에 따른다. background-position background-position: top; background-position: bottom; background-position: center; background-position: left; background-position: right; background-position: 25% 75%;..
Node.textContent 와 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 노드의 모든 요소를 반환한다. textContent는 XSS 공격의 위험이 없다. innerText 와의 차이점 innerText는 "사람이 읽을 수 있는" 요소만 처리한다. "숨겨진" 요소의 텍스트는 반환하지 않는다. innerText는 CSS를 고려하기에 리플로우가 발생한다. (피하는 게 좋다) Internet Explorer 기준으로 innerText를 수정하면 요소의 모든 자식 노드를 제거한다. 해당 텍스트 노드를 재활용하기 어렵다. innerHTML 과의 차이점 Element.innerHTML는 이름 그대로 HTML을 반환한다. HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. HTML..
inline inline 요소는 width와 height값 지정을 무시한다. margin과 padding(콘텐츠와 요소 테두리 사이의 거리를 정의)은 좌우만 반영된다. span, a 등이 inline 요소에 속한다. (그냥 한 줄에 같이 들어가는 요소라고 생각하면 편하다.) block 혼자 한 줄을 차지하는 것이 block이다. 대표적으로 div가 있다. inline-block inline요소를 block으로 쓰려면 display: inline-block을 해주면 된다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 그러나 block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. bu..
