반응형

CSS 9

CSS를 사용하면 캔버스가 늘어나지만 '너비'와 '높이' 속성은 정상입니다.

CSS를 사용하면 캔버스가 늘어나지만 '너비'와 '높이' 속성은 정상입니다. 2개의 캔버스가 있는데, 하나는 HTML 속성을 사용합니다.width그리고.height크기를 맞추기 위해 다른 하나는 CSS를 사용합니다. Competeur1은 표시해야 하지만 Competeur2는 표시되지 않습니다.콘텐츠는 300x300 캔버스에 자바스크립트를 이용하여 그려집니다. 디스플레이 차이가 나는 이유는 무엇입니까? 아무래도.width그리고.height속성은 캔버스의 좌표계의 너비 또는 높이를 결정하는 반면 CSS 속성은 표시될 상자의 크기만 결정합니다. 이는 HTML 규격에서 다음과 같이 설명됩니다. 그canvaselement에는 element의 비트맵 크기를 제어할 수 있는 두 가지 속성이 있습니다.width그리고...

programing 2023.11.01

부트스트랩과 함께 필드셋 범례 사용

부트스트랩과 함께 필드셋 범례 사용 저는 부츠트랩을 사용하고 있습니다.JSP페이지입니다. 저는 제 폼을 위해 사용하고 싶습니다.이건 내 암호입니다. Start Time Start : CSS는 fieldset.scheduler-border { border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; -webkit-box-shadow: 0px 0px 0px 0px #000; box-shadow: 0px 0px 0px 0px #000; } legend.scheduler-border { font-size: 1.2em !important; font-weight: bold !im..

programing 2023.10.27

CSS 두 디브가 서로 옆에 있음

CSS 두 디브가 서로 옆에 있음 두개를 넣고싶습니다.서로 옆에 있는오른쪽x이고 약 200 px다입니다. 그리고 왼쪽입니다.화면 너비의 나머지 부분을 채워야 합니까?이거 어떻게 해요?flexbox를 사용하여 항목을 배치할 수 있습니다. #parent { display: flex; } #narrow { width: 200px; background: lightblue; /* Just so it's visible */ } #wide { flex: 1; /* Grow to rest of container */ background: lightgreen; /* Just so it's visible */ } Wide (rest of width) Narrow (200px) 이것은 기본적으로 플렉스박스의 표면을 긁어내는..

programing 2023.10.17

클래스 접두사별 CSS 셀렉터가 있습니까?

클래스 접두사별 CSS 셀렉터가 있습니까? 클래스 중 하나가 지정된 접두사와 일치하는 모든 요소에 CSS 규칙을 적용하고 싶습니다. 예를 들어, 나는 시작하는 클래스가 있는 div에 적용되는 규칙을 원합니다.status-(A와 C, 다음 토막글에서는 B가 아님): 일종의 조합: div[class|=status]그리고.div[class~=status-] CSS 2.1로 가능합니까?어떤 CSS 사양에서도 가능합니까? 참고: 저는 jQuery를 사용하여 그것을 에뮬레이트 할 수 있다는 것을 알고 있습니다.CSS2.1에서는 할 수 없지만, (IE7+에서 지원되는) CSS3 속성 부분 문자열 일치 선택기에서는 가능합니다. div[class^="status-"], div[class*=" status-"] 두 번째 ..

programing 2023.09.12

열 사이의 간격을 어떻게 추가합니까?

열 사이의 간격을 어떻게 추가합니까? 두 개의 열이 있습니다. 어떻게 하면 그들 사이에 공간을 추가할 수 있습니까? 출력은 페이지의 전체 너비를 차지하는 두 개의 열이 서로 바로 옆에 있을 뿐입니다.너비가 다음으로 설정되었다고 가정합니다.1000px 각 는 그면각디브는러▁be디는브▁then각이 될 것입니다.500px넓은 내가 원한다면,100px할 수 : 부스트랩이달수성할있것습까니을로트으동자어떻로?divs 사이즈가 될 것입니다.450px간격을 보상하기 위해 각각.저는 같은 문제에 직면해 있었고, 다음과 같은 것들이 저에게 잘 먹혔습니다. Some Content.. Some Second Content.. 그러면 자동으로 두 디브 사이에 공간이 약간 렌더링됩니다. 여기에 설명된 클래스를 사용하여 열 사이의 간..

programing 2023.08.18

Sass에서 :after 및 :before 유사 요소 선택기

Sass에서 :after 및 :before 유사 요소 선택기 이 질문에는 이미 다음과 같은 답이 있습니다. Sass.scss: 중첩 및 다중 클래스? (6개 답변) 마감됨7년 전에. Sass 또는 SCSS 구문을 따르는 :before 및 :before 유사 요소 선택기를 어떻게 사용할 수 있습니까?다음과 같이: p margin: 2em auto > a color: red :before content: "" :after content: "* * *" 물론 위의 내용은 실패합니다.앰퍼샌드를 사용하여 상위 선택기를 지정합니다. SCSS 구문: p { margin: 2em auto; > a { color: red; } &:before { content: ""; } &:after { content: "* * *"..

programing 2023.08.18

div 요소 내에서 이미지를 수평으로 중앙에 배치하는 방법은 무엇입니까?

div 요소 내에서 이미지를 수평으로 중앙에 배치하는 방법은 무엇입니까? 컨테이너 div 내부에서 이미지를 중앙(수평) 정렬하려면 어떻게 해야 합니까? 여기 HTML과 CSS가 있습니다.저는 썸네일의 다른 요소들을 위한 CSS도 포함시켰습니다.그것은 내림차순으로 실행되기 때문에 가장 높은 요소는 모든 것의 용기이고 가장 낮은 요소는 모든 것의 내부에 있습니다. #thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px } #artiststhu..

programing 2023.08.13

마우스를 한 번 클릭하여 모든 DIV 텍스트 선택

마우스를 한 번 클릭하여 모든 DIV 텍스트 선택 사용자가 DIV를 클릭할 때 DIV 태그의 내용을 강조 표시/선택하는 방법...모든 텍스트가 강조 표시/선택되므로 사용자가 마우스로 텍스트를 수동으로 강조 표시할 필요가 없으며 텍스트를 일부 놓칠 수도 있습니다. 예를 들어, 아래와 같이 DIV가 있다고 가정합니다. http://example.com/page.htm ...사용자가 해당 URL 중 하나를 클릭하면 전체 URL 텍스트가 강조 표시되어 브라우저에서 선택한 텍스트를 쉽게 끌어다 놓거나 마우스 오른쪽 버튼을 클릭하여 전체 URL을 복사할 수 있습니다. 감사합니다! function selectText(containerid) { if (document.selection) { // IE var range..

programing 2023.08.13

HTML을 사용하여 문서의 모든 인쇄 페이지에서 머리글과 바닥글을 인쇄하는 방법은 무엇입니까?

HTML을 사용하여 문서의 모든 인쇄 페이지에서 머리글과 바닥글을 인쇄하는 방법은 무엇입니까? 인쇄된 각 페이지에 사용자 정의 헤더와 바닥글로 HTML 페이지를 인쇄할 수 있습니까? 저는 내용에 관계없이 인쇄된 모든 페이지의 상단과 하단에 빨간색, Arial, 16pt 크기의 "미분류"라는 단어를 추가하고 싶습니다. 명확히 하기 위해 문서가 5페이지로 인쇄된 경우 각 페이지에는 사용자 정의 머리글과 바닥글이 있어야 합니다. HTML/CSS를 사용하여 이것이 가능한지 아는 사람이 있습니까?바닥글로 사용할 요소를 위치:fixed 및 bottom:0으로 설정하면 페이지가 인쇄될 때 각 인쇄 페이지 하단에서 해당 요소가 반복됩니다.헤더 요소에 대해서도 동일하게 작동하며 대신 top:0만 설정하면 됩니다. 예: ..

programing 2023.06.04
반응형