방구석 개발자의 놀이터

1. MDN Web Docs - scrollIntoView 한국어 문서 수정에 기여하게 된 계기 한국어 문서 수정에 기여하게 된 계기의 시작은 scroll-behvaior의 instant 옵션 history와 관계가 있다. 따라서, scrollIntoView의 scroll-behavior의 instant 옵션이 언제 어떻게 사라졌다가 언제 어떻게 다시 사용이 되었는지 history를 모두 정리해 보았다. 1-1. typescript의 scrollIntoView 옵션과 MDN Web Docs의 옵션의 차이점 발견 처음에는 typescript에서 scrollIntoView를 사용하려는데 behavior옵션이 MDN Web Docs의 영어 문서 내용과 다른 점을 발견하였다. MDN Web Docs - scro..

1. 배경 설명 위와 같이 사이드바가 있다고 가정해보자. 사이드바 전체 영역에 overflow-y:auto 가 걸려있고 그 안에 메뉴 영역에 마우스를 올렸을 때 툴팁이 띄워지는 구조를 만들 때 아래와 같은 스타일 문제(?)를 마주칠 수 있다. 사이드바 전체 영역의 overflow-y:auto로 인해 툴팁이 가려지게된다. 이 때 overflow-y:auto 와 overflow-x:visible을 같이 쓰려고 하지만 W3C 공식 문서에 보면 둘은 같이 적용할 수 없게된다. 한쪽이 auto or scroll일 경우 나머지 한쪽이 visible을 하면 visible -> auto 로 취급된다. 2. 해결 방안 기존의 사이드바 영역을 초록색 div로 한번 더 감싼다. (즉, 사이드에 parent div를 추가) ..

1. 상속이란 ? - 조상 요소로부터 하위요소로 CSS의 요소가 상속이 될 수 있다. .ecosystem{ color:red; } 생태계 동물 호랑이 사자 코끼리 식물 .ecosystem에 적용된 색상이 하위 요소들에게도 적용됨 2. 상속되는 속성 font color text-align text-indent text-decoration letter-spacing opacity 등 3. 강제 속성 - 상속되지 않는 속성도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속 시킬 수 있다. '자식'을 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아님 .parent{ position: absolute; /* 상속되지 않는 속성과 값*/ } .chil..