자바스크립트 CSS 이후

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

CSS:: 선택한 요소 앞에 선택 내용이 삽입됩니다. CSS: 지정된 요소 뒤의 삽입 내용 뒤. 이러한 선택기는 일반적으로 단락이나 링크의 앞이나 뒤에 텍스트를 추가하는 데 사용됩니다.

웹사이트를 디자인할 때 페이지의 콘텐츠 앞이나 뒤에 콘텐츠를 추가할 수 있습니다. 요소. 예를 들어, 목록의 각 글머리 기호 앞에 이미지를 추가할 수 있습니다.

여기:: 전후:: 의사 CSS 요소가 들어옵니다. 이러한 의사 요소를 사용하면 앞이나 뒤에 내용을 삽입할 수 있습니다. 요소의 내용 뒤에 있습니다.

이 자습서에서는 예제를 참조하여 웹 페이지의 내용을 장식하기 위해:: before 및 after:: 의사 요소를 사용하는 방법에 대해 설명합니다. 이 튜토리얼을 다 읽을 때쯤이면 CSS에서:: before and after:: pseudo-elements를 사용하는 전문가가 될 것입니다.

CSS pseudo-elements

A pseudo-elements element는 CSS 선택기로 선택한 요소의 특정 부분에 스타일을 지정할 수 있는 특수 키워드입니다. 이 기사에서는 각 의사 요소가 선택기이기 때문에 의사 요소를 선택자로 부를 것입니다.

의사 요소는 CSS 또는 클래스 ID 를 요소에 추가합니다. 예를 들어, 웹 페이지의 각 링크 뒤에 ">" 화살표를 추가하려는 경우 유사 요소를 사용할 수 있습니다.

CSS는 다양한 유사 요소를 제공합니다. 특히:: 첫 번째 줄,:: 첫 글자,:: 전후::. 이 튜토리얼의 목적을 위해, 우리는 마지막 두 개의 ::::: 전후에 초점을 맞출 것입니다.

의사 요소는 일반적으로 콜론(::)을 사용하여 표시됩니다. CSS3는 의사 요소를 선언하기 위해 단일 점(:) 구문 사용을 지원하지만 콜론 표기법을 사용하는 것이 가장 좋습니다.

이것은 콜론 표기법은 의사 클래스 자리 표시자를 구별하는 데 사용됩니다.

CSS:: 요소 의사 요소 이전

It:: 의사 l 이전 "요소 앞에 나타나는 콘텐츠를 추가합니다. 웹 페이지 종종 이 요소는 단락 앞에 일부 텍스트를 추가하는 데 사용됩니다.

:: before pseudo-element is: ..

The:: before selector는 뒤에 추가됩니다. 선택기를 적용하고 싶습니다.

다음은 전면의 주요 구성 요소입니다:: 의사 요소:

CSS에서 선택기가 어떻게 작동하는지 자세히 알아보려면 CSS 선택기 가이드를 읽어보세요.

예를 들어 의사 요소가 작동하기 전에::가 어떻게 작동하는지 보여드리겠습니다.

샘플 웹 페이지의 각 링크 앞에 이모티콘(Ôîó) 링크를 추가한다고 가정합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

코드는 다음을 반환합니다.

Capture d ` screen 2020 12 09 08 00 16

다음과 같이 CSS 파일에 콘텐츠 속성을 지정하여 이를 수행했습니다.

content: "Ôîó";

규칙에 이모티콘 링크가 추가되었습니다. 우리가 만든 태그 시작 부분에서

속성 "content"의 값은 다음과 같을 수 있습니다.

HTML 요소를 content 속성에 삽입할 수 없습니다.

CSS:: after pseudo-element

CSS:: after pseudo-element를 사용하면 바로 뒤에 내용을 추가할 수 있습니다. 웹 페이지의 요소입니다. 선택기 전::과 마찬가지로, 후::는 링크나 텍스트 단락과 함께 자주 사용됩니다.

Th p seudo-element:: 구문은 다음과 같습니다.

: : after 구문은:: before pseudo-element.:: 이전에 논의한 "content" 속성에 대해 동일한 값 뒤에 허용

:: CSS 예제 이후

Hansons Bakery라는 빵집 사이트에서 링크 요소를 디자인한다고 가정합니다. 이 링크는 "Home Hansons Bakery 페이지로 이동"이라는 텍스트를 표시해야 합니다. 링크는 너비가 1픽셀인 검은색 테두리로 둘러싸여 있어야 합니다.

레이블 뒤에 텍스트가 필요합니다. 내용과 함께 표시되는 상자 이 페이지는 구운 식품 메뉴입니다. ("This" 단어 앞의 공백에 유의하십시오.) 상자에는 주황색 HTML 배경색 이 있어야 합니다.

다음 코드를 사용하여 이를 수행할 수 있습니다.

우리 코드는 다음과 유사한 콘텐츠를 생성했습니다.

< 클래스 그림 = "wp-bloc-image"> 2020년 12 09 08 00 47 1 캡처