CSS를 사용하여 연결된 파일 형식을 표시하는 방법은 무엇입니까?

웹을 검색하는 동안 다운로드할 수 있는 다양한 문서를 발견하게 됩니다. 때로는 다른 파일 형식으로 문서를 다운로드해야 하는 경우가 있습니다. 그러나 각각 다른 파일 형식을 포함하는 다양한 링크가 있기 때문에 필요한 파일 형식의 문서를 찾는 데 문제가 있을 수 있습니다. .docx, .png, .txt, .pdf 등이 될 수 있습니다. 일반적으로 파일 형식은 링크와 함께 지정되지 않습니다. 따라서 링크만으로는 파일 형식을 알 수 없습니다. 이 문제를 해결하려면 다운로드 링크의 파일 형식을 표시해야 합니다.

이 기사에서는 CSS를 사용하여 웹 페이지에 링크된 파일 형식을 표시하는 방법을 배웁니다.

파일 형식이 무엇인가요?

파일 형식은 문서의 내용을 표시하는 방법을 컴퓨터 프로그램에 알려주는 구조화된 방식입니다. 파일의 레이아웃, 즉 파일의 데이터 구성을 지정합니다. 특정 파일 형식을 지원하지 않는 일부 프로그램을 해당 형식으로 열면 가비지가 생성될 수 있습니다. 동일한 파일 형식의 프로그램을 열면 해당 프로그램의 모든 기능이 표시됩니다.

일반적인 파일 형식은 다음과 같습니다 -

• 텍스트 - .doc, .docs, .txt 등,

• 이미지 – .jpg, .gif, .png 등,

• 오디오 - .mp3, .mp4 등,

• 프로그램 - .html, .htm, .exe

위 문제는 CSS를 사용하여 웹페이지에 다운로드 링크의 파일 형식을 표시하면 해결될 수 있습니다. 페이지의 파일 형식에 대한 링크를 전달한 다음 Font Awesome Free 스타일을 사용하여 이미지 아이콘을 추가하면 됩니다. ::after CSS 선택기를 사용하여 지정됩니다. 또한 그 안에 있는 파일의 콘텐츠 속성을 지정해야 합니다. 해당 특정 파일 형식의 모든 링크에 아이콘을 삽입합니다.

예

예를 통해 이해해 볼까요?

으아악

웹페이지에는 세 가지 파일 형식의 링크된 문서에 대한 링크가 제공됩니다.

Font Awesome Free 5는 글꼴 모음에서 다운로드 링크 옆에 파일 형식 유형 아이콘을 추가하는 데 사용됩니다. CSS의 인라인 요소와 함께 작동합니다. Font Awesome은 다양한 용도로 사용하도록 지정된 수천 개의 아이콘 목록이 포함된 라이브러리입니다.

각 아이콘에는 고유한 유니코드 값이 있습니다. 다음은 아이콘과 해당 코드의 몇 가지 예입니다.

중심 정렬	F037
파일-pdf	F1c1
문서-송장	F570
파일-워드	F1c2
파일-엑셀	F1c3
파일-이미지	F1c5
파일-파워포인트	F1c4
파일-동영상	F1c8

[href$=".pdf"]는 CSS 속성 선택기입니다. CSS에는 3가지 속성 선택자가 있습니다. 그들은 -

• 선택기로 시작

  (^) 문자를 사용하여 선택기에 지정된 값으로 시작하는 속성 값과 요소를 일치시킵니다. 예 - "https"로 시작하는 모든 링크를 선택하려면

라고 작성하세요.

으아악

• 선택기로 끝납니다

  ($) 문자를 사용하여 선택기에 지정된 값으로 끝나는 속성 값을 가진 요소를 일치시킵니다. 예 - ".exe"로 끝나는 모든 링크를 선택하려면

으아악

• 선택기 포함

  (*) 문자를 사용하여 지정된 값을 한 번 이상 포함하는 속성 값과 요소를 일치시킵니다.

  Example - "demo"라는 폴더에 있는 모든 파일을 선택한다고 가정해 보겠습니다.

으아악

그러면 CSS 코드는 다음과 같습니다.

으아악

::after CSS 선택기는 요소의 콘텐츠 뒤에 콘텐츠를 삽입하는 데 사용됩니다. content 속성은 선택한 요소 뒤 또는 앞에 작성될 콘텐츠를 지정합니다.

예

으아악

첫 번째 문단 뒤에 "중요!"라는 단어가 추가됩니다.

태그는 원본 문서와 외부 문서를 연결하는 데 사용됩니다. 이를 통해 개발자는 문서를 외부 문서와 연결할 수 있습니다. 다양한 속성을 포함하고 있습니다. 그 내용은 다음과 같습니다 -

• rel - 원본 문서와 외부에 링크된 문서 간의 관계에 대해 논의합니다. 스타일시트, 미리 로드, 아이콘, 도움말, 대체, 작성자, 이전, 검색 등이 있습니다.

• type - 링크된 문서의 미디어 유형을 논의합니다. text/css와 같은 값을 가지고 있습니다.

  Note - type 속성이 지정되지 않은 경우 브라우저는 rel 속성을 확인하여 올바른 유형을 추측합니다.

• media - 연결된 문서를 표시하려는 장치 유형에 대해 이야기합니다. all, print, screen, tv,

와 같은 값이 있습니다.

• href - 링크된 문서의 경로를 지정합니다. 해당 값에는 URL이 포함됩니다.

• sizes - 링크된 문서의 크기를 말합니다.

예

으아악

결론

이 기사에서는 CSS의 ::after 선택기를 사용하여 웹 페이지에 파일 확장자를 표시하는 방법을 배웠습니다.

위 내용은 CSS를 사용하여 연결된 파일 형식을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!