코딩하다 현타올 때

질문 : CSS 표시 : inline vs inline-block CSS에서 display inline 및 inline-block 값을 가질 수 있습니다. inline 과 inline-block 의 차이점을 자세히 설명 할 수 있습니까? 나는 가장 상세한 설명은 나에게 말한다, 어디서나 검색 inline-block 으로 배치 inline 동작합니다 같은,하지만 block . 그러나 정확히 "블록처럼 동작"이 무엇을 의미하는지 설명하지 않습니다. 특별한 기능이 있나요? 예가 더 나은 대답이 될 것입니다. 감사. 답변 인라인 요소 : 블록 요소 : 인라인 블록 요소 : W3Schools에서 : 인라인 요소는 앞뒤에 줄 바꿈이 없으며 옆에있는 HTML 요소를 허용합니다. 블록 요소는 위와 아래에 약간의 공백이..

질문 : 여러 속성을 가진 CSS 전환 속기? 여러 속성이 있는 CSS 전환 속기 의 올바른 구문을 찾을 수없는 것 같습니다. 이것은 아무것도하지 않습니다. .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } 자바 스크립트로 쇼 클래스를 추가합니다. 요소가 더 높아지고 표..

질문 : jQuery에서 여러 CSS 속성을 정의하는 방법은 무엇입니까? jQuery에 다음과 같이 모든 것을 오른쪽으로 묶지 않고 여러 CSS 속성을 정의하는 구문 적 방법이 있습니까? $("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt"); 예를 들어이 중 20 개가 있으면 코드를 읽기 어렵게됩니다. 해결책이 있습니까? 예를 들어 jQuery API에서 jQuery는 두 가지 모두에 대해 올바른 값을 이해하고 반환합니다. .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 과 .css({backgroundColor: "#ffe", bor..

질문 : 가운데 정렬 하는 방법 블록 요소를 가로로 가운데에 배치하고 최소 너비로 설정하려고합니다. 이를 수행하는 가장 간단한 방법은 무엇입니까? 요소가 내 페이지의 나머지 부분과 인라인되기를 원합니다. 예를 들어 보겠습니다. page text page text page text page text page text page text page text page text ------- | div | ------- page text page text page text page text page text page text page text page text 답변 너비가 고정되지 않은 div의 경우 (즉, div가 차지할 공간의 양을 알지 못함). #wrapper { background-color: green; ..

질문 : Chrome의 CSS 사용자 정의 스타일 버튼에서 파란색 테두리 제거 웹 페이지에서 작업 중이며 사용자 지정 스타일의 태그를 원합니다. 그래서 CSS를 사용하면 border: none 이라고 말했습니다. 이제는 사파리에서 완벽하게 작동하지만 크롬에서는 버튼 중 하나를 클릭하면 주위에 성가신 파란색 테두리가 표시됩니다. button:active { outline: none } 또는 button:focus { outline:none } 이 작동한다고 생각했지만 둘 다 작동하지 않습니다. 어떤 아이디어? 다음은 클릭되기 전의 모습입니다 (클릭 한 후에도 계속 표시되는 방식). 그리고 이것이 제가 말하는 경계입니다. 내 CSS는 다음과 같습니다. button.launch { background-colo..

질문 : CSS 상자 그림자 하단만 보이기 어떻게 할 수 있습니까? 내 요소가 그림자 밑줄이있는 것처럼 보이기를 원합니다. 다른 3면의 그림자를 원하지 않습니다. 답변 이 작업을 수행: box-shadow: 0 4px 2px -2px gray; 흐림을 (3 번째 값)으로 설정하고 스프레드 (4 번째 값)를 음수로 설정하는 것이 실제로 훨씬 더 간단합니다. 출처 : https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only

질문 : CSS로 Firefox 만 타겟팅 조건부 주석을 사용하면 브라우저 별 CSS 규칙으로 Internet Explorer를 쉽게 타겟팅 할 수 있습니다. 때때로 오작동하는 것은 Gecko 엔진 (Firefox)입니다. CSS 규칙으로 Firefox 만 타겟팅하고 다른 브라우저 하나만 타겟팅하는 가장 좋은 방법은 무엇입니까? 즉, Internet Explorer는 Firefox 전용 규칙을 무시해야 할뿐만 아니라 WebKit 및 Opera도 무시해야합니다. 참고 : '깨끗한'솔루션을 찾고 있습니다. JavaScript 브라우저 스니퍼를 사용하여 내 HTML에 'firefox'클래스를 추가하는 것은 내 생각에 깨끗한 것으로 간주되지 않습니다. 조건부 주석이 IE에만 '특별한'것처럼 브라우저 기능에 따라..

질문 : 동적 너비와 동일한 높이 (CSS 유동 레이아웃) 너비와 동일한 높이 (비율 1 : 1)를 설정할 수 있습니까? 예 +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width } 답변 jQuery를 사용하면 다음과 같이 할 수 있습니다. var cw = $('.child').width(); $('.child').css({'height':cw+'px'}); 출처 : https://stackoverflow.com/questions/5445491/height-equal-to-..

질문 : CSS 미디어 쿼리 : 최대 너비 또는 최대 높이 CSS 미디어 쿼리를 작성할 때 "OR"논리로 여러 조건을 지정할 수있는 방법이 있습니까? 나는 다음과 같은 것을 시도하고 있습니다. /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... } 답변 쉼표를 사용하여 두 개 이상의 다른 규칙을 지정하십시오. @media screen and (max-width: 995px), screen and (max-height: 700px) { ... } https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries에서 쉼표는..

질문 : CSS 파일에서 상대 URL을 사용하면 어떤 위치에 상대적입니까? CSS 파일에서 배경 이미지 URL과 같은 것을 정의 할 때 상대 URL을 사용할 때 상대 URL은 어디에 있습니까? 예를 들면 : /stylesheets/base-styles.css 포함되어 있다고 가정합니다. div#header { background-image: url('images/header-background.jpg'); } 이 스타일 시트를 를 통해 다른 문서에 포함하면 CSS 파일의 상대 URL이 /stylesheets/ 의 스타일 시트 문서 에 상대적이거나 포함 된 현재 문서에 상대적입니까? 다음과 같은 가능한 경로 : /item/details.html /about/index.html /about/extra/oth..

질문 : CSS에서 모든 하위 요소를 재귀 적으로 선택모든 하위 요소를 재귀 적으로 선택하려면 어떻게해야합니까?div.dropdown, div.dropdown > * { color: red; } 이 클래스는 정의 된 className과 모든 직계 자식에 대해서만 클래스를 던집니다. 간단한 방법으로 다음과 같이 모든 childNode를 선택하는 방법은 다음과 같습니다.div.dropdown, div.dropdown > *, div.dropdown > * > *, div.dropdown > * > * > *, div.dropdown > * > * > * > * { color: red; } 답변요소의 모든 하위 항목을 일치 시키려면 공백 을 사용하십시오.div.dropdown * { color: red; } ..

질문 : CSS 이미지 크기, 비율에 맞게 늘일 수 있습니까? 이미지가 있는데 특정 너비와 높이 (픽셀 단위)로 설정하고 싶습니다. width:150px; height:100px )를 사용하여 너비와 높이를 설정하면 이미지가 늘어나고보기 흉할 수 있습니다. 어떻게 CSS를 사용하여 특정 크기로 이미지를 기입하고, 스트레칭하지 않으려면? 이미지 채우기 및 늘리기의 예 : 원본 이미지 : 늘어난 이미지 : 채워진 이미지 : 위의 채워진 이미지 예에서 먼저 이미지의 크기가 150x255 (유지 된 가로 세로 비율)로 조정 된 다음 150x100으로 잘립니다. 답변 object-fit 사용할 수 있습니다. .cover { object-fit: cover; width: 50px; height: 100px; } 여..

질문 : CSS에서! important는 무엇을 의미합니까? !important 는 무엇을 의미합니까? CSS 2에서 사용할 수 있습니까? CSS 3? 어디에서 지원됩니까? 모든 최신 브라우저? 답변 그것은 본질적으로 그것이 말하는 것을 의미합니다. '이것은 중요합니다. 후속 규칙과 일반적인 특이성 문제를 무시 하고이 규칙을 적용하십시오!' 일반적으로 외부 스타일 시트에 정의 된 규칙 head 에 정의 된 스타일에 의해 무시되며, 이는 차례로 요소 자체 내의 인라인 스타일에 의해 무시됩니다 (선택 자의 동일성이 동일하다고 가정). !important '속성'(?)을 사용하여 규칙을 정의하면 '이전'규칙을 재정의하는 '나중'규칙과 관련된 일반적인 문제가 삭제됩니다. 또한 일반적으로보다 구체적인 규칙이 덜 ..

질문 : CSS에서 img 태그의 src 속성에 해당하는 것을 설정할 수 있습니까? CSS에서 src 속성 값을 설정할 수 있습니까? 현재 내가하고있는 것은 : 그리고 나는 그것이 이와 같은 것이기를 원합니다. .myClass { some-src-property: url("pathTo/myImage.jpg"); CSS의 background 또는 background-image: 속성을 사용하지 않고이 작업을 수행하고 싶습니다. 답변 content:url("image.jpg") 사용하세요. 완전한 작동 솔루션 ( 라이브 데모 ) : 테스트 및 작동 : 크롬 14.0.835.163 Safari 4.0.5 오페라 10.6 테스트되었으며 작동 하지 않음 : FireFox 40.0.2 (개발자 네트워크 도구를 관찰..

질문 : CSS로 이미지 크기를 비례 적으로 조정 하시겠습니까? CSS 만 사용하여 비례 적으로 이미지 크기를 조정 (축소)하는 방법이 있습니까? 저는 JavaScript 방식을 사용하고 있지만 CSS로 이것이 가능한지 확인하려고합니다. 답변 CSS를 사용하여 비례 적으로 이미지 크기를 조정하려면 : img.resize { width:540px; /* you can use % */ height: auto; } 출처 : https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css

질문 : CSS 삼각형은 어떻게 작동합니까? CSS Tricks-Shapes of CSS 에는 다양한 CSS 모양이 많이 있으며 특히 삼각형이 궁금합니다. #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 어떻게 그리고 왜 작동합니까? 답변 alex가 말했듯 이 동일한 너비의 테두리는 45도 각도로 서로 맞대어 있습니다. 상단 테두리가없는 경우 다음과 같이 표시됩니다. 그런 다음 너비를 0으로 지정합니다. ... 그리고 높이 0 ... ... 그리고 마지막으로 두 개의 측면 테두리를 투명하게 만듭니..

질문 : CSS에서 여러 변환을 적용하는 방법은 무엇입니까? CSS를 사용하여 둘 이상의 transform 어떻게 적용 할 수 있습니까? 예 : 다음에서는 회전이 아닌 변환 만 적용됩니다. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); } 답변 다음과 같이 한 줄에 넣어야합니다. li:nth-child(2) { transform: rotate(15deg) translate(-20px,0px); } 여러 변환 지시문이있는 경우 마지막 지시문 만 적용됩니다. 다른 CSS 규칙과 같습니다. 여러 변환 한 줄 지시문이 오른쪽에서 왼쪽으로 적용 된다는 점에 유의하십시오. 이것은 : transform: scale(1,1.5)..

질문 : CSS 클래스가 하나 이상의 다른 클래스를 상속 할 수 있습니까? 나는 오랫동안 웹 프로그래머로 일하고이 질문에 대한 답을 알지 못해 멍청하다고 느낍니다. 실제로 그것이 가능하기를 바라며 대답이라고 생각하는 것보다 알지 못했습니다 (불가능하다는 것입니다) . 내 질문은 다른 CSS 클래스 (또는 둘 이상)에서 "상속"되는 CSS 클래스를 만들 수 있는지 여부입니다. 예를 들어 다음과 같이 가정합니다. .something { display:inline } .else { background:red } 내가하고 싶은 것은 다음과 같습니다. .composite { .something; .else } ".composite"클래스가 인라인으로 표시되고 배경이 빨간색 인 경우 답변 설명하는 것과 유사한 더 ..

질문 : CSS 배경 불투명도 다음 코드와 비슷한 것을 사용하고 있습니다. Text 배경의 불투명도가 0.4이고 텍스트의 불투명도가 100 %가 될 것으로 예상했습니다. 대신 둘 다 불투명도가 0.4입니다. 답변 아이들은 불투명도를 상속받습니다. 그렇지 않으면 이상하고 불편할 것입니다. 배경 이미지에 반투명 PNG 파일을 사용하거나 배경 색상에 RGBa (알파) 색상을 사용할 수 있습니다. 예, 50 % 희미한 검정색 배경 : Text added. 출처 : https://stackoverflow.com/questions/10422949/css-background-opacity

질문 : 인라인 CSS에서 a : hover를 작성하는 방법은 무엇입니까? 인라인 CSS 코드를 작성해야하는 경우가 있는데 앵커에 호버 스타일을 적용하고 싶습니다. HTML 스타일 속성 내의 인라인 CSS에서 a:hover 를 어떻게 사용할 수 있습니까? 예를 들어 HTML 이메일에서 CSS 클래스를 안정적으로 사용할 수 없습니다. 답변 짧은 대답 : 할 수 없습니다. 긴 대답 :해서는 안됩니다. 클래스 이름 또는 ID를 지정하고 스타일 시트를 사용하여 스타일을 적용하십시오. :hover 는 의사 선택기이며 CSS의 경우 스타일 시트 내에서만 의미가 있습니다. 인라인 스타일에 해당하는 것은 없습니다 (선택 기준을 정의하지 않기 때문에). OP의 의견에 대한 응답 : CSS 규칙을 동적으로 추가하는 방법에..

질문 : CSS 부모 선택기가 있습니까? 앵커 요소의 직접 부모 인 요소를 어떻게 선택합니까? 예를 들어 내 CSS는 다음과 같습니다. li < a.active { property: value; } 분명히 JavaScript로이 작업을 수행하는 방법이 있지만 CSS 레벨 2에 기본적으로 존재하는 일종의 해결 방법이 있기를 바랍니다. 내가 스타일링하려는 메뉴가 CMS에 의해 분출되고 있으므로 활성 요소를 요소로 이동할 수 없습니다 ... (내가 원하지 않는 메뉴 생성 모듈을 테마로하지 않는 한) . 어떤 아이디어? 답변 현재 CSS에서 요소의 부모를 선택할 수있는 방법이 없습니다. 방법이 있다면 현재 CSS 선택기 사양 중 하나에있을 것입니다. 선택기 레벨 3 사양 CSS 2.1 선택기 사양 즉, Sele..

질문 : GUID / UUID를 만드는 방법JavaScript에서 전역 적으로 고유 한 식별자를 만들려고합니다. 모든 브라우저에서 어떤 루틴을 사용할 수 있는지, 내장 난수 생성기를 "무작위"하고 시드했는지 등을 잘 모르겠습니다.GUID / UUID는 32 자 이상이어야하며 ASCII 범위에 있어야 전달시 문제가 발생하지 않습니다.답변RFC 4122 에 따르면 GUID (Globally Unique IDentifier)라고도하는 UUID (Universally Unique IDentifier)는 특정 고유성 보장을 제공하도록 설계된 식별자입니다.몇 줄의 JavaScript 코드에서 RFC 호환 UUID를 구현할 수 있지만 (예 : 아래 @broofa의 답변 참조) 몇 가지 일반적인 함정이 있습니다.잘못된..