반응형

CSS 17

CSS div 높이를 100% 마이너스 nPx로 설정하는 방법

CSS div 높이를 100% 마이너스 nPx로 설정하는 방법 이 질문에는 이미 다음과 같은 답변이 있습니다. 너비/높이를 백분율에서 픽셀을 뺀 값으로 설정 (11개 답변) 닫힘2년 전에. 저는 옆에 2개의 디브가 들어있는 포장지 디브가 있습니다.이 컨테이너 위에 머리말이 들어있는 디브가 있습니다.래퍼 div는 헤더의 높이에서 100%를 뺀 값이어야 합니다.헤더는 60px 정도 됩니다.이거 고쳤어요.그래서 제 질문은 어떻게 하면 제 래퍼 디브의 높이를 100%에서 60px를 뺀 값으로 설정할 수 있을까요? CSS3에서 사용할 수 있습니다. height: calc(100% - 60px); 여기 Firefox/IE7/Safari/Chrome/Opera에서 테스트된 작동하는 CSS가 있습니다. * {margi..

IT 2023.11.04

부트스트랩 4, 버튼을 중앙 정렬하려면 어떻게 해야 합니까?

부트스트랩 4, 버튼을 중앙 정렬하려면 어떻게 해야 합니까? {{ job.job_title }} Google Inc. - {{ job.location }} Job Description Posted: {{ formatDate(job.date_created) }} {{ buttonText }} 이 버튼의 중심을 맞추는 방법을 찾을 수 없습니다.BS 3에서는 그냥 센터 블록을 사용하지만 BS4에서는 옵션이 아닙니다.조언 좀 해주세요.부트스트랩 4에서는 다음을 사용해야 합니다.text-center인라인 블록을 정렬합니다. 참고:text-align:center;부모 요소에 적용하는 사용자 지정 클래스에서 정의된 것은 사용 중인 부트스트랩 버전에 관계없이 작동합니다.그리고 그게 바로 그거에요..text-center..

IT 2023.10.30

반응형 CSS 배경 이미지

반응형 CSS 배경 이미지 저는 웹사이트(g-floors.eu )를 가지고 있고 배경(css에서 콘텐츠에 대한 bg-이미지를 정의했습니다)도 응답할 수 있도록 만들고 싶습니다.유감스럽게도 한 가지 생각나는 것 외에는 어떻게 해야 할지 전혀 모르겠습니다만, 상당히 해결할 수 있는 방법입니다.여러 이미지를 생성한 후 CSS 화면 크기를 사용하여 이미지를 변경하는 것이지만 이를 달성하기 위해 더 실용적인 방법이 있는지 알고 싶습니다. 기본적으로 제가 이루고 싶은 것은 ('G'라는 워터마크가 있는) 이미지가 더 적게 표시되지 않고 자동으로 크기가 조정된다는 것입니다.물론 가능하다면, 링크 : g-floors.eu 지금까지 가지고 있는 코드 (내용부분) #content { background-image: url(..

IT 2023.10.25

CSS는 텍스트와 다른 색을 사용합니까?

CSS는 텍스트와 다른 색을 사용합니까? HTML이 .del,strike, 아니면s텍스트 스트라이크 스루 효과에 모두 사용할 수 있습니다.예: del ....gives: del strike and strike ....gives: 일격을 가하다 그리고 파업을 CSStext-decoration가 있는 line-through유사하게 사용할 수 있습니다.암호는... text-decoration:line-through ...또한 다음과 같이 렌더링됩니다. 텍스트 장식:라인스루 그러나 줄무늬 선은 일반적으로 텍스트와 같은 색입니다. CSS를 사용하여 라인을 다른 색상으로 만들 수 있습니까?네, 랩핑 요소를 추가해서요.원하는 선 통과 색상을 외부 요소에 할당한 다음, 원하는 텍스트 색상을 내부 요소에 할당합니다.예를..

IT 2023.10.05

스타일을 한 번에 여러 개의 수업에 적용하려면 어떻게 해야 합니까?

스타일을 한 번에 여러 개의 수업에 적용하려면 어떻게 해야 합니까? 이름이 다른 두 클래스가 CSS에서 같은 속성을 가지길 원합니다.반복하고 싶지 않아요 .abc { margin-left:20px; } .xyz { margin-left:20px; } Lorem Ipsum 두 반 모두 같은 일을 하고 있기 때문에, 저는 그것을 하나로 통합할 수 있을 것입니다.내가 어떻게 그럴 수 있을까?.abc, .xyz { margin-left: 20px; } 당신이 찾는 것입니다.쉼표로 구분하여 동일한 속성에 대해 여러 CSS 선언을 가질 수 있습니다. .abc, .xyz { margin-left: 20px; } CSS를 반복하지 않기 a.abc, a.xyz{ margin-left:20px; } 오어 a{ margin..

IT 2023.09.25

sass --자동 미니와 함께 보기?

sass --자동 미니와 함께 보기? 실행할 방법이 있습니까? sass --watch a.scss:a.css 하지만 가지고 있습니다a.css결국은 미니드가 되는 겁니까? 스타일시트를 컴파일할 때 별도의 축소 단계를 실행하지 않으려면 어떻게 해야 합니까?sass --watch a.scss:a.css --style compressed 업데이트에 대해서는 설명서를 참조하십시오. https://sass-lang.com/guide https://sass-lang.com/documentation/cli/dart-sass#style IntelliJ IDEA, PhpStorm, WebStorm 등 JetBrain 편집기를 사용하는 경우Settings > File Watcher에서 다음 설정을 사용합니다. 인수를 설정하..

IT 2023.09.10

인라인/인라인 블록 요소의 CSS 수직 정렬

인라인/인라인 블록 요소의 CSS 수직 정렬 저는 여러 개를 사려고 합니다.inline그리고.inline-block수직으로 정렬된 구성 요소div왜 그span이 예에서 아래로 밀리는 것을 주장합니까?둘 다 먹어봤어요.vertical-align:middle;그리고.vertical-align:top;아무것도 변하지 않습니다. HTML: Some text ​ CSS: a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } 결과: 피들 vertical-ali..

IT 2023.09.05

전체 HTML 문서에 전역 글꼴을 적용하는 방법

전체 HTML 문서에 전역 글꼴을 적용하는 방법 텍스트와 서식이 포함된 HTML 페이지가 있습니다.텍스트의 모든 내부 형식을 무시하고 동일한 글꼴 패밀리와 동일한 텍스트 크기를 갖도록 하고 싶습니다. HTML 페이지의 글로벌 글꼴 형식을 설정하고 싶습니다. 어떻게 하면 이를 달성할 수 있을까요?별표를 사용할 수 있어야 합니다.!importantCSS 내의 요소. html * { font-size: 1em !important; color: #000 !important; font-family: Arial !important; } 별표는 모든 것과 일치합니다. (아마도 당신은 그것 없이 도망칠 수 있을 것입니다.)html역시). 그!important이 스타일에서 설정한 내용을 재정의할 수 있는 기능은 없습니다..

IT 2023.08.31

이 스팬을 디브의 오른쪽에 맞추는 방법은 무엇입니까?

이 스팬을 디브의 오른쪽에 맞추는 방법은 무엇입니까? HTML은 다음과 같습니다. Cumulative performance 20/02/2011 이 CSS로: .title { display: block; border-top: 4px solid #a7a59b; background-color: #f6e9d9; height: 22px; line-height: 22px; padding: 4px 6px; font-size: 14px; color: #000; margin-bottom: 13px; clear:both; } jsFiddle을 선택한 경우: http://jsfiddle.net/8JwhZ/ 이름과 날짜가 서로 붙어 있는 것을 볼 수 있습니다.날짜를 오른쪽으로 맞출 수 있는 방법이 있습니까?해봤습니다float..

IT 2023.08.31

인라인 블록 DIV를 컨테이너 요소의 맨 위에 정렬

인라인 블록 DIV를 컨테이너 요소의 맨 위에 정렬 2시에inline-block div높이가 서로 다른데, 둘 중 짧은 쪽이 용기 상단에 정렬되지 않는 이유는 무엇입니까? (DEMO): .container { border: 1px black solid; width: 320px; height: 120px; } .small { display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; } 작은 크기를 정렬하려면 어떻게 ..

IT 2023.08.31
반응형