CSS에서 의사 요소 전후를 사용하는 방법

CSS에서 의사 요소 전후를 사용하는 방법

의사 요소는 CSS에서 사용할 수 있는 고급 선택기 중 하나입니다. 이러한 선택기 뒤에 있는 주요 목적은 주어진 웹 페이지의 기본 구조를 만드는 데 사용되는 HTML 문서를 변경하지 않고 고유한 스타일을 만드는 것입니다.





CSS에서 의사 요소를 사용하는 방법은 다음과 같습니다.



토렌트 다운로드 속도를 높이는 방법

일반적인 의사 요소

웹 개발자의 삶을 더 쉽게 만드는 데 사용할 수 있는 의사 요소의 광범위한 목록이 있습니다. 이러한 유사 요소 중 일부는 다음과 같습니다.





  • 전에
  • 후에
  • 배경
  • 첫째 줄
  • 첫 편지

특정 상황에서 일부 의사 요소는 다른 것보다 더 적합한 것으로 판명되지만 일정하게 유지되는 한 가지는 모든 의사 요소를 사용하기 위한 일반적인 구조입니다.

의사 요소 구조 예


selector::pseudo-element{
/* css code */
}

HTML 요소를 선택기로 사용할 수 있지만 레이아웃에서 의도하지 않은 요소를 타겟팅하지 않도록 클래스 또는 ID를 사용하는 것이 좋습니다. 중괄호 사이에 원하는 위치에 삽입하려는 요소, 스타일 또는 데이터를 넣어야 합니다.



이전 및 이후 의사 요소가 목록에서 가장 많이 사용되며 실용적인 사용 방법이 많다는 점을 감안할 때 이유를 찾는 것은 어렵지 않습니다.

CSS에서 Before Pseudo 요소 사용

불가능하지는 않지만 CSS에서 읽을 수 있는 텍스트로 이미지를 오버레이하는 것은 어렵습니다. 이는 주로 이미지와 텍스트가 웹 페이지에서 동일한 위치를 차지하기 때문입니다.



비교적 쉽게 텍스트 그룹의 배경으로 이미지 보내기 그러나 그 이미지가 너무 밝으면 그 위에 있는 텍스트를 압도하는 경향이 있습니다. 이러한 경우 다음 단계는 opacity 속성을 사용하여 이미지를 덜 불투명하게 만드는 것입니다.

유일한 문제는 이미지와 텍스트가 같은 위치를 차지하기 때문에 텍스트도 어느 정도 투명해집니다.



이 문제를 해결하는 몇 가지 효과적인 방법 중 하나는 before 의사 요소를 사용하는 것입니다.

Before Pseudo 요소 예제 사용


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

위의 코드는 아래의 HTML LandingPage 클래스와 함께 사용할 수 있도록 작성되었습니다. 위의 코드에서 볼 수 있듯이 before pseudo-element를 사용하여 이미지를 대상으로 지정하고 이미지가 텍스트와 결합되기 전에 opacity 속성을 사용할 수 있습니다.





This is the result of using the before pseudo-element
to overlay and image with readable text.


그러면 아래 이미지와 같이 오버레이가 이미지 위에 배치되고 일반 텍스트가 맨 위에 표시됩니다.

CSS에서 After Pseudo 요소 사용

After pseudo-element의 실제 사용은 HTML 형식의 생성을 돕는 것입니다. 대부분의 양식은 양식을 성공적으로 제출하는 데 필요한 데이터가 필요한 필드 집합으로 만들어집니다.

양식의 필드에 데이터가 필요함을 나타내는 한 가지 방법은 이 필드의 레이블 뒤에 별표를 배치하는 것입니다. 후 의사 요소는 이를 수행하는 실용적인 방법을 제공합니다.

After Pseudo-element 예제 사용


.required::after{
content: '*';
color: red;
}

양식의 CSS 섹션에 위의 코드를 삽입하면 필요한 클래스가 포함된 모든 레이블 바로 뒤에 빨간색 별표가 표시됩니다. 후 의사 요소는 구조에서 스타일을 분리하는 데 도움이 되기 때문에 이 예제에서도 실용적입니다(소프트웨어 개발에서 항상 이상적임).

업그레이드하려는 데스크탑 컴퓨터가 있습니다.

콘텐츠 속성

위의 유사 요소 이후 예에서 볼 수 있듯이 content 속성은 웹 페이지에 새 콘텐츠를 삽입하는 데 사용되는 도구입니다. 이 속성은 의사 요소 이전 및 이후에만 사용됩니다.

콘텐츠 속성에 피드할 수 있는 콘텐츠가 없더라도(위의 의사 요소 이전 예에서와 같이) 여전히 이전 또는 이후의 매개변수 내에서 콘텐츠 속성을 사용해야 합니다. 의사 요소를 사용하여 의도한 대로 작동하도록 합니다.

이제 CSS에서 의사 요소를 사용할 수 있습니다.

이 기사에서는 CSS 프로그램에서 의사 요소를 식별하고 사용하는 방법을 배웠습니다. 의사 요소 전후에 대해 소개하고 둘 다 사용하는 실용적인 방법을 제공했습니다. 또한 전후 유사 요소를 성공적으로 사용하기 위해 콘텐츠 속성이 필요한 이유를 알 수 있었습니다.

공유하다 공유하다 트위터 이메일 10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제

CSS에 대한 도움이 필요하십니까? 이 기본 CSS 코드 예제를 먼저 시도한 다음 자신의 웹 페이지에 적용하십시오.

다음 읽기 관련 항목
  • 프로그램 작성
  • 웹 디자인
  • CSS
저자 소개 카데이샤 킨(21편 게재)

Kadeisha Kean은 전체 스택 소프트웨어 개발자이자 기술/기술 작가입니다. 그녀는 가장 복잡한 기술 개념 중 일부를 단순화하는 독특한 능력을 가지고 있습니다. 기술 초보자라면 누구나 쉽게 이해할 수 있는 소재를 생산합니다. 그녀는 글쓰기, 흥미로운 소프트웨어 개발 및 세계 여행(다큐멘터리를 통해)에 열정적입니다.

카데이샤 킨이 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.