CSS `:not(:first-child)를 사용하여 첫 번째 요소를 제외한 모든 HTML 요소를 선택하는 방법 알아보기 선택자. CSS 스타일시트에 다음 규칙 세트를 추가하면 전체 웹사이트의 모든 h2 요소에 64픽셀의 상단 여백이 생깁니다. h2 { margin-top: 64px; } 그러나 일반적으로 웹사이트의 첫 번째 h2 요소에 상단 여백을 주고 싶지 않고 다른 모든 h2 요소에 여백을 주고 싶지 않다면 어떻게 될까요? :not(:first-child) 선택기 사용 스타일시트에 다음 규칙 세트를 추가하십시
대문자 텍스트 요소에 약간의 문자 간격을 사용하면 종종 이점을 얻을 수 있는 이유와 CSS를 사용하는 방법에 대해 알아보세요. 타이포그래피에서 텍스트 요소에 대문자/모두 대문자(대문자)를 사용할 때 일반적으로 글자 사이에 약간의 숨을 쉴 수 있는 공간을 추가해야 합니다. 그렇지 않으면 너무 조여서 편안하게 읽을 수 없습니다. 문자 간격 추적이라고도 합니다. 동의어입니다. 둘 다 문자 그룹(단어) 사이의 간격을 나타냅니다. 통신에서 문자 간격이라는 용어는 웹에서 더 많이 사용되는 반면 추적은 인쇄 타이포그래피에서 더 많이 사용됩
키프레임과 다양한 CSS 애니메이션 속성을 사용하여 순수 CSS로 간단한 애니메이션 배경 색상 루프를 만드는 방법을 알아보세요. 이 예에서는 HTML <body>를 타겟팅합니다. 요소를 CSS로 직접 사용할 수 있지만 다음 코드 예제를 모든 HTML 요소, 클래스 또는 ID에 적용할 수 있습니다. 코드 이 데모를 참조로 사용할 수 있습니다. 참고:이 코드는 IE9에서 작동하지 않습니다. 애니메이션 계획 결과가 어떻게 되어야 하는지 정확히 알지 못하더라도 가고자 하는 방향에 대한 아이디어를 갖는 것이 항상 실용적입
transform을 사용하여 순수 CSS로 마우스를 가져갈 때 요소를 확대/축소하는 방법 알아보기 속성의 변환 방법:scale() . 호버 시 확대/축소 이 상자 위로 마우스를 움직여 보십시오. 원래 크기의 정확히 1.5배 크기로 조정되므로 마우스를 위로 가져가면 50% 더 커집니다. CSS transform 속성의 scale 방법은 요소의 크기를 늘리거나 줄일 수 있습니다. 3D와 2D 모두에서 작동합니다. 이 간단한 예에서는 2D를 사용합니다. 위의 예를 다시 만들려면 1개의 HTML 요소와 2개의 CSS 규칙
마우스 오버/호버(:hover ) pointer-events를 사용하여 특정 HTML 요소에 대한 이벤트 재산. 나는 최근에 내 고객 중 한 명을 위해 팀 갤러리 페이지를 만들었습니다. 각 갤러리 항목은 마우스를 위로 이동하면 색상이 변경되는 오버레이를 사용하는 UI 카드로 표시됩니다. 하지만 이 튜토리얼에 영감을 준 문제에 부딪쳤습니다. UI 카드 콘텐츠 및 구조 각 갤러리 카드 항목은 다음 요소로 구성됩니다. 직원 사진 - 흑백 직원 이름 - 흰색 직원 역할 - 백인 미묘하게 어두운 배경 오버레이 사용자가 각 카드 위로
때로는 인라인 CSS를 작성해야 합니다. HTML 이메일 템플릿에서 — 이메일/뉴스레터 제공업체에 따라 다릅니다. 그러나 인라인 CSS로 어떻게 호버 효과를 얻을 수 있습니까? 할 수 없습니다. 그러나 JavaScript의 onMouseOver를 사용하여 동일한 호버 효과를 얻을 수 있습니다. 및 onMouseOut 방법. 마우스 오버(또는 마우스 오버) 시 하이퍼링크의 색상을 파란색에서 빨간색으로 변경하고 싶다고 가정해 보겠습니다. 결과: 구독하려면 여기를 클릭하세요. 일반적으로 인라인 CSS는 이상적이지 않지만
몇 가지 CSS 속성을 추가하여 HTML 사전 태그를 100% 반응형으로 빠르게 만드는 방법을 알아보세요. 다른 튜토리얼 웹사이트에서 자주 볼 수 있는 문제는 긴 코드 조각(pre 태그)가 페이지 너비를 넘고 페이지 레이아웃이 깨집니다. 이것은 기본적으로 pre이기 때문에 발생합니다. 태그에는 CSS white-space이 있습니다. 속성이 normal로 설정됨 , 다음과 같이: pre { white-space: normal; } 문제를 해결하려면 normal을 변경하면 됩니다. pre-wrap : pre { white
동영상의 CodePen
오늘은 CSS 애니메이션을 사용하여 SVG 화살표 아이콘을 위아래로 바운스하는 방법을 배웁니다. 또한 많은 CSS 애니메이션 속성 중 일부를 사용하여 애니메이션 유형, 타이밍 및 지속 시간을 조정하는 방법을 배우게 됩니다. 이것이 왜 유용한가요? 애니메이션이 제대로 수행되면 다음을 수행할 수 있습니다. 사용자 안내 사용자의 행동 유도 사용자의 관심을 사로잡으세요(아직 관심을 갖고 있을 때). 요구사항 따라 하려면 텍스트 편집기가 필요합니다. 자체 개발 환경이 없다면 CodePen을 추천합니다. 바로 코딩을 시작할 수 있습
일부 브라우저에서 일부 웹사이트의 자동 완성 입력 필드에 끔찍한 노란색 배경색을 추가하는 이유가 궁금하십니까? 그들이 왜 그러는지 말할 수는 없지만 이 신성 모독을 빨리 없애는 방법을 알려 드리겠습니다. 계속 진행하기 전에 어린이가 없는지 확인하십시오. 이것이 왜 문제입니까? 어떤 이유에서든 디자인의 색상 팔레트가 코딱지 톤의 노란색과 잘 어울리면 그렇지 않을 수도 있습니다. 그건 그렇고, 이것은 Webkit(Chrome, Safari 및 기타 여러 브라우저) 특정 문제입니다. FireFox는 흰색 배경색을 사용합니다.
CSS를 사용하여 단어의 첫 글자를 대문자로 표시하려면 first-letter를 사용합니다. 선택기: 제목이 모두 소문자로 되어 있다고 가정해 보겠습니다. 그리고 당신은 t 이의 대문자. first-letter를 첨부하기만 하면 됩니다. h2에 대한 선택기 CSS 스타일시트에서: h2:first-letter { text-transform: capitalize; } 물론 first-letter를 적용할 수 있습니다. 클래스 속성에 대한 선택자: .name-of-class:first-letter { text-transfo
CSS를 사용하여 원형 요소 주위에 단락 텍스트 블록을 래핑하는 방법. 콘텐츠 프레젠테이션을 좀 더 흥미롭고 잡지 스타일로 만들고 싶다면 CSS를 사용하여 흥미로운 방식으로 텍스트를 정렬하고 요소에 줄 바꿈할 수 있습니다. 먼저 HTML 콘텐츠를 추가해 보겠습니다. <article> 요소에는 post라는 클래스가 있습니다. 및 <img> 요소에는 .circle라는 클래스가 있습니다. . 이제 다음 CSS를 추가하세요. .post { max-width: 800px; margin: 3rem auto
flexbox가 있다고 가정해 보겠습니다. 내부에 버튼이 있는 컨테이너: 버튼(자식 요소)을 justify-content와 수평으로 가운데 정렬하려고 하면 다음과 같은 속성: .container { height: 300px; display: flex; justify-content: center; } 그러면 버튼(자식 요소)의 높이가 상위 요소의 높이(이 경우 300px ): 이것은 아마도 당신이 원하는 것이 아닐 것입니다! 플렉스 항목을 방지하는 몇 가지 방법이 있습니다. (Flex Container의 자식)이
CSS를 사용하여 웹사이트에 YouTube 동영상을 삽입하고 모바일에서 데스크톱 기기에 이르기까지 완벽하게 반응하도록 만드는 방법을 알아보세요. YouTube에서 동영상 삽입 코드를 복사하면 <iframe> 다음과 유사한 래퍼: 불행히도 iframe은 브라우저에서 정확한 종횡비로 표시하기 위해 고정된 높이와 너비가 필요합니다. 이로 인해 iframe은 기본적으로 반응형 디자인과 호환되지 않습니다. 다행히도 상위 컨테이너에 iframe을 래핑하여 동영상을 삽입할 수 있습니다. 그런 다음 CSS로 비디오 컨테이너의
user-select를 사용하여 텍스트 선택을 비활성화하는 방법 알아보기 CSS 속성. 기본적으로 웹 브라우저를 사용하면 주어진 웹사이트에서 텍스트를 선택할 수 있습니다. 단, 실제 텍스트가 있는 이미지가 아닌 텍스트 요소입니다. 마우스나 키보드를 사용하여 텍스트를 선택할 수 있습니다. cmd + a (Mac) 또는 ctrl + a (윈도우). 그러나 어떤 이유로든 텍스트 선택을 허용하지 않으려면 어떻게 해야 합니까? CSS 속성 user-select를 사용합니다. 값을 none으로 지정합니다. : selector { u
CSS 속성 list-style-type을 사용하여 정렬되지 않은 목록에 정사각형 글머리 기호를 만드는 방법 알아보기 . 기본적으로 정렬되지 않은 목록 항목(<ul> ) 웹 페이지에서 둥근 글머리 기호를 사용합니다. 둥근 글머리 기호는 다음과 같이 스타일이 지정됩니다. ul { list-style-type: disc; } 다음과 같이 보입니다. HTML CSS 자바스크립트 글머리 기호를 정사각형으로 만들려면 기본 list-style-type을 재정의할 수 있습니다. 다음과 같은 설정: ul { list-
CSS에서 대문자 로마 숫자로 정렬된 목록의 스타일을 지정하는 방법을 알아보세요. HTML로 정렬된 목록을 만들려면 다음을 사용합니다. <ol> 태그를 사용하여 정렬된 목록 요소를 정의합니다. <li> 목록 항목 요소를 정의하는 태그입니다. 예: 기본적으로 정렬된 목록 항목은 일반 십진수로 스타일이 지정됩니다. 목록 항목 목록 항목 목록 항목 십진수가 포함된 기본 순서 목록은 모든 브라우저에 내장된 UAS(User-Agent Stylesheet)에서 가져옵니다. CSS 속성으로 정의됩니다. li
CSS에서 소문자 로마 숫자로 정렬된 목록의 스타일을 지정하는 방법을 알아보세요. HTML로 정렬된 목록을 만들려면 다음을 사용합니다. <ol> 태그를 사용하여 정렬된 목록 요소를 정의합니다. <li> 목록 항목 요소를 정의하는 태그입니다. 예: 기본적으로 정렬된 목록 항목은 일반 십진수로 스타일이 지정됩니다. 목록 항목 목록 항목 목록 항목 십진수가 포함된 기본 순서 목록은 모든 브라우저에 내장된 UAS(User-Agent Stylesheet)에서 가져옵니다. CSS 속성으로 정의됩니다. li
웹페이지 레이아웃을 CSS로 가운데 정렬하는 두 가지 방법을 알아보세요. 웹사이트의 기사 레이아웃 스타일을 지정하고 <article> 중앙 정렬을 원한다고 가정해 보겠습니다. 요소를 페이지 중앙에 가로로 정확히 배치합니다. 몇 가지 방법으로 할 수 있습니다. 요소를 가로로 가운데 정렬하는 가장 간단하고 고전적인 접근 방식은 CSS 속성 margin을 사용하는 것입니다. 왼쪽 및 오른쪽 값을 auto로 설정합니다. . 무료 CodePen 편집기를 사용하여 따라할 수 있습니다. 기사 레이아웃에 대해 다음과 같은 기본
CSS 속성 background-image를 사용하는 경우 이미지를 웹사이트에 배경으로 삽입하려면 할 수 있습니다. 귀하의 이미지가 웹페이지의 너비와 높이를 채우기 위해 무한히 반복되는 것을 발견했습니다. 이는 기본적으로 브라우저에 background-repeat CSS 속성이 있기 때문에 발생합니다. repeat으로 설정 . 배경 이미지가 반복되지 않도록 하려면 기본 repeat를 재정의하면 됩니다. no-repeat이 있는 값 , 다음과 같이: body { background-image: url(path-to-image.