css 17

CSS: 글꼴 크기 100% - 무엇의 100%?

CSS: 글꼴 크기 100% - 무엇의 100%? 백분율 크기와 다른 크기의 글꼴에 대한 기사와 질문이 많습니다.그러나 백분율 값의 기준이 무엇인지 알 수 없습니다.이것은 '모든 브라우저에서 동일한 크기'인 것으로 알고 있습니다.예를 들어 이 글도 읽었습니다. 백분율(%):백분율 단위는 몇 가지 기본적인 차이를 제외하고는 "em" 단위와 매우 유사합니다.우선, 현재 글꼴 크기는 100%(즉, 12pt = 100%)와 같습니다.백분율 단위를 사용하는 동안 텍스트는 모바일 장치와 접근성을 위해 완벽하게 확장 가능합니다. 출처 : http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ 즉, 라고 하면 먼저 " 12 pt 100%"라는 ..

programing 2023.10.24

CSS의 비율에 따라 색상을 더 밝게 또는 더 어둡게 동적으로 변경

CSS의 비율에 따라 색상을 더 밝게 또는 더 어둡게 동적으로 변경 우리는 사이트에 큰 애플리케이션을 가지고 있고 몇 개의 링크가 있는데, 예를 들어 이 사이트의 파란색 링크와 같은 파란색입니다.이제 좀 더 밝은 색으로 다른 링크를 만들고 싶습니다.분명히 CSS 파일에 헥스 코드를 추가하면 간단히 할 수 있지만, 우리 사이트는 사용자가 맞춤형 프로필/사이트(트위터와 같은)에 어떤 색상을 원하는지 결정할 수 있습니다. 그래서, 제 질문은, 색을 백분율로 줄일 수 있을까요? 다음 코드가 CSS라고 가정해 보겠습니다. a { color: blue; } a.lighter { color: -50%; /* obviously not correct way, but just an idea */ } 오어 a.lighter..

programing 2023.10.24

Visual Studio에서 디버깅하는 동안 Chrome 브라우저가 .css 파일을 강제로 다시 로드하도록 하는 방법은 무엇입니까?

Visual Studio에서 디버깅하는 동안 Chrome 브라우저가 .css 파일을 강제로 다시 로드하도록 하는 방법은 무엇입니까? 현재 Visual Studio 2012(디버그 모드) 내부에서 .css 파일을 편집하고 있습니다.저는 크롬을 브라우저로 사용하고 있습니다.Visual Studio 내에서 응용 프로그램의 .css 파일을 변경하고 저장하면 .css 파일의 업데이트된 변경 내용과 함께 페이지를 새로 고치지 않습니다..css 파일은 아직 캐시되어 있는 것 같습니다. 시도해 본 결과: CTRL / F5 Visual Studio 2012에서 프로젝트 속성으로 이동, 웹 탭 작업 시작 섹션에서 외부 프로그램 시작 선택 붙여넣기 또는 Google Chrome 경로 찾아보기(마인은 C:\Users\xxxx..

programing 2023.10.24

auto는 마진에서 무엇을 합니까: 0 auto?

auto는 마진에서 무엇을 합니까: 0 auto? 무엇인가.auto인으로 하다margin: 0 auto;? 무슨 일인지 이해할 수 없는 것 같습니다.auto가끔은 물체를 중심에 놓는 효과가 있다는 걸 알아요지정한 경우width사용자가 적용한 개체에 대해margin: 0 autoto, 개체는 상위 컨테이너 내의 중앙에 위치합니다. 지정하기auto두 번째 매개 변수는 기본적으로 브라우저가 왼쪽 및 오른쪽 여백 자체를 자동으로 결정하도록 지시하며, 이를 동일하게 설정하여 수행합니다.왼쪽 여백과 오른쪽 여백이 동일한 크기로 설정됨을 보장합니다.첫 번째 모수 0은 상단 여백과 하단 여백이 모두 0으로 설정됨을 나타냅니다. margin-top: 0; margin-bottom: 0; margin-left: auto;..

programing 2023.10.19

모바일 보기에서 맨 위에 부트스트랩 오른쪽 열

모바일 보기에서 맨 위에 부트스트랩 오른쪽 열 부트스트랩 페이지는 다음과 같습니다. A B 다음과 같습니다. ----- |A|B| ----- 그래서 모바일 기기로 보면 A열이 맨 위에 있는데 B열이 맨 위에 있었으면 좋겠습니다.가능한가요?당기는 동작으로 해봤지만 소용이 없었습니다.이 작업을 수행하려면 열 순서를 사용합니다. col-md-push-6열을 오른쪽 6으로 "push"하고col-md-pull-6는 "md" 이상의 뷰 포트에서 열을 왼쪽으로 "pull"합니다.작은 뷰 포트에서는 열이 다시 정상 순서로 정렬됩니다. 사람들을 불쾌하게 하는 것은 HTML에서 A 위에 B를 올려놓아야 한다는 것입니다. HTML에서 A가 B 위에 올라갈 수 있는 다른 방법이 있을 수 있지만, 어떻게 해야 하는지 잘 모르겠..

programing 2023.10.04

마지막 자식을 제외한 요소의 모든 자식을 선택하려면 어떻게 해야 합니까?

마지막 자식을 제외한 요소의 모든 자식을 선택하려면 어떻게 해야 합니까? CSS3 셀렉터를 사용하여 마지막 자식을 제외한 모든 것을 어떻게 선택합니까? 예를 들어, 마지막 아이만 얻는 것은div:nth-last-child(1).부정 의사 클래스를 의사 클래스에 대해 사용할 수 있습니다.CSS Selectors Level 3이 도입되어 IE8 이하에서는 작동하지 않습니다. :not(:last-child) { /* styles */ } 단순화: 스타일을 모든 div에 적용하고 last-child로 마지막 div를 다시 초기화할 수 있습니다. 예를 들어 CSS의 경우: .yourclass{ border: 1px solid blue; } .yourclass:last-child{ border: 0; } 또는 SC..

programing 2023.09.19

장고 형태의 CSS 스타일링

장고 형태의 CSS 스타일링 저는 다음과 같은 스타일을 원합니다. forms.py : from django import forms class ContactForm(forms.Form): subject = forms.CharField(max_length=100) email = forms.EmailField(required=False) message = forms.CharField(widget=forms.Textarea) contact_form.dll: {{ form.as_table }} 예를 들어, 클래스 또는 ID를 설정하는 방법subject,email,message외부 스타일 시트를 제공하는 용도는 무엇입니까?제 답변에서 발췌한 내용:장고에서

programing 2023.09.04

CSS 셀렉터에서 '>'와 공백의 차이점은 무엇입니까?

CSS 셀렉터에서 '>'와 공백의 차이점은 무엇입니까? 이 구문을 사용하는 이유는 무엇입니까? div.card > div.name 이것과 무엇이 다릅니까? div.card div.name A > B에서는 A에 직접 연결된 자식인 B만 선택합니다(즉, 그 사이에 다른 요소가 없음). A B는 A 내부에 있는 모든 B를 선택합니다. 두 B 사이에 다른 요소가 있는 경우에도 마찬가지입니다.>하위 선택기입니다.직접 하위 요소만 지정합니다. 공백( )는 하위 선택기입니다.모든 후손(손주, 손주 등)을 지정합니다. 하위 선택기는 IE 6 이하에서 지원되지 않습니다.훌륭한 호환성 표가 여기 있습니다.> 대 공간 두 가지 시나리오를 고려합니다.div > span { }대.div span { } 자, 그. (space)..

programing 2023.09.04

이 CSS 선택기는 무엇입니까?[class*="span"]

이 CSS 선택기는 무엇입니까?[class*="span"] 트위터 부트스트랩에서 이 선택기를 보았습니다. .show-grid [class*="span"] { background-color: #eee; text-align: center; border-radius: 3px; min-height: 30px; line-height: 30px; } 이 기술이 무엇이라고 불리고 무엇을 하는지 아는 사람이 있습니까?속성 와일드카드 선택기입니다.당신이 준 샘플에서 아래의 하위 요소를 찾습니다..show-grid다음을 포함하는 클래스가 있습니다.span. 그래서 선택할 것입니다.이 예제의 요소: Blah blah 'begins with...'에 대한 검색도 수행할 수 있습니다..' div[class^="something..

programing 2023.08.30

다음을 사용하여 요소 뒤에 공백("")을 추가합니다.

다음을 사용하여 요소 뒤에 공백("")을 추가합니다. 일부 내용 뒤에 빈 공간을 추가하고 싶지만,content: " ";효과가 없는 것 같습니다. 내 코드는 다음과 같습니다. h2:after { content: " "; } 이것은 작동하지 않지만, 이것은 다음과 같습니다. h2:after { content: "-"; } 내가 뭘 잘못하고 있는 거지?이스케이프 유니코드를 통해 지정해야 합니다.이 질문은 관련이 있고 답을 포함하고 있습니다. 해결책: h2:after { content: "\00a0"; } 설명. 코드에 공백이 삽입됩니다. h2::after { content: " "; } 그러나 즉시 제거됩니다. 익명 인라인 상자에서 이후 '화이트스페이스' 속성에 따라 축소되는 화이트스페이스 콘텐츠는 익명 인..

programing 2023.08.30