magicmemo

리스트 스타일 이미지 위치를 조정하시겠습니까? 리스트 스타일 이미지의 위치를 조정하는 방법이 있습니까? 목록 항목에 패딩을 사용하면 이미지가 위치를 유지하고 패딩과 함께 이동하지 않습니다...사실 그렇지 않아요.목록 항목에 패딩이 적용되고 있으므로 목록 항목 내의 실제 내용에만 영향을 미칩니다. 배경 스타일과 패딩 스타일의 조합을 사용하면 유사한 모양을 만들 수 있습니다. li { background: url(images/bullet.gif) no-repeat left top; /* a:before{ content: "■"; position: absolute; top: -22px; left: 55px; font-size: 33px; } ":before" 의사 클래스가 있는 정사각형 문자를 사용하여 정사각..

HTML 사이트에 사용자 지정 글꼴을 설치하는 방법 저는 flash나 php를 사용하지 않고 있으며, 간단한 HTML 레이아웃에 커스텀 폰트를 추가해달라는 요청을 받았습니다."KG 준 버그" 로컬에서 다운로드했습니다. 이를 수행하기 위한 간단한 CSS 트릭이 있습니까?네, @font-face라는 CSS 기능을 사용하시면 됩니다.CSS3에서만 공식적으로 승인되었으나 CSS2에서 제안되어 구현되었으며 IE에서도 꽤 오랫동안 지원되었습니다. CSS에 다음과 같이 선언합니다. @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: ..

CSS: 컨테이너의 크기를 변경하지 않고 일부 텍스트를 굵게 표시 수평 탐색 메뉴가 있는데, 기본적으로 그냥.요소가 나란히 설정되어 있습니다.너비를 메뉴 항목의 너비로 정의하고 싶기 때문에 너비를 정의하지 않고 단순히 패딩을 사용합니다.현재 선택한 항목을 굵게 표시했습니다. 문제는 볼드체에서 단어가 약간 넓어져 나머지 요소가 왼쪽이나 오른쪽으로 약간 이동한다는 것입니다.이런 일이 일어나는 것을 막을 수 있는 영리한 방법이 있습니까?패딩에게 볼딩으로 인한 추가 폭을 무시하라고 말하는 것과 같은 것?제가 처음 생각한 것은 "활성" 요소의 패딩에서 단순히 몇 픽셀을 빼는 것이었지만, 이 양은 다양합니다. 가능하면 각 항목에 정적 너비를 설정한 후 현재 가지고 있는 패딩 솔루션과 반대로 중심을 잡는 것을 피하고..

웹 사이트에서 IE9이 호환 모드로 전환되는 이유는 무엇입니까? IE9 베타를 방금 설치했는데, 제가 만든 특정 사이트(HTML5)에서 IE9이 호환성 모드로 이동합니다. 수동으로 그렇지 않으면 호환성 모드로 전환됩니다.저는 웹사이트의 여러 부분을 제거하려고 시도했지만 변경되지 않았습니다.모든 CSS를 제거하는 것을 포함합니다.저의 다른 웹사이트에서는 잘 되고 있습니다. 또한 IE9가 사용자 설정을 기억하므로 수동으로 설정하지 마십시오. 사용자 설정을 자동으로 되돌릴 수 없습니다(또는 개인 검색 및 캐시 비우기를 통해서도 방법을 찾지 못했습니다). 어쨌든 호환성 모드로 점프하는 사이트: http://alliancesatwar.com/guide/ 정확하게 렌더링되는 하나: http://geuze.name/..

CSS를 사용하여 사용자 지정 글꼴을 사용하시겠습니까? 사이트에서 사용자 지정 글꼴을 사용하는 새로운 웹 사이트(일반 Arial, Tahoma 등 제외)를 본 적이 있습니다. 그리고 그들은 상당한 양의 브라우저를 지원합니다. 사람이 어떻게 그걸 하니?또한 가능한 경우 사람들이 글꼴을 다운로드할 수 있는 무료 액세스 권한을 갖지 못하도록 합니다.일반적으로 다음을 사용하여 사용자 정의 글꼴을 사용할 수 있습니다.@font-face당신의 CSS에.다음은 매우 기본적인 예입니다. @font-face { font-family: 'YourFontName'; /*a name to be used later*/ src: url('http://domain.example/fonts/font.ttf'); /*URL to fo..

CSS 파일에 @charset "UTF-8"을 지정하는 이유는 무엇입니까? 저는 이 지침을 수많은 CSS 파일의 첫 번째 줄로 보고 있습니다. @charset "UTF-8"; 그것은 무엇을 하며, 이 규칙이 필요합니까? 또한, 만약 내가 이 메타 태그를 내 "머리" 요소에 포함시킨다면, 그것이 내 CSS 파일에도 존재할 필요가 없겠습니까? 이 기능은 HTTP 헤더 또는 다른 메타데이터(예: 로컬 파일 시스템)별로 인코딩이 전달되지 않는 컨텍스트에서 유용합니다. 다음 스타일시트를 상상해 보십시오. [rel="external"]::after { content: ' ↗'; } 판독기가 파일을 하드 드라이브에 저장하고 당신이 파일을 생략하는 경우@charset규칙에 따라 대부분의 브라우저는 OS의 로케일 인코딩..

CSS 선택기/HTML 속성에 대시가 선호되는 이유는 무엇입니까? 과거에 저는 항상 HTML에서 클래스와 ID 속성을 정의할 때 밑줄을 사용했습니다. 지난 몇 년 동안 저는 대시로 전환했습니다. 대부분 커뮤니티의 추세에 맞추기 위해 사용했습니다. 제가 이해할 수 있었기 때문은 아닙니다. 저는 항상 대시에 더 많은 단점이 있다고 생각해 왔습니다. 하지만 이점은 없습니다. 코드 완성 및 편집 대부분의 편집자는 대시를 단어 구분 기호로 처리하기 때문에 원하는 기호를 누를 수 없습니다.클래스가 "라고 합니다.featured-product는 " 완성을 해야 합니다.featured" 이픈을입를고하력 " 료완합니다하를다니▁"합▁"▁enter완"를 완성합니다.product". 줄포함밑" 포함featured_produc..

하나의 항목을 Flexbox와 올바르게 정렬하려면 어떻게 해야 합니까? https://jsfiddle.net/vhem8scs/ 두 개의 항목을 왼쪽으로 정렬하고 하나의 항목을 플렉스 박스와 오른쪽으로 정렬할 수 있습니까?링크는 그것을 더 명확하게 보여줍니다.마지막 예는 제가 이루고 싶은 것입니다. 플렉스박스에는 코드 블록이 하나 있습니다.플로트를 사용하면 코드 블록이 네 개 있습니다.그것이 제가 플렉스박스를 선호하는 이유 중 하나입니다. HTML One Two Three One Two Three CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc..

CSS Flexbox에서 "justify-items" 및 "justify-self" 속성이 없는 이유는 무엇입니까? 플렉스 용기의 주축 및 크로스 축을 고려합니다. 출처: W3C 주축을 따라 유연한 항목을 정렬하려면 다음과 같은 특성이 있습니다. justify-content 가로축을 따라 플렉스 항목을 정렬하려면 다음과 같은 세 가지 특성이 있습니다. align-content align-items align-self 위 이미지에서 주축은 수평이고 가로축은 수직입니다.다음은 Flex 컨테이너의 기본 방향입니다. 그러나 이러한 방향은 속성과 쉽게 교환할 수 있습니다. /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex..

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) rotate(90..