코딩하다 현타올 때

질문 : 클래스 용 CSS의 와일드 카드 * .tocolor 스타일링하는 div가 있지만 고유 식별자 1,2,3,4 등도 필요하므로 tocolor-1 다른 클래스로 추가합니다. tocolor 1 tocolor 2 tocolor 3 tocolor 4 .tocolor{ background: red; } tocolor-* 만 갖는 방법이 있습니까? 이 CSS에서와 같이 와일드 카드 * .tocolor-*{ background: red; } 답변 필요한 것은 속성 선택기입니다. html 구조를 사용하는 예는 다음과 같습니다. div[class^="tocolor-"], div[class*=" tocolor-"] { color:red } div 대신 요소를 추가하거나 모두 제거 class 대신 지정된 요소의 속성을..

질문 : 각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해 offsetWidth / clientWidth / scrollWidth (및 -Height )와 관련하여 StackOverflow에 대한 몇 가지 질문이 있지만 해당 값이 무엇인지에 대한 포괄적 인 설명은 제공하지 않습니다. 또한 웹에는 혼란 스럽거나 잘못된 정보를 제공하는 여러 소스가 있습니다. 시각적 힌트를 포함하여 완전한 설명을 할 수 있습니까? 또한 이러한 값을 사용하여 스크롤 막대 너비를 계산하려면 어떻게해야합니까? 답변 CSS 상자 모델은 특히 스크롤 콘텐츠와 관련하여 다소 복잡합니다. 브라우저는 CSS의 값을 사용하여 상자를 그리는 반면, CSS 만있는 경우 JS를 사용하여 모든 치수를 ..

질문 : IMG와 CSS 배경 이미지는 언제 사용합니까? background-image IMG 태그를 사용하여 이미지를 표시하는 것이 더 적합한 상황은 무엇입니까? 요인에는 접근성, 브라우저 지원, 동적 콘텐츠 또는 모든 종류의 기술적 제한 또는 사용성 원칙이 포함될 수 있습니다. 답변 IMG의 적절한 사용 다른 사용자가 페이지를 인쇄하도록 하려면 IMG를 사용하십시오. 이미지가 기본적으로 포함되도록 하려면 IMG를 사용하십시오.—JayTee 이미지에 경고 아이콘과 같은 중요한 의미 의미가 있는 경우 IMG(Alt 텍스트 포함)를 사용합니다. 이렇게 하면 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미가 전달될 수 있습니다. CSS background-image 사용 시기 이미지가 로고, 다..

질문 : ">"(보다 큼 기호) CSS 선택기는 무엇을 의미합니까? 예를 들면 : div > p.some_class { /* Some declarations */ } > 기호는 정확히 무엇을 의미합니까? 답변 > 는 자식 결합 자 이며, 때때로 직계 후손 결합 자라고 잘못 불립니다. 1 즉, 선택기 div > p.some_class 는 div 내부에 직접 중첩 된 .some_class 단락 만 일치 하고 더 내부에 중첩 된 단락은 일치하지 않습니다. div > p.some_class 와 일치하는 모든 요소가 div p.some_class 와 하위 결합 자 (공백)와 일치하므로 두 가지가 종종 혼동되는 것을 의미합니다. 하위 결합 자와 하위 결합자를 비교하는 그림 : div > p.some_class { ..

질문 : CSS를 사용하여 텍스트 길이를 n 줄로 제한 CSS를 사용하여 텍스트 길이를 "n"줄로 제한 할 수 있습니까 (또는 세로로 오버플로되면 잘라 내기). text-overflow: ellipsis; 한 줄 텍스트에만 작동합니다. 원본 텍스트 : 농구 마우스는 부동산을 느끼고 내일 일부 아이들은 게임과 칠리는 트럭으로 졸업했습니다. CNN은 이제 냄비를 투자합니다! 하지만 그것은! 얼마나 못생긴 집 마우스 개발자! Dapibus sed fermentum, magna sagittis, lorem velit 원하는 출력 (2 줄) : 농구 마우스는 부동산을 느끼고 내일 일부 아이들은 게임과 칠리는 트럭으로 졸업했습니다. 답변 비공식 라인 클램프 구문을 사용하는 방법이 있으며 Firefox 68부터 모든..

질문 : CSS '>'선택기; 뭐야? CSS 코드에서 사용 된 "보다 큼"( > )을 몇 번 보았지만 그 기능을 이해할 수 없습니다. 그것은 무엇을합니까? 답변 예를 들어 다음과 같이 중첩 된 div가있는 경우 : ... ... 스타일 시트에서 다음과 같이 CSS 규칙을 선언합니다. .outer > div { ... } 규칙은 "중간"클래스가있는 div에만 적용됩니다. 이러한 div는 클래스가 "outer"인 요소의 직계 하위 항목 (직계 하위)이기 때문입니다 (물론 이러한 규칙을 재정의하는 다른보다 구체적인 규칙을 선언하지 않는 한). . 바이올린을 참조하십시오. div { border: 1px solid black; padding: 10px; } .outer > div { border: 1px sol..

질문 : HTML / CSS에서 이미지를 회색조로 변환 HTML/CSS 로 그레이 스케일로 컬러 비트 맵을 표시하는 간단한 방법이 있습니까? IE와 호환 될 필요는 없습니다 (그렇지 않을 것이라고 생각합니다). FF3 및 / 또는 Sf3에서 작동한다면 저에게 충분합니다. SVG 와 Canvas로 모두 할 수 있다는 것을 알고 있지만 지금은 많은 작업을하는 것 같습니다. 이것을하는 정말 게으른 사람의 방법이 있습니까? 답변 CSS 필터에 대한 지원이 Webkit에 포함되었습니다. 이제 브라우저 간 솔루션이 있습니다. img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ fi..

질문 : 프로젝트의 여러 CSS 파일에서 사용하지 않는 CSS 정의를 식별하는 방법CSS 파일이 많이 들어 왔고 이제는 정리하려고합니다.전체 프로젝트에서 사용하지 않는 CSS 정의를 어떻게 효율적으로 식별 할 수 있습니까?답변Chrome 개발자 도구 에는 사용하지 않는 CSS 선택기를 표시 할 수 있는 감사 탭이 있습니다.감사를 실행 한 다음 웹 페이지 성능에서 사용하지 않는 CSS 규칙 제거를 참조하십시오.출처 : https://stackoverflow.com/questions/135657/how-to-identify-unused-css-definitions-from-multiple-css-files-in-a-project

질문 : JavaScript를 사용하여 요소에서 CSS 클래스 제거 (jQuery 없음) 누구든지 JavaScript 만 사용하여 요소에서 클래스를 제거하는 방법을 알려줄 수 있습니까? 사용할 수 없으며 그것에 대해 아무것도 알지 못하므로 jQuery로 대답하지 마십시오. 답변 이를 수행하는 올바른 표준 방법은 classList 사용하는 것입니다. 현재 대부분의 최신 브라우저의 최신 버전에서 널리 지원됩니다 . ELEMENT.classList.remove("CLASS_NAME"); remove.onclick = () => { const el = document.querySelector('#el'); if (el.classList.contains("red")) { el.classList.remove("re..

질문 : 사용하지 않고 CSS에서 줄 바꿈하는 방법? 산출: 암호: hello How are you 없이 동일한 출력을 얻는 방법은 무엇입니까? 답변 동일한 HTML 구조로는 불가능합니다. Hello 와 How are you 를 구별 할 수있는 무언가가 있어야합니다. 그런 다음 블록으로 표시 할 span 사용하는 것이 좋습니다 처럼). p span { display: block; } helloHow are you 출처 : https://stackoverflow.com/questions/2703601/how-to-line-break-from-css-without-using-br

질문 : .css ()를 사용하여 !important를 적용하는 방법은 무엇입니까? !important 스타일을 적용하는 데 문제가 있습니다. 난 노력 했어: $("#elem").css("width", "100px !important"); 이것은 아무것도 하지 않습니다. 너비 스타일이 전혀 적용되지 않습니다. cssText 를 덮어 쓰지 않고 그러한 스타일을 적용하는 jQuery 방식이 있습니까 (먼저 파싱해야 함을 의미합니다)? 편집 !important 스타일 인라인으로 재정의하려는 !important 스타일의 스타일 시트가 .width() !important 스타일에 의해 재정의되기 때문에 작동하지 않습니다. . 또한 이전 값을 재정의 할 값 이 계산 되므로 단순히 다른 외부 스타일을 만들 수 없습니..

질문 : jQuery에서 div 요소 만들기 jQuery div 요소를 어떻게 생성합니까? 답변 append (부모의 마지막 위치에 추가) 또는 prepend (부모의 첫 위치에 추가)를 사용할 수 있습니다. $('#parent').append('hello'); // or $('hello').appendTo('#parent'); 또는 다른 답변 에서 언급했듯이 .html() 또는 .add() 를 사용할 수 있습니다. 출처 : https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery

질문 : div가 나머지 화면 공간의 높이를 채우도록합니다. 콘텐츠가 전체 화면의 높이를 채우도록하는 웹 애플리케이션에서 작업 중입니다. 페이지에는 로고와 계정 정보가 포함 된 헤더가 있습니다. 임의의 높이가 될 수 있습니다. 콘텐츠 div가 페이지의 나머지 부분을 맨 아래까지 채우길 원합니다. 헤더 div 및 콘텐츠 div 있습니다. 현재 나는 다음과 같은 레이아웃에 테이블을 사용하고 있습니다. CSS 및 HTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } ... ... 페이지의 전체 높이가 채워지며 스크롤 할 필요가 없습니다. 콘..

질문 : CSS를 사용하여 목록 항목에서 줄 바꿈을 방지하는 방법 li 태그를 사용하여 메뉴에 이력서 제출 이라는 링크를 넣으려고합니다. 두 단어 사이의 공백 때문에 두 줄로 줄 바꿈됩니다. CSS로이 래핑을 방지하는 방법은 무엇입니까? 답변 공백 사용 white-space: nowrap; [1] [2] li 의 너비를 더 큰 값으로 설정하여 링크에 더 많은 공간을 제공합니다. [1] § 3. 공백과 줄 바꿈 : 공백 속성-W3 CSS 텍스트 모듈 레벨 3 [2] 공백-CSS : Cascading Style Sheets | MDN 출처 : https://stackoverflow.com/questions/1383143/how-to-prevent-line-breaks-in-list-items-using-css

질문 : CSS를 사용하는 대체 테이블 행 색상? 나는 이것으로 대체 행 색상이있는 테이블을 사용하고 있습니다. tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } One one Two two tr 에 대한 클래스를 사용하고 있지만 table 에만 사용하고 싶습니다. 이보다 테이블에 클래스를 사용할 때 tr 대안에 적용됩니다. CSS를 사용하여 이와 같이 HTML을 작성할 수 있습니까? Oneone Twotwo CSS를 사용하여 행에 "얼룩말 줄무늬"를 만들려면 어떻게해야합니까? 답변 $(document).ready(function() { $("tr:odd").cs..

질문 : CSS를 사용하는 모든 브라우저에 대해 "div"요소를 세로 중앙에 어떻게 배치 할 수 있습니까? CSS div 세로로 가운데에 배치하고 싶습니다. 나는 테이블이나 자바 스크립트를 원하지 않고 순수한 CSS만을 원합니다. 몇 가지 해결책을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다. Div to be aligned vertically Internet Explorer 6을 포함한 모든 주요 브라우저에서 div 세로로 중앙에 배치하려면 어떻게해야합니까? 답변 아래는 고정 너비의 유연한 높이 콘텐츠 상자를 수직 및 수평 중앙에 구축 할 수있는 최고의 만능 솔루션입니다. Firefox, Opera, Chrome 및 Safari의 최신 버전에서 테스트되고 작동했습니다. .ou..

질문 : 'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하려면 어떻게합니까? 너비 : 높이 비율을 유지하면서 더 작은 너비 div 컨테이너에 맞도록 큰 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까? 예 : stackoverflow.com-이미지가 편집기 패널에 삽입되고 이미지가 너무 커서 페이지에 맞지 않으면 이미지 크기가 자동으로 조정됩니다. 답변 이미지 태그에 명시적인 너비 또는 높이를 적용하지 마십시오. 대신 다음을 제공하십시오. max-width:100%; max-height:100%; 또한 height: auto; 너비 만 지정하려는 경우. 예 : http://jsfiddle.net/xwrvxser/1/ img { max-width: 100%; max-height: 100%; } ...

질문 : div 내부에서 이미지를 세로로 정렬하는 방법 div 내부에 이미지를 어떻게 정렬 할 수 있습니까? class ="frame "을 사용하여 를 세로로 가운데에 배치해야합니다. .frame 의 높이는 고정되어 있고 이미지의 높이는 알 수 없습니다. 유일한 해결책 인 경우 .frame 에 새 요소를 추가 할 수 있습니다. Internet Explorer 7 이상, WebKit, Gecko에서이 작업을 수행하려고합니다. 여기 에서 jsfiddle을 참조하십시오. .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; ma..

질문 : 백그라운드에서 CSS 이미지 늘리기 및 크기 조정-CSS 만 사용 브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기가 조정되기를 원합니다. 예를 들어 Stretch 및 Scale CSS 배경과 같은 작업을 수행하는 Stack Overflow에 대한 몇 가지 질문을 보았습니다. img 태그가 아닌 background 사용하여 이미지를 배치하고 싶습니다. 그 img 태그가 배치되고 CSS로 img 태그에 찬사를 보냅니다. width:100%; height:100%; 작동하지만 그 질문은 조금 오래되었으며 CSS 3에서 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 예제로 시도했지만 제대로 작동하지 않았습니다. background-image 선언으로 수행하는 좋은..

질문 : div에서 텍스트를 세로로 정렬하려면 어떻게합니까? div와 텍스트를 정렬하는 가장 효과적인 방법을 찾으려고합니다. 몇 가지 시도했지만 작동하지 않는 것 같습니다. .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei..

질문 : "+"(더하기 기호) CSS 선택기는 무엇을 의미합니까? 예를 들면 : p + p { /* Some declarations */ } + 가 무엇을 의미하는지 모르겠습니다. + p 없이 p 대한 스타일을 정의하는 것의 차이점은 무엇입니까? 답변 W3.org에서 인접한 선택자를 참조하십시오. 이 경우 선택기는 스타일이 다른 단락 바로 다음에 오는 단락에만 적용됨을 의미합니다. 일반 p 선택기는 페이지의 모든 단락에 스타일을 적용합니다. 이것은 IE7 이상에서만 작동합니다. IE6에서는 스타일이 어떤 요소에도 적용되지 않습니다. 그건 > 결합 자에도 적용됩니다. Internet Explorer의 CSS 호환성에 대한 Microsoft의 개요를 참조하십시오. 출처 : https://stackoverfl..

질문 : CSS calc () 함수의 Sass 변수 calc() 함수를 사용하려고하는데 몇 가지 문제가 있습니다. 내 코드는 다음과 같습니다. $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) body_padding 변수 대신 50px 를 사용하면 원하는 것을 정확히 얻습니다. 그러나 변수로 전환하면 다음이 출력됩니다. body { padding-top: 50px; height: calc(100% - $body_padding); } calc 함수 내에서 변수를 대체해야한다는 것을 Sass가 인식하도록하려면 어떻게해야합니까? 답변 보간 : body height: calc(100% - #{$body_pa..

질문 : 요소 전용 CSS 스타일 재설정 / 제거 나는 이것이 이전에 언급 / 질문 했음에 틀림 없다고 확신하지만, 운이없는 시대를 찾고 있었다. 내 용어가 틀 렸음에 틀림 없다! 특정 요소에 대해 이전에 스타일 시트에 설정된 모든 스타일을 제거 할 수있는 CSS 규칙이 있다는 것을 제안한 얼마 전에 본 트윗을 막연하게 기억합니다. 좋은 사용 예는 작은 화면보기의 특정 요소에 사용되는 스타일의 대부분이 데스크톱보기의 동일한 요소에 대해 '재설정'또는 제거가 필요한 모바일 우선 RWD 사이트 일 수 있습니다. 다음과 같은 것을 달성 할 수있는 CSS 규칙 : .element { all: none; } 사용 예 : /* mobile first */ .element { margin: 0 10; transfor..

질문 : .css () 함수로 추가 된 스타일을 제거하려면 어떻게해야합니까? jQuery로 CSS 를 변경하고 있으며 입력 값에 따라 추가하는 스타일을 제거하고 싶습니다. if(color != '000000') $("body").css("background-color", color); else // remove style ? 어떻게 할 수 있습니까? 위의 선은 색상 선택기를 사용하여 색상을 선택할 때마다 (즉, 마우스가 색상환 위로 이동할 때) 실행됩니다. 두 번째 참고 : CSS 파일에서 기본 스타일을 제거하므로 css("background-color", "none") 이 작업을 수행 할 수 없습니다. jQuery 에 의해 추가 된 background-color 인라인 스타일을 제거하고 싶습니다. 답변..

질문 : iframe에 CSS를 적용하는 방법은 무엇입니까? RSS 링크를 표시하기위한 iframe 섹션이있는 간단한 페이지가 있습니다. 메인 페이지에서 iframe에 표시된 페이지에 동일한 CSS 형식을 적용하려면 어떻게해야합니까? 답변 편집 : 적절한 CORS 헤더 가 설정되어 있지 않으면 도메인 간 작동하지 않습니다. 여기에는 iframe 블록의 스타일과 iframe에 포함 된 페이지의 스타일이라는 두 가지가 있습니다. 일반적인 방법으로 iframe 블록의 스타일을 설정할 수 있습니다. iframe에 삽입 된 페이지의 스타일은 하위 페이지에 포함하여 설정해야합니다. 또는 Javascript를 사용하여 상위 페이지에서로드 할 수 있습니다. var cssLink = document.createEleme..