codeshow

-webkit-transform을 사용하면 위치가 고정되지 않습니다. div를 회전시키기 위해 -webkit-transform (및 -moz-transform / -o-transform)을 사용하고 있습니다.또한 사용자와 함께 div를 아래로 스크롤할 수 있도록 위치를 고정하였습니다. 파이어폭스에서는 잘 작동하지만 웹킷 기반 브라우저에서는 고장이 납니다.-webkit-transform을 사용하면 고정된 위치가 더 이상 작동하지 않습니다!어떻게 그것이 가능한가요?CSS Transforms 사양은 이 동작을 설명합니다.변환이 있는 요소는 고정된 위치 하위 요소를 포함하는 블록으로 작동하므로 위치: 변환이 있는 항목 아래에 고정된 요소는 더 이상 고정된 동작을 갖지 않습니다. 이들은 동일한 요소에 적용되면 작..

다중 라인 플렉스박스 레이아웃에서 줄 바꿈을 지정하는 방법은? 멀티 라인 플렉스박스에서 라인을 끊는 방법이 있습니까? 예를 들어 이 코드펜의 각 3번째 항목 뒤에 깨지는 것입니다. .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-c..

어떻게 하면 디브를 비례감 있게 이미지로 채울 수 있을까요? 이 스레드를 찾았습니다. 이미지의 가로 세로 비율을 유지하면서 를 채우기 위해 이미지를 어떻게 펼치나요?— 그것이 내가 원하는 전부는 아닙니다. 는 을 가지고 .div어느 정도 크기에 그 안에 이미지가 들어가 있는.항상 작성하고 싶습니다.div는 이미지가 가로 또는 세로인지에 관계없이 이미지와 함께 표시됩니다.그리고 이미지가 잘려져 있어도 상관이 없습니다(디브 자체가 오버플로를 숨겼습니다). 그래서 만약 그 이미지가 초상화라면 나는 그것을 원합니다.width되려고100%e.height:auto그래서 비율을 유지합니다.만약 이미지가 풍경이라면 나는 그것을 원합니다.height되려고100%e.width to be auto'. 복잡하죠? 제가 어떻게..

CSS: 애니메이션 vs.전이 그래서 저는 CSS3 전환과 애니메이션을 모두 수행하는 방법을 이해합니다.제가 구글 검색을 통해 명확하지 않은 것은 어떤 것을 사용해야 하는지입니다. 예를 들어, 제가 공을 튀기고 싶다면 애니메이션이 가야 할 길임이 분명합니다.저는 키 프레임을 제공할 수 있었고 브라우저는 중간 프레임을 수행할 수 있었고 저는 멋진 애니메이션을 진행할 것입니다. 그러나 어떤 방법으로든 해당 효과를 얻을 수 있는 경우가 있습니다.간단하고 일반적인 예로는 Facebook 스타일의 슬라이딩 드로어 메뉴를 구현할 수 있습니다. 이러한 효과는 다음과 같은 전환을 통해 얻을 수 있습니다. .sf-page { -webkit-transition: -webkit-transform .2s ease-out; }..

WebKit/Blink에서 MacOS 트랙패드 사용자의 스크롤 막대 숨기기 방지 10.7(Mac OS X Lion) 이후 MacOS에서 WebKit/Blink(Safari/Chrome)의 기본 동작은 트랙패드 사용자가 사용하지 않을 때 스크롤 막대를 숨기는 것입니다.스크롤 막대는 종종 요소를 스크롤할 수 있는 유일한 시각적 신호입니다. 예제(jfidle) HTML Foo Bar Baz Help I'm trapped in an HTML factory! CSS .frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; }​ WebKit (Chrome) Screenshot Presto (Opera)..

선택한 라디오 버튼의 레이블에 대한 CSS 선택기 체크된 라디오 버튼의 라벨에 css(3) 스타일을 적용할 수 있습니까? 다음과 같은 마크업이 있습니다. A Label 제가 바라던 것은 label:checked { font-weight: bold; } 뭔가를 할 수 있지만 (내가 예상했던 대로) 그렇지 않습니다. 이러한 기능을 달성할 수 있는 셀렉터가 있습니까?도움이 된다면 div 등으로 둘러쌀 수 있지만, 가장 좋은 해결책은 "for" 속성이라는 레이블을 사용하는 것입니다. 제 애플리케이션에 브라우저를 지정할 수 있으니 css3 클래스 최고의 것들을 부탁드립니다.시험해 보다+기호:인접 형제 조합입니다.부모가 동일한 두 개의 단순 선택기 시퀀스를 결합하고 두 번째 선택기는 첫 번째 선택기 바로 뒤에 와야..

동일한 요소에 대해 여러 개의 유사 요소를 가질 수 있습니까? 여러 개를 가질 수 있습니까?:before동일한 요소에 대한 유사? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } 위의 스타일을 jQuery를 사용하여 동일한 요소에 적용하려고 하는데, 가장 최근의 스타일만 적용되고 둘 다 적용되지 않습니다.CSS 2.1에서 요소는 항상 임의의 종류의 유사 요소 중 최대 하나만 가질 수 있습니다.(이것은 요소가 둘 다 가질 수 있다는 것을 의미합니다.:before 리고그.:after유사 변수 - 각 종류를 둘 이상 포함할 수 없습니다.) 결과적으로, ..

CSS 그리드의 동일한 너비 열 나는 아래 html이 css 그리드를 사용하여 행 요소에 두 개 또는 세 개 이상의 하위 요소가 있는지 여부를 n개의 열에 표시하도록 하고 싶습니다. 플렉스박스는 이것을 쉽게 만들 수 있지만 css 그리드를 사용하여 수행할 수 없습니다. 어떤 도움이든 감사합니다. 의 일반적인 대답은repeat(3, 1fr)정확하지 않습니다. 그 이유는1fr사용 가능한(!) 공간의 분포에 관한 것입니다.이는 콘텐츠가 트랙 크기보다 커지면 바로 중단됩니다.기본적으로 오버플로되지 않고 그에 따라 열 너비를 조정합니다.그게 전부가 아닌 이유야.1fr동일한 너비가 보장됩니다.1fr사실은 그저 의 속기일 뿐입니다.minmax(auto, 1fr). 열 너비가 정말로 동일해야 하는 경우 다음을 사용해야..

CSS에서 '@' 기호의 목적은 무엇입니까? 이 질문을 우연히 발견했는데 사용자가 이전에 본 적이 없는 표기법을 사용하고 있다는 것을 알게 되었습니다. @font-face { /* CSS HERE */ } 이것도 마찬가지야@CSS3에서 뭔가 새로운 것을 상징하거나, 아니면 내가 어떻게든 간과했던 오래된 것을?당신이 사용하는 신분증이 있는 곳 같은 건가요?#그리고 당신이 사용하는 수업으로..구글은 저에게 이와 관련된 좋은 기사를 주지 않았습니다.의 목적은 무엇입니까?@CSS 기호?@의 시대부터 존재해 왔습니다.@importCSS1에서, 비록 그것이 최근에 점점 더 흔해지고 있지만.@media(CSS2, CSS3) 및@font-face(CSS3) 건설.@구문 자체는, 제가 언급했듯이, 새로운 것은 아닙니다...

CSS를 사용하여 HTML 앵커 태그를 클릭/링크할 수 없도록 만드는 것이 가능합니까? 예를 들어 다음과 같은 기능이 있습니다. page link 링크를 클릭할 수 없고 page.html로 이동하지 않도록 스타일 속성에 사용할 수 있는 것이 있습니까? 아니면 단순히 '페이지 링크'를 앵커 태그로 포장하지 않는 것이 나의 유일한 옵션입니까? 편집: 저는 사람들이 더 나은 조언을 할 수 있도록 제가 왜 이것을 하고 싶은지 말하고 싶습니다.개발자가 원하는 내비게이션 스타일을 선택할 수 있도록 앱을 설정하려고 합니다. 링크 목록이 있는데 하나는 항상 현재 선택되어 있고 다른 하나는 선택되어 있지 않습니다.선택되지 않은 링크의 경우 일반적인 클릭 가능한 앵커 태그를 사용합니다.그러나 선택한 링크의 경우, 일부 사..