CSS 21

나침반과 새스는 무엇이며 어떻게 다른가요?

나침반과 새스는 무엇이며 어떻게 다른가요? 저는 개발 속도를 높이기 위해 컴퍼스와 새스를 사용하기 시작하고 싶습니다.현재 저는 Mac에 Sass를 설치하고 입력을 위해 Scss 파일을 보고 생성된 출력을 위해 CSS 파일을 보라고 지시했습니다. 많은 기사에서, Sass는 나침반과 함께 사용되는데, 나는 왜 그것이 사실인지 궁금하고 Sass가 없이 무엇을 추가하는지 궁금하다.예를 들면 좋을수록 좋습니다.윈 네덜랜드, 네이선 바이젠바움, 크리스 엡스타인, 브랜든 매티스의 Sass and Compass in Action: 1.3 나침반이란? 나침반은 Sass 작가들이 더 스마트한 스타일시트를 작성할 수 있도록 도와주며 디자이너와 개발자 커뮤니티가 강력한 프레임워크를 만들고 공유할 수 있도록 지원합니다.간단히 ..

programing 2023.09.02

CSS 배경 이미지를 어둡게 합니까?

CSS 배경 이미지를 어둡게 합니까? 이 질문에는 이미 다음과 같은 답이 있습니다. CSS를 사용하여 배경을 어둡게 하는 방법은 무엇입니까? (11개 답변) 마감됨7년 전에. 커뮤니티는 1년 전에 이 질문을 다시 시작할지 여부를 검토한 후 이 질문을 닫았습니다. 원래 종료 이유가 해결되지 않았습니다. 꽤 간단한 질문이어야 합니다.웹 사이트에서 다음 작업을 수행합니다. #landing-wrapper { display:table; width:100%; background:url('landingpagepic.jpg'); background-position:center top; height:350px; } 제가 하고 싶은 것은 배경 이미지를 어둡게 하는 것입니다.저는 이 DIV 안에 UI 요소가 있기 때문에 다..

programing 2023.08.23

요소를 이동하지 않고 호버에 CSS 테두리 추가

요소를 이동하지 않고 호버에 CSS 테두리 추가 이 질문에는 이미 다음과 같은 답이 있습니다. CSS 호버 테두리는 요소를 약간 조정합니다. (14개 답변) 마감됨3년 전에. 커서 위에 배경 강조 표시를 적용하는 행이 있습니다. .jobs .item:hover { background: #e1e1e1; border-top: 1px solid #d0d0d0; } 그러나 테두리가 요소에 1px 추가됨에 따라 요소가 '이동'됩니다.배경 이미지를 사용하지 않고 여기서 위의 움직임을 어떻게 보정해야 합니까?테두리를 투명하게 만들 수 있습니다.이런 식으로 존재하지만 보이지 않기 때문에 아무것도 밀어내지 않습니다. .jobs .item { background: #eee; border: 1px solid transpar..

programing 2023.08.23

IE 11을 위한 CSS 해킹을 작성하는 방법은 무엇입니까?

IE 11을 위한 CSS 해킹을 작성하는 방법은 무엇입니까? 이 질문에는 이미 다음과 같은 답이 있습니다. CSS Capability/Feature Detection을 사용한 IE 버전 탐지 (18개 답변) 마감됨8년 전에. IE 11에 대해서만 어떻게 CSS를 해킹하거나 쓸 수 있습니까?저는 IE 11에서 나쁘게 보이는 웹사이트를 가지고 있습니다.저는 여기저기 검색만 하고 있는데 아직 해결책을 찾지 못했습니다. CSS 선택기가 있습니까?IE11을 필터링하려면 Microsoft 관련 CSS 규칙 조합을 사용합니다. Hi There!!! 이와 같은 필터는 다음과 같은 이유로 인해 작동합니다. 사용자 에이전트가 실렉터를 구문 분석할 수 없는 경우(즉, 유효한 CSS 2.1이 아닌 경우) 실렉터와 다음 선언 ..

programing 2023.08.23

CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까?

CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까? 다음 이미지와 같이 숫자를 원으로 둘러싸려고 합니다. 이것이 가능하며 어떻게 달성됩니까?다음은 JSFiddle에 대한 데모와 스니펫입니다. .numberCircle { border-radius: 50%; width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } 30 제 대답은 좋은 출발점입니다. 다른 대답 중 일부는 다양한 상황에 유연성을 제공합니다.IE8이 마음에 든다면, 제 대답의 이전 버전을 보세요.여기에 나와 있는 대부분의 다른 답변..

programing 2023.08.23

CSS를 사용하여 오른쪽에서 배경 이미지 오프셋

CSS를 사용하여 오른쪽에서 배경 이미지 오프셋 배경 이미지를 해당 요소의 오른쪽에서 특정 픽셀 수만큼 배치하는 방법이 있습니까? 예를 들어 왼쪽에서 특정 픽셀 수(예: 10)를 배치하려면 다음과 같이 합니다. #myElement { background-position: 10px 0; } 저는 이 CSS3 기능이 도움이 된다는 것을 알았습니다. /* to position the element 10px from the right */ background-position: right 10px top; 제가 알기로는 이것은 IE8에서 지원되지 않습니다.최신 크롬/파이어폭스에서는 잘 작동합니다. 지원되는 브라우저에 대한 자세한 내용은 사용할 수 있습니까를 참조하십시오. 사용된 출처: http://tanalin...

programing 2023.08.23

: a 의심중요소: a 의심중요소: a 의심중요소요소

: a 의심중요소요소 을 잡기 는 CSS 할 수 .left: 50%;그러나 전체 창을 기준으로 요소의 중심을 맞춥니다. 나는 아이의 아이인 요소를 가지고 있습니다. 저는 이 부모님에 .창문 전체가 아닙니다. 나는 그 컨테이너를 원하지 않습니다.모든 내용을 중심에 두고 특정한 한 명의 아이만 있도록 하는 것. 트text-align:center;div에게, 부모디에게브그고리, 고,리▁to.margin:auto;아이 디브에게. #parent { text-align:center; background-color:blue; height:400px; width:600px; } .block { height:100px; width:200px; text-align:left; } .center { margin:auto; b..

programing 2023.08.13

부트스트랩 버튼을 클릭하면 파란색 윤곽선이 표시됨

부트스트랩 버튼을 클릭하면 파란색 윤곽선이 표시됨 이것을 추가했는데 버튼을 클릭하면 파란색 윤곽이 나타납니다. .btn:focus { outline: none; } 어떻게 그 못생긴 것을 제거합니까?속성이 재정의될 수 있습니다.를 . !importantactive와 합니다. .btn:focus,.btn:active { outline: none !important; box-shadow: none; } 또한 상자 그림자를 추가합니다. 그렇지 않으면 주위에 그림자 단추가 표시됩니다. 비록 이것이 사용하기에 좋은 관행은 아니지만!important 저는 당신이 좀 더 구체적인 클래스를 사용하고 나서 !important...를 사용하여 css를 적용하는 것을 제안합니다.되어 있습니다.shadow-none사용 불가능..

programing 2023.08.13

vertical-align: 중간이 스팬 또는 디비에서 작동하지 않는 이유는 무엇입니까?

vertical-align: 중간이 스팬 또는 디비에서 작동하지 않는 이유는 무엇입니까? 저는 수직으로 중심을 잡으려고 노력하고 있습니다.span또는div 다사람안요소 div원소의근데 제가 봤을 때는.vertical-align: middle아무 일도 일어나지 않습니다.나는 그것을 바꾸려고 시도했습니다.display두 가지 요소의 특성이 모두 있지만 아무 것도 작동하지 않는 것 같습니다. 현재 웹 페이지에서 수행 중인 작업은 다음과 같습니다. .main { height: 72px; vertical-align: middle; border: 1px solid black; padding: 2px; } .inner { vertical-align: middle; border: 1px solid red; } .sec..

programing 2023.08.08

CSS에서 모든 하위 요소를 재귀적으로 선택

CSS에서 모든 하위 요소를 재귀적으로 선택 모든 하위 요소를 재귀적으로 선택하는 방법은 무엇입니까? div.dropdown, div.dropdown > * { color: red; } 이 클래스는 정의된 className 및 모든 직접 자식에 대한 클래스만 슬로우합니다.간단한 방법으로 모든 childNode를 다음과 같이 선택할 수 있습니다. div.dropdown, div.dropdown > *, div.dropdown > * > *, div.dropdown > * > * > *, div.dropdown > * > * > * > * { color: red; } 공백을 사용하여 요소의 모든 하위 항목을 일치시킵니다. div.dropdown * { color: red; } x yX 내부의 모든 요소(자녀..

programing 2023.07.29