(수근수근)

Sticky Positioning position : sticky는 스크롤 할 때 요소가 상태적인 위치에서 고정위치로 전환되는 속성입니다. position : sticky 뿐만 아니라 top, right, left, bottom등 하나 이상을 선택해야 수행이 된다. Sticky position에는 몇가지 특이한 세부사항이 있는데 이를 살펴보자! Stays in their box position : sticky가 자주 간과되는 것은 상위 컨테이너에서 외부 스크롤을 따르지 않는다는 것이다. 고정요소는 상위 컨테이너가 보이는 동안에만 고정이 됩니다. 아래를 보면 스크롤을 내리면 상위 컨테이너에서 벗어나는 것을 확인 할 수 있습니다! 만약 스크롤을 내릴 때 어떤 컨텐츠와의 인접성을 유지되게 하고 싶으면 이를 활..

Fixed Positioning fixed positioning은 absolute와 비슷한 역할을 한다. 차이점은 훨씬 반항적이여서 뷰포트에서만 억제가 가능하다. (viewport는 현재 눈에 보이는 웹사이트의 일부) 가장 많이 쓰이는 이유는 스크롤에 영향을 받지 않기 때문에 고정시킬때 많이 쓰인다. 위의 해당 버튼은 스크롤할 때도 움직이지 않고 고정되어있습니다. Instead of the closest non-static ancestor, it listens to the “initial containing block”, a box the size and position of the viewport absolute 로 modal을 만든 것 처럼, fixed 로도 모달같은 오버레이 효과를 줄 수 있습니다...

해당 글은 css josh강의를 요약 정리한 것 입니다. Stack Context 브라우저 요소가 겹칠 떄 맨위에 렌더링 될 요소를 결정하는 방법은? => 레이아웃 모드에 따라 다르다! => FLOW 레이아웃 모드에서는 Nagative margin으로 강제할 수 있다. 아래 예시를 보면 Margin top의 음수를 줌으로써 겹쳐지는 것을 확인 할 수 있다. 하지만 이는 DOM순서에 따라 변경이 되는 확인 할 수 있다. 만약 회색상자에 텍스트를 추가하면 어떻게 될까요? 글자는 핑크 박스 뒤에 갈까요? 아니면 앞으로 떠있는 형태로 될까요? 확인해보면 텍스트는 맨위에 떠있는 것을 확인할 수 있습니다. 그 이유는 ? Flow layout 자체는 레이어링을 염두해두고 만들지 않았습니다! 따라서 이를 해결하기 위..

해당 글은 css josh강의를 요약 정리한 것 입니다. css의 목표는 앱 콘텐츠의 레이아웃과 모양을 컨트롤 하는 것 입니다. HTML태그에는 최소한의 몇가지 스타일이 실제로는 들어있는 것입니니다. 예를 들어 chrome에서 태그에 제공하고 있는 기본스타일을 확인해봅시다. a { color: -webkit-link; cursor: pointer; text-decoration: underline; } 실제로 브라우저는 이러한 기본 스타일로 가득찬 스타일 시트를 가지고 있습니다. HTML사양의 몇가지 엄격한 규칙이 있지만 대부분은 브라우저의 고유의 스타일을 제공하고 있습니다. 이 것이 같은 태그여도 브라우저마다 다르게 보이는 이유입니다. 보통 개발자들은 CSS reset 파일을 통해서 브라우저간의 일관성..

[ Color ] color formats css는 색상을 표현하는 다양한 방법이 있습니다. 대부분은 16진수코드(#FFFFFF)로 사용하지만 이말고도 더 나은 옵션들이 있습니다. 만약 red컬러를 표현하고 싶다면, 아래의 네가지 표현법이 있습니다. Hex codes -#FF0000 => 가장 흔하게 사용한다. 2개씩 쪼개서 16진법으로 표현된다 Keyword - red => 문제점이 많다. (사람마다 다름) RGB - rgb(255,0,0) => hex codes랑 호환이 가능하다 HSL - hsl(0deg, 100%, 50%) HSL을 쉽게 이해하기 위해서는 아래의 그림을 보면 이해하기 쉬운데, 방향(360도)을 동해 색을 나타내고 2번째 요소에 얼마나 색을 포화시킬지 3번째는 얼마나 밝게 표현할지 ..

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) Selectors Selector / Pseudo-classes :hover 우리가 마우스를 버튼 위로 올렸을 때, JS로 처리한다면 어떻게 하나요? JS의 onMouseEnter / onMouseLeave의 내장함수를 사용하여 상태를 관리해야할 것입니다, 하지만 CSS를 사용한다면? Hover over me! 위 코드 처럼 : hover pseudo class를 사용하여 간단하게 구현할 수 있습니다. focus : 클릭하거나 탭했을 경우 포커스가 설정됩니다. 해당 스타일은 중요한데. 그 이유는 해당 스타일은 마우스, 터치스크린을 사용하지않는 접근성문제를 다루는데 있어서 중요하기 때문이다. 음성을 ..