Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS ::before &::after 선택기:실용적인 방법 가이드

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

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

이것이 바로 CSS ::before 및 ::after 의사 요소가 들어오는 곳입니다. 이러한 의사 요소를 사용하면 요소의 콘텐츠 앞이나 뒤에 콘텐츠를 삽입할 수 있습니다.

이 튜토리얼에서는 예제를 참조하여 ::before 및 ::after 의사 요소를 사용하여 웹 페이지의 콘텐츠를 장식하는 방법을 설명합니다. 이 튜토리얼을 다 읽으면 CSS에서 ::before 및 ::after 의사 요소를 사용하는 데 전문가가 될 것입니다.

CSS 의사 요소

의사 요소는 CSS 선택기에 의해 선택된 요소의 특정 부분에 스타일을 지정할 수 있는 특수 키워드입니다. 모든 의사 요소는 선택기이므로 이 문서 전체에서 의사 요소를 선택기로 지칭할 것입니다.

유사 요소는 요소에 CSS 클래스나 ID를 추가하지 않고 요소에 스타일을 적용하려는 경우에 유용합니다. 예를 들어, 웹페이지의 모든 링크 뒤에 ">" 화살표를 추가하려면 의사 요소를 사용할 수 있습니다.

CSS는 다양한 의사 요소를 제공합니다. 여기에는 ::first-line, ::first-letter, ::before 및 ::after가 포함됩니다. 이 튜토리얼에서는 마지막 두 가지인 ::before와 ::after에 중점을 둘 것입니다.

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

의사 클래스와 의사 요소를 구별하기 위해 두 개의 콜론 표기법이 사용되기 때문입니다.

CSS::의사 요소 앞

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

::before 의사 요소의 구문은 다음과 같습니다:

selector::before {
 // CSS rules
}

::before 선택기는 선택기를 적용하려는 요소의 이름 뒤에 추가됩니다.

::before 의사 요소의 주요 구성 요소는 다음과 같습니다.

  • 선택기 ::before를 적용해야 하는 선택기를 나타냅니다. 따라서 모든 "a" 태그에 ::before 요소를 적용하려는 경우 선택기는 "a"가 됩니다. 또는 클래스 이름이 "link"인 모든 요소 앞에 ::before 요소를 적용하려면 ".link" 선택기를 사용하세요.
  • ::이전 선택기 앞에 CSS 규칙의 내용을 추가하도록 브라우저에 지시합니다.
  • CSS 규칙 선택기 전에 적용되어야 하는 규칙입니다.

CSS에서 선택기가 작동하는 방식에 대해 자세히 알아보려면 CSS 선택기 가이드를 읽어보세요.

::before 의사 요소가 어떻게 작동하는지 예시를 통해 살펴보겠습니다.

::CSS 예 전

예제 웹 페이지의 모든 링크 앞에 링크 이모티콘(🔗)을 추가한다고 가정해 보겠습니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다:

우리 코드는 다음을 반환합니다:

CSS ::before &::after 선택기:실용적인 방법 가이드

HTML 파일에서 Career Karma 홈페이지로 연결되는 HTML 태그를 정의했습니다. 그런 다음 CSS 파일에서 ::before 의사 요소를 사용하여 웹 페이지의 모든 태그 앞에 링크 이모티콘을 추가했습니다.

우리는 CSS 파일에 다음과 같은 콘텐츠 속성을 지정하여 이를 달성했습니다.

내용:“🔗”;

우리 규칙은 우리가 만든 태그

시작 부분에 링크 이모티콘을 추가했습니다.

"content" 속성의 값은 다음과 같습니다:

  • '이것은 문자열입니다.'와 같은 문자열입니다.
  • 'counter(li);'와 같은 카운터입니다.
  • 'url(/path/to/image.png)'와 같은 이미지.
  • ''와 같은 빈 문자열입니다.

콘텐츠 속성에는 HTML 요소를 삽입할 수 없습니다.

CSS ::의사 요소 이후

CSS ::after 의사 요소를 사용하면 웹 페이지의 요소 바로 뒤에 콘텐츠를 추가할 수 있습니다. ::before 선택기와 마찬가지로 ::after는 링크나 텍스트 단락과 함께 자주 사용됩니다.

::after 의사 요소의 구문은 다음과 같습니다:

selector::after {
 // CSS rules
}

::after 구문은 ::before 의사 요소 구문과 동일합니다. ::after는 앞서 논의한 "content" 속성에 대해 동일한 값을 허용합니다.

::CSS 예 후

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

CSS ::before &::after 선택기:실용적인 방법 가이드

"Career Karma는 제가 가장 필요할 때 제 삶에 들어왔고 빠르게 부트캠프에 적응할 수 있도록 도와주었습니다. 졸업한 지 두 달 만에 저는 제 삶의 가치와 목표에 맞는 꿈의 직업을 찾았습니다!"

Venus, Rockbot의 소프트웨어 엔지니어

귀하에게 적합한 부트캠프 찾기

라벨 뒤에 이 페이지는 구운 제품 메뉴를 보여줍니다.라는 내용이 포함된 텍스트 상자가 표시되기를 원합니다. (“This”라는 단어 앞의 공백에 주목하세요.) 우리 상자는 주황색 HTML 배경색을 가져야 합니다.

다음 코드를 사용하여 이 작업을 수행할 수 있습니다:

index.html
<a href="/" class="label">Go to the Hansons Bakery homepage.</a>
styles.css
.label {
 border: 1px solid black;
}
.label::after {
 content: " This page shows off our baked goods menu.";
 background-color: orange;
}

우리 코드는 다음과 같은 콘텐츠를 생성했습니다:

CSS ::before &::after 선택기:실용적인 방법 가이드

우리 코드에서는 태그를 사용하여 홈페이지에 대한 링크를 정의했습니다. 링크와 연결된 클래스 이름은 .label입니다. .

CSS 파일에서 클래스 이름이 .label인 모든 요소 주위에 1px 너비의 검은색 실선 테두리를 적용했습니다. .

그런 다음 ::after 선택기를 사용하여 앞에서 설명한 텍스트 상자를 만들었습니다. 텍스트 상자에는 "이 페이지는 구운 식품 메뉴를 보여줍니다."라는 내용이 표시됩니다. 우리 상자의 배경은 주황색입니다.

결론

::before 및 ::after 의사 요소를 사용하면 CSS 규칙에서 선택한 요소의 특정 부분에 콘텐츠를 추가할 수 있습니다. 예를 들어, ::before 선택기를 사용하여 링크 앞에 텍스트를 추가할 수 있습니다. ::after 선택기를 사용하면 텍스트 단락 뒤에 이모티콘을 추가할 수 있습니다.

이 튜토리얼에서는 예제를 참조하여 CSS의 의사 요소의 기본 사항과 ::before 및 ::after 의사 요소를 사용하는 방법을 논의했습니다. 이제 전문 웹 디자이너처럼 CSS 코드에서 ::before 및 ::after 의사 요소를 사용할 준비가 되었습니다.

최고의 CSS 웹 개발자 학습 리소스, 도서, 강좌에 대한 조언을 보려면 CSS를 배우는 방법 가이드를 확인하세요.