반응형

CSS 15

타겟팅 위치: 현재 '고임' 상태인 끈적거리는 요소

타겟팅 위치: 현재 '고임' 상태인 끈적거리는 요소 position: sticky는 현재 일부 모바일 브라우저에서 작동하므로 페이지로 메뉴 바를 스크롤할 수 있지만 사용자가 스크롤할 때마다 뷰포트 상단에 붙어 있습니다. 하지만 만약 여러분이 끈적거리는 메뉴바가 현재 '붙을' 때마다 약간의 스타일을 바꾸고 싶다면 어떻게 해야 할까요?예를 들어, 페이지를 스크롤할 때마다 막대에 둥근 모서리가 있기를 원할 수도 있지만, 뷰포트 상단에 붙자마자 맨 위의 둥근 모서리를 없애고 그 아래에 약간의 그림자를 추가합니다. 어떤 종류의 의사 선택기가 있습니까?::stuck를 포함하는 요소를 대상으로 합니다.position: sticky 그리고 현재 고착되어 있습니까?아니면 브라우저 공급업체가 이와 같은 것을 파이프라인에 ..

programing 2023.10.27

디브의 스크롤 바를 필요할 때만 볼 수 있도록 하려면 어떻게 해야 합니까?

디브의 스크롤 바를 필요할 때만 볼 수 있도록 하려면 어떻게 해야 합니까? 난 이 디브가 있어요 here is some text 텍스트가 오버플로되지 않더라도 스크롤 막대는 항상 표시됩니다.스크롤 막대는 필요할 때만 볼 수 있도록 하고, 즉 상자에 필요한 텍스트가 충분할 때만 볼 수 있도록 하고 싶습니다.텍스트 영역이 그런 것처럼.이거 어떻게 해요?아니면 디브처럼 보이도록 텍스트 영역을 스타일화할 수 있는 유일한 옵션입니까?사용하다overflow: auto. 스크롤 막대는 필요한 경우에만 나타납니다. (참고로 x, y 스크롤 막대에 대해서만 지정할 수도 있습니다.overflow-x: auto그리고.overflow-y: auto).시도해 보십시오. here is some text CSS의 오버플로 속성 변..

programing 2023.10.17

글리폰을 크게 하려면 어떻게 해야 할까요?(크기 변경?)

글리폰을 크게 하려면 어떻게 해야 할까요?(크기 변경?) Globe glyphicon을 페이지의 많은 부분을 덮도록 더 크게 하고 싶습니다(벡터 이미지입니다).그것은 버튼 같은 것이 아니라 그냥 혼자입니다.이것을 할 방법이 방법이 있습니까? 글꼴 크기 늘리기glyphicon모든 아이콘 크기를 늘립니다. .glyphicon { font-size: 50px; } 하나의 아이콘만을 대상으로 하려면, .glyphicon.glyphicon-globe { font-size: 75px; } 폰타썸은 이에 대한 완벽한 해결책을 가지고 있습니다. 저도 똑같이 실행했습니다.당신의 메인에. css 파일에 이것을 추가합니다. .gi-2x{font-size: 2em;} .gi-3x{font-size: 3em;} .gi-4x{f..

programing 2023.10.12

이미지 너비를 부모 디브의 100%로 만들되 자신의 너비보다 크지 않게 만듭니다.

이미지 너비를 부모 디브의 100%로 만들되 자신의 너비보다 크지 않게 만듭니다. 저는 이미지(차원에 제한이 없는 동적으로 배치된 이미지)를 모체 디브처럼 넓히려고 노력하고 있지만, 그 너비가 100%에서 자신의 너비보다 넓지 않은 한에서만 가능합니다.나는 이것을 시도해 보았지만 소용이 없었습니다. img { width: 100%; height: auto; max-width: 100%; } 이러한 이미지의 대부분은 부모 디브보다 훨씬 더 넓기 때문에 크기를 조정하고 싶지만, 작은 이미지가 튀어나와 정상 크기 이상으로 커지면 정말 끔찍해 보입니다.이것을 할 수 있는 방법이 있습니까?지정만 하면 됩니다.max-width: 100%혼자라면 충분할 겁니다구글 검색에서 이 게시물을 찾았고, @jwal 응답 덕분에..

programing 2023.09.27

절대 위치 요소를 수평으로 100% 폭 디브 안에 중심을 맞추려면 어떻게 해야 합니까?

절대 위치 요소를 수평으로 100% 폭 디브 안에 중심을 맞추려면 어떻게 해야 합니까? 이 질문에는 이미 다음과 같은 답변이 있습니다. 디브에서 절대적으로 위치한 요소의 중심을 어떻게 맞출 수 있습니까? (37개 답변) 닫힘8년 전에. 아래 예에서,#logo절대적으로 위치하고 수평으로 중심을 잡아야 합니다.#header. 보통은 제가.margin:0 auto상대적으로 위치한 요소들에 대해 나는 여기에 갇혀있습니다.누가 길을 가르쳐 줄 수 있습니까? JS Fiddle: http://jsfiddle.net/DeTJH/ HTML CSS #header { background:black; height:50px; width:100%; } #logo { background:red; height:50px; positi..

programing 2023.09.12

CSS와 SCSS의 차이점은 무엇입니까?

CSS와 SCSS의 차이점은 무엇입니까? 저는 CSS를 잘 알고 있지만 Sass에 대해서는 혼란스럽습니다.SCSS와 CSS는 어떻게 다르며, CSS 대신 SCSS를 사용하면 동일하게 작동합니까?Idriss 답변 외에도: CSS CSS에서는 아래 그림과 같이 전체 길이로 코드를 작성합니다. body{ width: 800px; color: #ffffff; } body content{ width:750px; background:#ffffff; } SCSS 는 를 를 a 하여 할 에서 하여 할 는 를 를 에서@mixin그래서 우리는 글을 쓸 필요가 없습니다.color그리고.width속성을 몇 번이고 반복합니다.이것은 PHP나 다른 언어와 마찬가지로 함수를 통해 정의할 수 있습니다. $color: #ffffff;..

programing 2023.09.07

Chrome Developer Tools: CSS 규칙을 우선하는 것이 무엇인지 확인하는 방법은?

Chrome Developer Tools: CSS 규칙을 우선하는 것이 무엇인지 확인하는 방법은? 음, 이건 꽤 간단합니다.Chrome의 Developer Tools가 스타일이 재정의되었다는 것을 보여주는 경우, 어떤 CSS 규칙이 스타일을 재정의하는지 어떻게 볼 수 있습니까? "무엇이 이것을 재정의하는지 보여주세요"와 같은 것이 있는지 알고 싶습니다. OBS: 파이어버그를 지목하지 말아주세요.요소 검사기의 Computed Style 패널을 사용합니다.관심 있는 속성을 확장하면 해당 규칙 목록과 어느 규칙이 승리했는지 확인할 수 있습니다. 같은 이름을 가진 사람 중에서 눈에 띄지 않는 것만 봐도 됩니다. 목록은 중요성에 따라 작성된 것임을 기억하세요. 또는 계산된 스타일을 볼 수도 있습니다.실제 적용된 ..

programing 2023.09.07

이러한 인라인 블록 디비 요소 사이에 설명할 수 없는 차이가 있는 이유는 무엇입니까?

이러한 인라인 블록 디비 요소 사이에 설명할 수 없는 차이가 있는 이유는 무엇입니까? 이 질문에는 이미 다음과 같은 답이 있습니다. 인라인/인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? (41개 답변) 마감됨3년 전에. 두 개의 인라인 블록이 있습니다.div동일한 요소가 서로 옆에 배치됩니다.하지만 마진이 0으로 설정되었음에도 불구하고 두 div 사이에는 4픽셀의 신비한 공간이 있는 것 같습니다.그들에게 영향을 주는 부모 디브가 없습니다. 무슨 일입니까? CSS #container { display:inline-block; position:relative; background:rgb(255,100,0); margin:0px; width:40%; height:100px; } 제가 원하는 모습..

programing 2023.09.02

스타일시트 내에서 IE(모든 버전)만을 대상으로 하는 방법은 무엇입니까?

스타일시트 내에서 IE(모든 버전)만을 대상으로 하는 방법은 무엇입니까? 이 질문에는 이미 다음과 같은 답이 있습니다. CSS Capability/Feature Detection을 사용한 IE 버전 탐지 (18개 답변) 마감됨11개월 전에. 이 게시물은 10개월 전에 편집되어 검토를 위해 제출되었으며 게시물을 다시 열지 못했습니다. 원래 종료 이유가 해결되지 않았습니다. 저는 물려받은 프로젝트가 있는데 완전히 엉망인 곳이 있습니다.이것이 그들 중 하나입니다.HTML에 대한 변경 없이 자바스크립트나 CSS를 제외한 다른 기술 없이 IE(어떤 버전이든)만을 대상으로 하면 됩니다. » #nav li { float: left; height: 54px; background: #4f5151; display: tab..

programing 2023.08.23

'a:before'와 'a:after'에 대해 ':hover' 조건을 어떻게 쓸 수 있습니까?

'a:before'와 'a:after'에 대해 ':hover' 조건을 어떻게 쓸 수 있습니까? 어떻게 써야 합니까?:hover그리고.:visited을 위한 조건.a:before? 난 노력하고 있어.a:before:hover하지만 작동하지 않습니다.이것은 여러분이 실제로 무엇을 하려고 하는지에 달려 있습니다. 단순히 스타일을 적용하려는 경우:before의사-의사-의사-의사는a요소가 유사 클래스와 일치하므로 작성해야 합니다.a:hover:before또는a:visited:before대신.유사 요소는 유사 클래스 뒤에 옵니다(실제로 전체 선택기의 맨 끝에 있습니다).또한 이 두 가지는 서로 다른 것입니다. 두 가지를 모두 "의사 선택기"라고 부르는 것은 이와 같은 구문 문제에 부딪히면 혼동을 일으킬 수 있습니다..

programing 2023.08.13
반응형