본문 바로가기

2020/079

css revert 속성 (unset과 revert의 차이) CSS 속성중에 revert 속성이란 것이 있습니다. 부모 속성으로 돌아가거나 부모가 없을 때는 최초의 상태로 돌아가는 것입니다. 2020. 7. 25.
Template 엘리먼트 사용 {company_name} var company_data = { "{company_name}" : "SOME COMPANY", }; document.querySelector("div").innerHTML = company_data["{company_name}"]; {company_name}를 화면에 렌더링하는 것 외에는 아무 것도 수행하지 않습니다. 대신 {company_name} 플레이스 홀더를 JavaScript 파일의 데이터로 대체하여 일부를 화면으로 렌더링해야합니다. 재사용 할 수 없죠. 이 시점에서 그가 바라는 바는 이런 종류의 템플릿이 자동으로 발생한다는 것입니다. HTML의 내용과 일치하는 키를 객체에 제공하면 해당 HTML의 내용이 자동으로 교체됩니다. 원시 웹 기술에서는 그렇게 작동하지 .. 2020. 7. 25.
CSS를 사용하여 반대쪽에 세로 스크롤 막대 배치 스크롤바가 어디에 있는지에 대한 강한 기대를 깨뜨리기 때문에 일반적으로 이것을 추천할 수는 없습니다. 많은 사람들에게 핵심 접근 기능이며 유용합니다. 그러나 그것은 매혹적인 CSS 트릭이며 웹은 때때로 이상한 해결책이 필요한 상황을 알 수 없는 규모의 큰 장소입니다. 테크닉1 : Directional Trickery CodePen Embed Fallback direction:rtl 이 핵심 테크닉2 : Rotational Tricker 회전으로 나타내는 것입니다. CodePen Embed Fallback 이것은 두 가지 이유로 특히 어색합니다. 스크롤 요소는 기본적으로 맨 아래로 스크롤됩니다 스크롤 방향은 스크롤 휠과 반대로 느껴집니다. 스크롤바 자체는 예상대로 작동해야하지만 트랙 패드 또는 마우스 스크.. 2020. 7. 25.
Grid Template으로 아코디언 만들기 meyerweb 재 설계의 또 다른 측면은 CSS 그리드 행을 사용하여 더 많은 레이아웃 유연성을 제공하는 방식입니다. 먼저 meyerweb에서 페이지의 기본 레이아웃을 시각화 해보겠습니다. 간단하고 flexbox로도 가능합니다! 그러나 항상 상황이 단순하게 유지되어야합니다. 이 두 사이드 바의 내용이 사이트의 한 부분에서 다른 부분으로 다를 수 있기 때문에 아마 그렇지 않을 것입니다. 경우에 따라 사이드바들이 세로로 정렬되기를 원합니다. 블로그 아카이브의 초기 디자인 프로토 타입에서는 링크를 기본 컨텐츠 열의 맨 아래로 이동하기 전에 “다음 포스트” 및 “이전 포스트” 링크를 이러한 지점 중 일부에 배치했습니다. 따라서 현재로서는 그 기능을 사용할 수 있지만 해당 지점을 사용하는 것은 없습니다. 필요에.. 2020. 7. 25.