https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/ Learn CSS :has() selector by examples: 5 top use cases Let's explore ten practical examples to learn CSS :has selector. bejamas.io https://developer.mozilla.org/en-US/docs/Web/CSS/:has :has() - CSS: Cascading Style Sheets | MDN The functional :has() CSS pseudo-class represents an element if any of the relative selectors th..
relative와 좌표평면 왜 absolute는 가장 근접한 relative를 기준으로 위치 조절이 될까? relative는 자식요소들에게 엘리먼트의 높이와 너비만큼의 좌표평면을 제공하고, absolute는 자신이 속한 평면 내의 절대 위치에서만 이동할 수 있기 때문이다. 부모 엘리먼트의 relative는 자식 내 모든 엘리먼트에게 자신의 높이와 너비로 구성된 좌표평면을 내준다. absolute는 top, bottom, right, left를 통해 평면 내부의 절대 위치로 이동한다. z-index z-index는 말 그대로 평면 상에서의 z축에 위치한 엘리먼트에 인덱스를 걸어주는 것이다. 인덱스가 높을수록 z값이 높아서 평면상 상단에 보인다. . 부모 요소의 relative가 있어야 좌표평면이 제공되므로..
Element.scrollHeight 특정 엘리멘트 컨텐츠의 높이를 픽셀 단위로 하여 값을 반환한 것으로, 화면에 보이지 않는 높이도 픽셀로 포함한다. 컨텐츠가 포함된 엘리먼트의 최소 높이와 scrollHeight은 같다고 볼 수 있는데, 수직 스크롤바 없이도 뷰포트에 모든 컨텐츠를 알맞게 표시하기 위해서이다. window.innerHeight 브라우저 화면 내부 높이를 픽셀로 치환한 것. 브라우저의 뷰포트 높이를 가져온다고 생각해도 된다. window.scrollY 문서가 수직으로 얼마나 스크롤 되었는지를 픽셀 단위로 하여 값을 반환한 것. 정밀도가 1픽셀보다 작아질 수 있으므로 반드시 정수값을 반환하지는 않는다. 출처: MDN https://developer.mozilla.org/en-US/docs/..
white-space - white-space 는 엘리먼트 내 공백을 어떻게 다뤄야 하는지 설정하는 CSS 프로퍼티이다. - CSS 작업 중, 줄바꿈이나 공백을 표현하려고 할 때, 의도대로 잘 동작하지 않는 경우에 사용해볼 수 있다. 문법 /* Keyword values */ white-space: normal; // 공백 축소 처리. 개행문자(\n)는 공백과 동일하게 처리됨. white-space: nowrap; // 공백 축소 처리. 글자수가 많아지면 태그가 박스를 깨고 나감. white-space: pre; // 공백 보존(preserve). 개행은 개행문자와 엘리먼트에서 이뤄짐. white-space: pre-wrap; // 공백 보존. 개행은 박스 넓이, 개행문자, 에 의해 이뤄짐. white-..
다양한 웹사이트에서 쓰이는 반응형 토글식 collapse navbar를 구현해보았다. 필요한 분들이 가져가서 수정할 수 있도록 최소한의 요소들만 사용해서 코드를 작성했다. 반응형 네비바를 구현할때 어려움을 느꼈던 점은 transition이었다. height: 0 ~ height :auto 에서는 transition이 동작하지 않았었다. transition이 height auto와 같은 명시적이지 않은 변화에는 동작하지 않는다는 사실을 스택오버플로우를 통해 알게되었고, 이 지식을 토대로 네비바를 완성했다. 추가해보면 좋을 것들 웹 접근성 추가 (aria-expanded, aria-hidden 등) - 화면에서만 안보일뿐 DOM에는 존재하므로, 별도로 웹 접근성을 추가해주면 좋을 것 같다. 개인 프로젝트에는..
transform transform(변형)은 html 요소를 여러 형태로 변형할 때 사용하는 속성으로, transition과 함께 사용하면 재미있는 효과를 낼 수 있다. transform에 속한 대표적으로 사용하는 속성은 scale, rotate, translate, skew, origin 등이 있다. scale hello world scale은 요소의 크기를 변환시킬 때 사용하는 속성으로, 중심점(transform-origin)을 따라 커지는 효과를 나타낸다. scale(1)에서 1은 100%를 의미하며, 1 이상 또는 이하의 값을 입력해야 변형이 일어난다. scale은 2가지 값을 인수로 받을 수 있다. (x축, y축) 하나만 입력하면 x, y축 모두 동일한 수치를 나타내게 된다. 의외로 음수값도 들..
선택자 명시도에 대한 문제다. 1. Ordering (명시도가 같을 경우) hi h1은 무슨 색일까? 정답 : green 이유 : 두 css의 명시도가 같아 제일 아래에 있는 style이 적용됨 2. 명시도가 약간 높을 경우 hi h1은 무슨 색일까? 정답 : blue 이유 : h1.blue의 명시도가 .green보다는 명시도가 더 높아서 blue가 적용됨 3. 셀렉터 선택자가 띄어쓰기가 된 경우 hi h1은 무슨 색일까? 정답 : green 이유 : h1 .blue 라는 것은 위의 html 태그에는 존재하지 않는다. 이것을 적용하려면 hi과 같은 태그가 있어야 한다. 선택자 사이에 띄어쓰기가 있는 것의 의미는 바깥의 클래스가 있고, 그 내부의 자식 엘리먼트가 blue라는 클래스를 가지고 있다는 것이다...
