css 14

중앙 하나와 오른쪽/왼쪽 정렬 다른 플렉스박스 요소

중앙 하나와 오른쪽/왼쪽 정렬 다른 플렉스박스 요소 는 를 싶습니다.A B그리고.C가운데에 정렬된 어떻게 하면 될까요?D오른쪽으로 완전히 이동하는 것? 이전: 이후: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } A B C D https://jsfiddle.net/z44p7bsx/다음은 이 레이아웃을 달성하기 위한..

programing 2023.10.11

웹사이트에서 구글 로보토 글꼴을 사용하려면 어떻게 해야 합니까?

웹사이트에서 구글 로보토 글꼴을 사용하려면 어떻게 해야 합니까? 웹 사이트에서 Google의 Roboto 글꼴을 사용하고 싶고 이 자습서를 따르고 있습니다. http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 다음과 같은 폴더 구조의 파일을 다운로드했습니다. 이제 세 가지 질문이 있습니다. 에 .media/css/main.css. 그럼 폴더는 어디에 두어야 .까? 하여 에서 allot,svg 요를 ?fonts폴더? css 파일 fonts.css를 만들고 기본 템플릿 파일에 포함해야 합니까? 그가 사용하는 예시는 @font-face { font-family: 'Roboto'; src: url('Roboto-ThinItalic..

programing 2023.10.06

CSS selector - 주어진 자식이 있는 요소

CSS selector - 주어진 자식이 있는 요소 이 질문에는 이미 다음과 같은 답변이 있습니다. CSS 부모 선택기가 있습니까? (33개 답변) 닫힘9년 전에. 특정 자식 요소가 있으면 모든 요소를 선택할 수 있는 선택기를 만들려고 합니다.예를 들어, 모두 선택아이를 데리고. 가능할까요? 특정 자식 요소가 포함된 경우 요소를 선택할 수 있습니까? 아쉽게도 아직. CSS2 및 CSS3 셀렉터 사양은 어떤 종류의 부모 선택도 허용하지 않습니다. 사양 변경 사항에 대한 참고 사항 이것은 지금부터 이 게시물의 정확성에 대한 고지 사항입니다.CSS의 부모 선택자는 수년간 논의되어 왔습니다.합의점을 찾지 못했기 때문에 변화가 계속 일어나고 있습니다.이 답변을 최신 상태로 유지하도록 노력하겠지만, 사양 변경으로 ..

programing 2023.09.21

그라디언트 배경과 함께 CSS3 전환

그라디언트 배경과 함께 CSS3 전환 나는 호버에서 배경 기울기가 희미해지도록 썸네일 위에 CSS를 사용하여 호버에서 전환하려고 합니다.전환이 작동하지 않지만, 단순히 다음으로 변경하면 됩니다.rgba() 작동합니다. value,잘합니다.그래디언트가 지원되지 않습니까?저도 이미지를 사용해봤는데, 이미지 전환도 안 됩니다. 다른 게시물에서 누군가가 한 것처럼 가능하다는 것은 알지만, 어떻게 정확하게 했는지는 알 수 없습니다.도움말> 작업할 CSS가 있습니다. #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linea..

programing 2023.09.06

호버에 굵게 표시된 경우 인라인 요소가 이동합니다.

호버에 굵게 표시된 경우 인라인 요소가 이동합니다. HTML 목록과 CSS를 사용하여 가로 메뉴를 만들었습니다.링크 위에 마우스를 올려 놓을 때를 제외하고는 모든 것이 정상적으로 작동합니다.보시다시피 링크에 대해 굵은 호버 상태를 생성했는데, 이제 굵은 크기 차이로 인해 메뉴 링크가 이동합니다. 이 SitePoint 게시물과 동일한 문제가 발생합니다.하지만, 그 게시물에는 적절한 해결책이 없습니다.저는 해결책을 찾기 위해 모든 곳을 검색했지만 찾을 수 없었습니다.확실히 나만 이렇게 하려고 할 수는 없습니다. 아이디어 있는 사람? 추신: 저는 메뉴 항목의 텍스트 너비를 모르기 때문에 li 항목의 너비만 설정할 수 없습니다. .nav { margin: 0; padding: 0; } .nav li { list..

programing 2023.09.01

수평줄 가운데에 가운데 텍스트 추가

수평줄 가운데에 가운데 텍스트 추가 이 질문에는 이미 다음과 같은 답이 있습니다. 중간에 단어가 있는 수평선에 대한 CSS 기법 (34개 답변) 마감됨2년 전에. 나는 xhtml 1.0 strict에서 텍스트의 양쪽에 줄을 만들기 위해 어떤 옵션이 있는지 궁금합니다. 섹션 1다음 섹션 -------------------------섹션 2 저는 다음과 같은 멋진 일들을 해볼 생각을 했습니다. Next section 또는 위에 정렬(수직 및 수평) 문제가 있기 때문에 다음을 수행합니다. Next section 이것은 정렬 문제도 가지고 있는데, 이 엉망진창으로 해결 방법은 다음과 같습니다. Next section 정렬 문제 외에도 두 가지 옵션 모두 '퍼지'하게 느껴지는데, 혹시 이전에 이를 보고 우아한 해..

programing 2023.09.01

div에 1px 테두리를 추가하면 div 크기가 증가합니다. 원하지 않습니다.

div에 1px 테두리를 추가하면 div 크기가 증가합니다. 원하지 않습니다. 이 질문에는 이미 다음과 같은 답이 있습니다. 가장자리가 아닌 div 내부에 테두리 배치 (15개 답변) 마감됨1년 전에. 추가합니다를 클릭하면 1px 경계가 div로 이동하므로 Div 크기가 2px X 2px 증가합니다.저는 div 사이즈를 늘리고 싶지 않습니다.그렇게 하는 간단한 방법이 있습니까? 지저분하고 상세한 설명 실제로 저는 float:left(아이콘과 같은 크기)를 가진 DIV를 container-div에 추가하고 있기 때문에 모든 것이 차례로 쌓이고, container-div 너비가 300px일 때는 공간이 남아 있지 않아 하위 DIV가 다음 행에 오게 되므로 카탈로그와 비슷하지만 테두리만 선택된 DIV 크기가 ..

programing 2023.08.27

하위 요소에 영향을 주지 않고 배경 이미지의 불투명도 설정

하위 요소에 영향을 주지 않고 배경 이미지의 불투명도 설정 하위 요소의 불투명도에 영향을 미치지 않고 배경 이미지의 불투명도를 설정할 수 있습니까? 예 바닥글의 모든 링크에는 사용자 정의 글머리표(배경 이미지)가 필요하며 사용자 정의 글머리표의 불투명도는 50%여야 합니다. HTML Link 1 Link 2 Link 3 Link 4 Link 5 CSS #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; } 내가 시도한 것 목록 항목의 불투명도를 50%로 설정하려고 했지만 링크 텍스트의 불투명도도 50%입니다. 그리고 하위 요소의 불투명도를 재설정할 수 있는 방법이 없는 것 같습니다. #footer ul li { background: u..

programing 2023.08.22

최대 높이의 자식: 100%가 상위 항목으로 넘칩니다.

최대 높이의 자식: 100%가 상위 항목으로 넘칩니다. 저는 제게 예상치 못한 행동으로 보이는 것을 이해하려고 노력하고 있습니다. 컨테이너 내부에 최대 높이가 100%인 요소가 있는데, 이 요소도 최대 높이를 사용하지만 예기치 않게 자식 요소가 상위 항목을 오버플로합니다. .container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; } img { display: block; max-height: 100%; max-width: 100%; } 그러나 상위 항목에 명시적인 높이가 지정된 경우 이는 고정됩니다. .container { background: blue; padding: 10px; max-height: 200px;..

programing 2023.08.22

부트스트랩 입력 포커스 파란색 표시 변경

부트스트랩 입력 포커스 파란색 표시 변경 부트스트랩을 변경하는 방법을 아는 사람?input:focus▁▁an빛을 클릭하면 나타나는 빛input 야전?결국 나는 bootstrap.css의 다음 css 항목을 변경했습니다. textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, inpu..

programing 2023.08.12