반응형

css 22

CSS에서 @media screen 및 (max-width: 1024px)는 무엇을 의미합니까?

CSS에서 @media screen 및 (max-width: 1024px)는 무엇을 의미합니까? 물려받은 CSS 파일에서 이 코드 조각을 찾았지만 이해가 되지 않습니다. @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } 구체적으로 첫 번째 라인에서 무슨 일이 일어나고 있습니까?그건 언론의 질문입니다.브라우저에 포함된 테스트를 통과하지 않는 한 내부의 CSS가 실행되지 않도록 합니다. 이 미디어 쿼리의 테스트는 다음과 같습니다. @media screen— 브라우저는 자신이 "화면" 카테고리에 있는 것으로 식별합니다.이는 브라우저가 데스크톱 클래스로 간주된다는 것을 의미합니다. 예를 들어, 구형 휴대폰 브라우..

programing 2023.10.30

커서 잡기(드래그 & 드롭)를 위한 CSS

커서 잡기(드래그 & 드롭)를 위한 CSS 사용자가 배경을 잡고 전체 화면을 이동해야 하는 자바스크립트 웹앱이 있습니다.그래서 저는 커서가 배경 위를 맴돌 때 바뀌었으면 좋겠어요. 그.-moz-grab그리고.-moz-grabbingCSS 커서가 이에 적합합니다.물론 파이어폭스에서만 작동합니다.다른 브라우저에 해당하는 커서가 있습니까?표준 CSS 커서보다 조금 더 맞춤형으로 해야 합니까?다른 사람이 이 질문을 우연히 발견했을 경우, 아마도 다음과 같은 내용을 찾았을 것입니다. .grabbable { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } /..

programing 2023.10.20

pt로 할까요, px로 할까요?

pt로 할까요, px로 할까요? 사이의 차이점은 무엇입니까?pt그리고.pxCSS 에서? 어떤 그 이유는 무엇입니까?어떤 것을 사용해야 하고 그 이유는 무엇입니까?px≠ 픽셀 이 모든 대답이 틀린 것 같습니다.직관과 반대로 CSS에서는px 픽셀이 아닙니다.적어도 단순한 육체적인 의미는 아닙니다. W3C, EM, PX, PT, CM, IN…에서 본 기사를 읽어 보십시오.px는 CSS를 위해 발명된 "마성" 유닛입니다.의 의미는px하드웨어와 해상도에 따라 달라집니다.(해당 기사는 새로 작성된 것으로, 마지막으로 업데이트된 2014-10).) 1px는 디자이너가 의도한 얇은 선이 거의 보이지 않는 크기입니다. 이 기사를 인용하자면: px 단위는 CSS의 마법 단위입니다.현재 글꼴과 관련이 없으며 절대 단위와도 ..

programing 2023.10.20

아이들이 한창일 때까지

아이들이 한창일 때까지 나는 이와 비슷한 페이지 구조를 가지고 있습니다. /*Content*/ /*Content*/ 의 를 원합니다.div확장하다, 확장하다, 확장하다, 확장하다, 확장하다,heightn일 때div의height증가한다. : width됩니다를 의.width재 CSS다에 바를 .div 스크롤 바가 페이지 레벨로 되어 있으면 좋겠습니다.현재 부모님 디바는 다음과 같이 설정되어 있습니다.overflow: auto; 이것에 대한 CSS를 도와주실 수 있나요?부모님께 한 번 해보세요, 저한테는 효과가 있었어요. overflow:auto; 업데이트: 또 하나의 효과적인 솔루션: 부모: display: table; 자식: display: table-row; 를 .max-content부모의 키에 맞추어 ..

programing 2023.10.15

삼각형 주변에 테두리가 표시되지 않습니까?

삼각형 주변에 테두리가 표시되지 않습니까? Chrome/Firefox가 경계를 세우지 않는 것 같습니다.tr, 하지만 선택자가 다음과 같은 경우에는 테두리를 렌더링합니다.table tr td. tr에 테두리를 설정하려면 어떻게 해야 합니까? 나의 시도는 효과가 없어요 table tr { border: 1px solid black; } Text http://jsfiddle.net/edi9999/VzPN2/ 이와 유사한 질문이 있습니다.테두리를 table tr로 설정하고 IE 6 & 7을 제외한 모든 것에서 작동하지만 IE를 제외한 모든 곳에서 작동하는 것 같습니다.스타일시트에 추가: table { border-collapse: collapse; } JS Fiddle. 이 방법으로 동작하는 이유는 실제로 사..

programing 2023.10.15

부트스트랩 열에 콘텐츠를 중심에 맞추는 방법은?

부트스트랩 열에 콘텐츠를 중심에 맞추는 방법은? 칼럼의 중심을 잡으려고 합니다.저한테는 안 맞는 것 같네요.다음은 나의 HTML입니다. aaaaaaaaaaaaaaaaaaaaaaaaaaa JS Fiddle 데모용도: 대신에 부트스트랩 3 cs를 사용할 수도 있습니다. 부트스트랩 4에는 이제 콘텐츠의 중심을 잡아줄 플렉스 클래스가 있습니다. some content 기본적으로 다음과 같습니다.x-axis~하지 않는 한flex-direction가column[2022년 4월 업데이트]:테스트를 거쳐 포함됨5.1부트스트랩 버전입니다. 이 질문은 오래된 것으로 알고 있습니다.그리고 그 질문은 그가 어떤 버전의 부트스트랩을 사용하고 있는지에 대해서는 언급하지 않았습니다.그래서 저는 이 질문에 대한 답이 해결되었다고 가..

programing 2023.09.25

CSS를 사용하여 글꼴 .ttf를 포함하는 방법?

CSS를 사용하여 글꼴 .ttf를 포함하는 방법? 내 페이지에 글로벌 글꼴을 포함하고 싶습니다..ttf 파일을 다운받아서 CSS에 넣었는데 폰트가 바뀌지 않습니다. 제 암호는 이렇습니다. @font-face { font-family: 'oswald'; src: url('/font/oswald.regular.ttf'); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,..

programing 2023.09.10

를 공략할 수 ?를 공략할 수 ?를 공략할 수 ?CSS로?CSS로?CSS로?

를 공략할 수 ? CSS로? 이 로 을 이 을 로 CSS로 태그? 저는 줄이 끊어질 때마다 1px 대시 선을 가지고 싶습니다.저는 제 자신의 CSS로 사이트를 커스터마이징하고 있으며 설정된 HTML을 변경할 수 없습니다. 그렇지 않으면 다른 방법을 사용할 것입니다. 저는 불가능하다고 생각하지만 아마도 누군가가 알 수 있는 방법이 있을 것입니다.기술적으로는, 네, 당신이 목표로 삼을 수 있는 것은 직접 또는 클래스를 적용하고 클래스를 대상으로 CSS가 있는 요소.,, a. 줄 바꿈을 생성하고 줄 바꿈일 뿐입니다.이 요소는 내용물이 없기 때문에, 그 위에 적용하는 것이 타당한 스타일은 거의 없습니다, 예를 들어 또는position. 설정 가능합니다. 테두리는 있지만 시각적인 차원이 없기 때문에 볼 수 없을 ..

programing 2023.09.10

내용이 그리드 항목을 확장하지 못하도록 방지

내용이 그리드 항목을 확장하지 못하도록 방지 TL;DR: 다음과 같은 것이 있습니까?table-layout: fixedCSS 그리드를 위해? 저는 몇 달 동안 큰 4x3 그리드를 사용하고 그 안에 7x6 그리드를 중첩한 연도별 달력을 만들려고 했습니다. 달력은 페이지를 채워야 하며, 연도 그리드 컨테이너는 너비와 높이가 각각 100%가 됩니다. .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } 다음은 https://codepen...

programing 2023.09.05

CSS3 선택기: 클래스 이름을 가진 첫 번째 유형?

CSS3 선택기: 클래스 이름을 가진 첫 번째 유형? CSS3 선택기를 사용할 수 있습니까?:first-of-type지정된 클래스 이름을 가진 첫 번째 요소를 선택하시겠습니까?제가 시험이 잘 안 나와서 안 맞는 것 같아요? 코드(http://jsfiddle.net/YWY4L/) : p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} This text should appear as normal This text should be blue. This text should appear red. This text should appear green. 아니요, 하나의 선택기로는 불..

programing 2023.09.05
반응형