CSS 속성 선택기로 HTML의 DNA 연결하기
게시 됨: 2022-03-10내 경력의 대부분 동안 속성 선택기는 과학보다 더 마술적이었습니다. 나는 아무것도 이해하지 못한 채 인쇄 스타일 시트에 링크를 출력하는 CSS를 멍하니 쳐다보고 있을 것입니다. 나는 충실히 복사하여 인쇄 스타일시트에 붙여넣은 다음, 가장 큰 불타는 쓰레기 더미가 있는 프로젝트를 내놓기 위해 달려갔습니다.
그러나 더 이상 CSS 속성 선택기를 느슨하게 응시할 필요가 없습니다. 이 기사가 끝나면 이를 사용하여 사이트에서 진단을 실행하고 해결할 수 없는 문제를 수정하며 마술처럼 느껴질 정도로 고급 기술 경험을 생성할 수 있습니다. 당신은 내가 너무 많은 것을 약속하고 당신이 옳다고 생각할 수도 있지만 일단 속성 선택자의 힘을 이해하고 나면 자신을 과장하고 싶은 생각이 들 수도 있습니다.
가장 기본적인 수준에서 HTML 속성을 대괄호 안에 넣고 다음과 같이 속성 선택기라고 부릅니다.
[href] { color: chartreuse; } href 가 있고 더 구체적인 선택기가 없는 모든 요소의 텍스트는 이제 마법처럼 차트로 돌아갑니다. 속성 선택자 특이성은 클래스와 동일합니다.
참고 : CSS 특성인 케이지 매치에 대한 자세한 내용은 "CSS 특성: 알아야 할 사항" 또는 Star Wars: "CSS 특성 전쟁"을 좋아하는 경우 읽을 수 있습니다.
그러나 속성 선택기로 훨씬 더 많은 일을 할 수 있습니다. DNA와 마찬가지로 모든 종류의 속성 조합과 값을 선택하는 데 도움이 되는 논리가 내장되어 있습니다. 태그, 클래스 또는 id 선택기와 같은 방식으로 정확히 일치하는 대신 모든 속성 및 속성 내의 문자열 값까지 일치시킬 수 있습니다.
속성 선택
속성 선택자는 단독으로 존재하거나 더 구체적일 수 있습니다. 예를 들어 title 속성이 있는 모든 div 태그를 선택해야 하는 경우입니다.
div[title]그러나 다음을 수행하여 제목이 있는 div의 자식을 선택할 수도 있습니다.
div [title]명확히 하자면, 그들 사이에 공백이 없다는 것은 속성이 동일한 요소에 있다는 것을 의미하고(공백이 없는 요소와 클래스처럼), 그들 사이의 공백은 하위 선택자를 의미합니다. 즉, 속성이 있는 요소의 자식을 선택하는 것입니다.
속성 값을 포함하여 속성을 선택하는 방법을 훨씬 더 세분화할 수 있습니다.
div[title="dna"]위는 "dna"라는 정확한 제목을 가진 모든 div를 선택합니다. 각각의 경우(및 그 이상)를 처리하는 선택기 알고리즘이 있지만 "dna is Awesome" 또는 "dnamutation"이라는 제목은 선택되지 않습니다. 곧 알려드리겠습니다.
참고 : 대부분의 경우 속성 선택기에는 따옴표가 필요하지 않지만 명확성을 높이고 가장자리 경우가 적절하게 작동하도록 하기 때문에 따옴표를 사용하겠습니다.
'내 아름다운 dna'나 '변이 dna는 재미있다!'와 같이 공백으로 구분된 목록에서 'dna'를 선택하고 싶다면 등호 앞에 물결표 또는 "구불구불한 모양"을 추가할 수 있습니다.
div[title~="dna"]"dontblamemeblamemydna" 또는 "his-stupidity-is-from-upbringing-not-dna"와 같은 제목을 선택한 다음 달러 기호 $를 사용하여 제목의 끝 부분과 일치시킬 수 있습니다.
[title$="dna"]"dnamutants" 또는 "dna-splicing-for-all"의 제목과 같은 속성 값의 앞부분을 일치시키려면 캐럿을 사용하십시오.
[title^="dna"]정확히 일치하는 것이 도움이 되지만 선택 항목이 너무 좁고 캐럿 전면 일치가 필요에 비해 너무 넓을 수 있습니다. 예를 들어 "계보"라는 제목을 선택하지 않고 "유전자"와 "유전자 데이터"를 모두 선택하고 싶을 수 있습니다. 파이프 문자(또는 세로 막대)가 바로 그것입니다. 정확한 일치를 수행하지만 정확한 일치 다음에 대시가 오는 경우가 포함됩니다.
[title|="gene"]마지막으로 모든 하위 문자열과 일치하는 전체 검색 속성 연산자가 있습니다.
[title*="dna"]그러나 위의 내용은 "I-like-my-dna-like-my-meat-rare" 및 "edna", "kidnapping" 및 "echidnas"(Edna가 실제로 해서는 안 되는 일)와 일치하므로 현명하게 사용하십시오. )
이러한 속성 선택기를 더욱 강력하게 만드는 것은 스택이 가능하기 때문에 여러 일치 요소가 있는 요소를 선택할 수 있습니다.
그러나 제목이 있고 클래스가 "genes"로 a 태그를 찾아야 합니까? 방법은 다음과 같습니다.
a[title][class$="genes"]HTML 요소의 속성을 선택할 수 있을 뿐만 아니라 유사 "과학"(의사 요소 및 콘텐츠 선언을 의미)을 사용하여 돌연변이된 유전자를 인쇄할 수도 있습니다.
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }위의 코드는 호버에서 작성된 최악의 농담 중 하나에 대한 답변을 보여줍니다.
마지막으로 알아야 할 것은 속성 검색을 대소문자를 구분하지 않도록 플래그를 추가할 수 있다는 것입니다. 닫는 대괄호 앞에 i 를 추가합니다.
[title*="DNA" i]따라서 "dna", "DNA", "dnA" 및 기타 변형과 일치합니다.
이것의 유일한 단점은 i 가 Firefox, Chrome, Safari, Opera 및 소수의 모바일 브라우저에서만 작동한다는 것입니다.
속성 선택기로 선택하는 방법을 살펴보았으므로 이제 몇 가지 사용 사례를 살펴보겠습니다. 일반 용도 와 진단 의 두 가지 범주로 나누었습니다.
일반 용도
입력 유형별 스타일
이메일과 전화와 같이 입력 유형의 스타일을 다르게 지정할 수 있습니다.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }전화 링크 표시
특정 크기의 전화번호를 숨기고 대신 전화 링크를 표시하여 전화로 더 쉽게 전화를 걸 수 있습니다.
span.phone { display: none; } a[href^="tel"] { display: block; }내부 대 외부 링크, 보안 대 비보안
내부 및 외부 링크를 다르게 처리하고 보안 링크의 스타일을 안전하지 않은 링크와 다르게 지정할 수 있습니다.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }아이콘 다운로드
HTML5가 우리에게 준 속성 중 하나는 브라우저에 파일을 열려고 하지 않고 다운로드하도록 지시하는 "다운로드"였습니다. 이것은 사람들이 액세스하기를 원하지만 지금은 열지 않기를 원하는 PDF 및 DOC에 유용합니다. 또한 연속으로 많은 파일을 다운로드하는 워크플로를 더 쉽게 만듭니다. download 속성의 단점은 더 전통적인 링크와 구별하는 기본 비주얼이 없다는 것입니다. 종종 이것이 원하는 것이지만 그렇지 않은 경우 아래와 같이 할 수 있습니다.
a[download]:after { content: url(download-arrow.svg); }PDF, DOCX, ODF 등과 같은 다양한 아이콘을 사용하여 파일 형식을 전달할 수도 있습니다.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }속성 선택기를 쌓아서 해당 아이콘이 다운로드 가능한 링크에만 있는지 확인할 수도 있습니다.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }더 이상 사용되지 않는/사용되지 않는 코드 재정의 또는 재적용
우리는 모두 오래된 코드가 있는 오래된 사이트를 접했지만 때로는 코드를 업데이트하는 것이 6,000페이지에 걸쳐 수행하는 데 시간을 할애할 가치가 없습니다. HTML5 이전에 속성으로 구현된 스타일을 재정의하거나 다시 적용해야 할 수도 있습니다.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }특정 인라인 스타일 재정의
때때로 당신은 작업을 고무적으로 만드는 인라인 스타일을 접하게 되지만 그것들은 당신이 통제할 수 없는 코드에서 온 것입니다. 변경할 수 있는 경우 이상적이라고 말해야 하지만 변경할 수 없는 경우 해결 방법이 있습니다.
참고 : 재정의하려는 정확한 속성과 값을 알고 있고 표시되는 모든 위치에서 재정의하려는 경우 가장 잘 작동합니다.
이 예에서 요소의 여백은 픽셀로 설정되지만 사용자가 기본 글꼴 크기를 변경하는 경우 요소가 적절하게 다시 조정할 수 있도록 확장하고 em 으로 설정해야 합니다.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } 참고 : 이 접근 방식은 이 스타일을 무시해야 하는 것처럼 매우 주의해서 사용해야 합니다 !important 전쟁에 빠지고 새끼 고양이가 죽을 것입니다.
파일 형식 표시
파일 입력에 허용되는 파일 목록은 기본적으로 표시되지 않습니다. 일반적으로 우리는 그것들을 노출하기 위해 의사 요소를 사용하고, 대부분의 input 태그(또는 Firefox나 Edge에서는 전혀)에 의사 요소를 할 수 없지만 파일 입력에는 사용할 수 있습니다.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }HTML 아코디언 메뉴
잘 알려지지 않은 details 와 summary 태그 듀오는 HTML만으로 확장/아코디언 메뉴를 만드는 방법입니다. 세부 정보는 summary 태그와 아코디언이 열릴 때 표시하려는 콘텐츠를 모두 래핑합니다. 요약을 클릭하면 detail 태그가 확장되고 열린 속성이 추가됩니다. open 속성을 사용하면 닫힌 details 정보 태그와 다른 방식으로 열린 details 태그의 스타일을 쉽게 지정할 수 있습니다.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }링크 인쇄
URL을 인쇄 스타일로 표시하면 속성 선택기를 이해하는 데 도움이 되었습니다. 이제 직접 구성하는 방법을 알아야 합니다. href 를 사용 a 모든 태그를 선택하고 의사 요소를 추가하고 attr() 및 content 를 사용하여 인쇄하기만 하면 됩니다.
a[href]:after { content: " (" attr(href) ") "; }사용자 정의 도구 설명
사용자 정의 도구 설명을 만드는 것은 속성 선택기를 사용하면 재미있고 쉽습니다(나 같은 괴짜라면 재미있지만 어느 쪽이든 쉽습니다).
참고 : 이 코드는 일반적으로 사용자를 알 수 있지만 사이트 환경과 나보다 취향이 좋은지 여부에 따라 간격, 패딩 및 색 구성표에 약간의 조정이 필요할 수 있습니다.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }액세스 키
웹의 좋은 점 중 하나는 정보 액세스를 위한 다양한 옵션을 제공한다는 것입니다. 거의 사용되지 않는 속성 중 하나는 액세스 키를 설정하여 accesskey 항목에 액세스 키가 설정한 문자와 키 조합을 통해 직접 액세스할 수 있도록 하는 기능 accesskey (정확한 키 조합은 브라우저에 따라 다름). 그러나 웹사이트에 어떤 키가 설정되었는지 쉽게 알 수 있는 방법은 없습니다.
다음 코드는 해당 키를 :focus 에 표시합니다. accesskey 가 필요한 대부분의 사람들은 마우스를 사용하는 데 문제가 있는 사람들이기 때문에 hover 를 사용하지 않습니다. 두 번째 옵션으로 추가할 수 있지만 이것이 유일한 옵션이 아닌지 확인하십시오.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }진단
이러한 옵션은 빌드 프로세스 중 또는 문제 해결을 시도하는 동안 로컬에서 문제를 식별하는 데 도움이 됩니다. 이를 프로덕션 사이트에 배치하면 사용자에게 오류가 눈에 띄게 됩니다.
컨트롤 없는 오디오
나는 audio 태그를 너무 자주 사용하지 않지만 사용할 때 종종 controls 속성을 포함하는 것을 잊습니다. 결과: 아무것도 표시되지 않습니다. Firefox에서 작업하는 경우 이 코드는 오디오 요소가 숨겨져 있거나 구문 또는 기타 문제로 인해 표시되지 않는 경우(Firefox에서만 작동) 문제를 해결하는 데 도움이 될 수 있습니다.
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }대체 텍스트 없음
대체 텍스트가 없는 이미지는 물류 및 접근성의 악몽입니다. 페이지만 보면 찾기 어렵지만, 이것을 추가하면 바로 튀어나옵니다.
참고 : 테두리가 요소의 너비에 추가되어 레이아웃을 엉망으로 만들 수 있기 때문에 테두리 border 개요를 outline 합니다 . outline 은 너비를 추가하지 않습니다.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }비동기 자바스크립트 파일
웹 페이지는 컨텐츠 관리 시스템과 플러그인, 프레임워크와 코드의 집합체일 수 있습니다. Ted(세 칸에 걸쳐 앉아 있음)는 사이트가 다운되었고 상사를 두려워했기 때문에 휴가 중에 작성한 코드입니다. JavaScript가 비동기적으로 로드되는 것과 그렇지 않은 것을 파악하면 페이지 성능을 향상시킬 위치에 집중하는 데 도움이 됩니다.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }자바스크립트 이벤트 요소
JavaScript 이벤트 속성이 있는 요소를 강조 표시하여 JavaScript 파일로 리팩터링할 수도 있습니다. 여기서는 OnMouseOver 속성에 중점을 두었지만 모든 JavaScript 이벤트 속성에 대해 작동합니다.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }숨겨진 항목
숨겨진 요소 또는 숨겨진 입력이 있는 위치를 확인해야 하는 경우 다음을 사용하여 표시할 수 있습니다.
[hidden], [type="hidden"] { display: block; }그러나 이러한 모든 놀라운 기능에는 반드시 함정이 있어야 한다고 생각합니다. 확실히 속성 선택기는 Chrome 또는 Safari Edge의 Fiery Foxes 야간 빌드에서 플래그가 지정된 동안에만 작동해야 합니다. 이것은 사실이기에는 너무 좋습니다. 그리고 불행히도 함정이 있습니다.
가장 사랑받는 브라우저, 즉 IE6에서 속성 선택기로 작업하고 싶다면 그렇게 할 수 없습니다. (괜찮습니다. 눈물을 흘리게 두십시오. 판단은 하지 마세요.) 다른 곳은 거의 다 가도 좋습니다. 속성 선택기는 CSS 2.1 사양의 일부이므로 10년 동안 브라우저에 있었습니다.
따라서 이러한 선택기는 더 이상 마술이 아니라 충분히 발전된 기술로 밝혀져야 합니다. 그들은 마법보다 과학에 가깝고, 이제 그들의 가장 깊은 비밀을 알았으니 그것은 당신에게 달려 있습니다. 웹에서 과학의 불가사의를 신비하게 만드는 일을 하십시오.