(수근수근)

Vanilla CSS 장점 도구가 필요하지 않아 덜 복잡하고, 런타임 성능비용이 없음 단점 범위가 지정되지 않는 단점이 있다. 한 곳에 작성한 CSS는 모든 곳에 진행되기 때문에 BEM과 같은 명명법을 통해서 해결해 나갈 수 있으나, 이는.. 엄청난 노력이 필요함 최적의 브라우저 지원을 위해 많은 CSS에 대해서 브라우저의 접두서를 추가해야함 JS와의 공유가 어려움 Sass / Less Scss는 바닐라 CSS로 컴파일 되는 전처리기 입니다. 중첩, 변수 및 iteration의 기능으로 바닐라 CSS를 커버합니다. 작동방식은 타입스크립트와 비슷합니다. Less 도 Sass와 방식이 아주 유사한데, 차이점이라고 하면 변수에 지정을 다르게 한다 잠점 for-loop, mixin nesting 같은 강력한 도..

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번째는 얼마나 밝게 표현할지 ..