(수근수근)

🌞 HTTP이 발전 이해하기 🌞 HTTP/0.9 GET메소드만 존재 HTML만 읽을 수 있고 클라이언트 정보 X 하지만 WWW의 근간이 되어 더욱이 발전할 수 있었음 HTTP/1.0 헤더를 통해 클라이언트와 서버 정보 전달이 가능해졌다. 또한, content-type헤더를 통해서 HTML뿐만 아니라, 이미지 동영상같은 다양한 정보를 주고 받을 수 있게 되었다. POST가 추가되어 클라이언트의 정보를 웹으로 전달할 수 있게 되었다. content-Encoding을 통해서 클라이언트와 서버간의 압축정보를 공유가 가능해졌다. HTTP/1.1 HTTP의 첫 번쨰 공식 표준버전이다 GET, POST, PUT, DELETE의 함수를 모두 지원 하나의 TCP 연결을 지속적 연결을 추가함으로 재사용해 많은 콘텐츠 전달..

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 파일을 통해서 브라우저간의 일관성..