반응형

css 15

인라인 CSS가 뭐가 그렇게 안 좋습니까?

인라인 CSS가 뭐가 그렇게 안 좋습니까? 웹 사이트 스타터 코드와 예제를 볼 때 CSS는 항상 "main.css", "default.css" 또는 "Site.css"와 같은 이름의 별도 파일에 있습니다.그러나 페이지를 코딩할 때 이미지에 "float: right"을 설정하는 것과 같이 종종 DOM 요소와 함께 CSS를 인라인으로 던지고 싶은 유혹을 받습니다.예를 들어 거의 하지 않기 때문에 이것이 "나쁜 코딩"이라는 느낌이 듭니다. 여러 개체에 스타일을 적용할 경우 "DON'T Repeat Yourself"(DRY)를 따라 각 요소에서 참조할 CSS 클래스에 할당하는 것이 현명하다는 것을 알고 있습니다.하지만 다른 요소에서 CSS를 반복하지 않는다면 HTML을 작성할 때 CSS를 인라인으로 작성하는 것..

sourcetip 2023.10.20

클래스 이름이 특정 문자열로 시작하는 모든 요소와 일치

클래스 이름이 특정 문자열로 시작하는 모든 요소와 일치 이 질문에는 이미 다음과 같은 답변이 있습니다. 클래스 접두사별 CSS 셀렉터가 있습니까? (4개 답변) 닫힘8년 전에. CSS3에서 특정 문자열로 시작하는 클래스 이름을 가진 요소에 대해 "와일드카드"를 사용할 수 있습니까? 예: 마법처럼 모든 걸 설정해 놓았습니다.div한 번에 저장: .myclass* { color: #f00; } 다음과 같은 방법을 사용해야 합니다. div[class^='myclass'], div[class*=' myclass']{ color: #F00; } 편집: 와일드카드 추가(*David가 제안한 대로질문에 대한 직접적인 답변은 아니지만 대부분의 경우 각 요소에 여러 클래스를 간단히 설정할 것을 제안합니다. 이 방법으로 ..

sourcetip 2023.10.15

요소의 한쪽에만 드롭 섀도우를 만드는 방법은?

요소의 한쪽에만 드롭 섀도우를 만드는 방법은? 그림자를 바닥에만 떨어뜨릴 수 있는 방법이 방법이 있습니까?저는 두 개의 이미지가 나란히 있는 메뉴가 있습니다.오른쪽 그림자는 오른쪽 이미지와 겹치기 때문에 원하지 않습니다.저는 이미지를 사용하는 것을 좋아하지 않는데, 아래쪽으로만 아래로 떨어뜨릴 수 있는 방법이 있을까요? box-shadow-bottom: 10px #FFF;아니면 비슷한 건가요? -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Stren..

sourcetip 2023.10.15

첫 번째 직접 자식만을 위한 CSS 셀렉터가 있습니까?

첫 번째 직접 자식만을 위한 CSS 셀렉터가 있습니까? 나는 다음 html을 가지고 있습니다. header contents sub contents 1 sub contents 2 그리고 다음 스타일: DIV.section DIV:first-child { ... } 어떤 이유에서인지 스타일이 "sub contents 1"에 적용되고 있는 것을 이해할 수 없습니다. "header"뿐만 아니라 . 저는 스타일의 선택자가 "섹션"이라는 클래스를 가진 디브의 첫 번째 직접 자식에게만 적용될 것이라고 생각했습니다.제가 원하는 것을 얻으려면 어떻게 셀렉터를 변경해야 합니까?당신이 올린 글은 말 그대로 "섹션 디브 안에 있고 부모의 첫 자녀인 디브를 찾아라"라는 의미입니다.서브에는 해당 설명과 일치하는 태그가 하나 포함..

sourcetip 2023.10.10

디브를 어떻게 반응형 사각형으로 스타일링 할 수 있을까요?

디브를 어떻게 반응형 사각형으로 스타일링 할 수 있을까요? 이 질문에는 이미 다음과 같은 답변이 있습니다. CSS로 디브의 종횡비 유지 (33개 답변) 닫힘8년 전에. 나는 나의 디브가 항상 너비와 같도록 높이를 조정하기를 원합니다.너비는 백분위수입니다.부모의 폭이 줄어들면 상자는 가로 세로 비율을 유지하여 감소해야 합니다. 이것을 어떻게 하는 것이 CSS입니까?거의 모든 브라우저에서 작동합니다. 드리기를 시도해보세요.padding-bottom백분율로서 Content goes here 바깥쪽 디브는 사각형을 만들고 안쪽 디브는 내용을 담고 있습니다.이 솔루션은 여러 번 효과가 있었습니다. 여기 js fiddle.원하는 것을 달성하려면 뷰포트 백분율 길이를 사용할 수 있습니다. vw. 여기 제가 jsfid..

sourcetip 2023.10.05

div 크기 유지 종횡비 응답적으로 변경

div 크기 유지 종횡비 응답적으로 변경 이 질문에는 이미 다음과 같은 답변이 있습니다. CSS로 디브의 종횡비 유지 (33개 답변) 닫힘8년 전에. 이미지에 너비 또는 높이만 지정하면 가로/세로 비율을 유지하며 증가/축소됩니다. 하지만 다른 요소와 동일한 효과를 원하는 경우에는 비율을 사용하여 너비와 높이를 함께 묶을 수 있습니까?이것은 자바스크립트가 필요 없이 순수 CSS를 사용하여 할 수 있습니다.이는 백분율이 포함된 블록의 너비에 상대적이라는 (다소 직관적이지 않은) 사실을 활용합니다.예는 다음과 같습니다. .wrapper { width: 50%; /* whatever width you want */ display: inline-block; position: relative; } .wrapper:..

sourcetip 2023.09.25

CSS를 이용하여 자녀 DIV의 폭을 부모 DIV보다 넓히는 방법이 있습니까?

CSS를 이용하여 자녀 DIV의 폭을 부모 DIV보다 넓히는 방법이 있습니까? 자식 DIV를 부모 컨테이너 DIV보다 넓은 부모 컨테이너 DIV 내에 둘 수 있는 방법이 있습니까?하위 DIV는 브라우저 뷰포트의 너비와 같아야 합니다. 예시 : 의 를 : 자식 DIV는 부모 DIV의 자식으로 남아 있어야 합니다.나는 아이 디브에 임의의 음의 마진을 설정하여 더 넓게 만들 수 있다는 것을 알고 있지만 본질적으로 브라우저의 100% 너비로 만드는 방법을 알 수 없습니다. 제가 할 수 있는 일은 알고 있습니다. .child-div{ margin-left: -100px; margin-right: -100px; } 하지만 아이의 폭이 브라우저의 폭과 같아야 합니다. 갱신하다 답변 감사합니다, 지금까지 가장 가까운 ..

sourcetip 2023.09.15

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까?

CSS에서 확인란의 테두리 스타일을 변경하는 방법은 무엇입니까? 확인란(입력) 테두리 스타일을 변경하려면 어떻게 해야 합니까?내가 넣었습니다border:1px solid #1e5180하지만 FireFox 3.5에서는 아무 일도 일어나지 않습니다! "사용하는 합니다. 예:outline: 1px solid #1e5180.사용해야 합니다. -moz-appearance:none; -webkit-appearance:none; -o-appearance:none; 그런 다음 기본 확인란 이미지/스타일을 삭제하고 스타일을 지정할 수 있습니다.어쨌든 파이어폭스에는 여전히 국경이 있을 것입니다.만약 어떤 브라우저에서 무슨 일이 일어난다면 저는 놀랄 것입니다.이것은 브라우저가 스타일을 많이 만들지 못하게 하는 뛰어난 폼 요..

sourcetip 2023.08.26

주 스크롤 막대를 항상 표시

주 스크롤 막대를 항상 표시 사용자가 웹 페이지를 방문할 때(페이지에 스크롤바 활성화를 트리거할 콘텐츠가 충분하지 않을 때) 브라우저의 수직 스크롤바를 계속 볼 수 있도록 하려면 어떤 CSS가 필요합니까?html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; } 이렇게 하면 스크롤 막대가 항상 표시되고 필요한 경우에만 활성화됩니다. 업데이트: 위의 기능이 작동하지 않는 경우 이 기능만 사용해도 됩니다. html { overflow-y:scroll; } 오버플로가 "자동"이 아닌 "스크롤"로 설정되었는지 확인합니다.따라서 OS X Lion에서 "scroll"로 설정된 오버플로는 사용 중에만 스크롤 막대가 표시된다는 점에서 auto와 더 유사합니다.따..

sourcetip 2023.08.26
반응형