css에 대한 before,after의 위조 요소

오프닝

세 번째 보도.
저는 매일 공부하는 프로그래밍 초보자입니다.
이 문장에서 나는 css의 위조 요소에 대한 학습을 총괄할 것이다.
이번에는 아주 적다.

무엇이 css의 위조 원소입니까

css의 위조 원소는 사용::before::after으로 지정된 원소의 앞뒤에 새 원소를 삽입할 수 있는 선택기입니다.
우선 간단한 사용 방법의 예다.
sample.html

<body>
    <p>Hello World</p>
</body>

sample.css

body p::after {
    content: "!";  /* "Hello World"の後ろに"!"を追加 */
}

결과는 다음과 같다.

html에서 Hello World만 기술했지만 css에서 !를 원소의 뒤에 추가했기 때문에
결과는 Hello World! 입니다.before 요소 앞에 새 요소를 삽입하고 after 요소 뒤에 새 요소를 삽입합니다.
이 위조 요소의 장점은 원시 html 코드의 가독성을 유지하는 상황에서 페이지를 성형할 수 있다는 것이다.
또한 상기 예에서 보듯이 간단하게 문자를 삽입할 수 있을 뿐만 아니라 이미지와 URL도 삽입할 수 있다.
그러나 이미지를 삽입하는 경우에는 치수를 지정할 수 없습니다.background-image에 배경으로 삽입하여 다음 문제를 피할 수 있습니다.
sample2.css

body p::after {
    content: "";  /* contentで何も入れず、疑似要素を実体化 */
    display: "inline-block";  /* blockかinline-blockに指定しないと、幅と高さの指定ができない */
    width: 100px;  /* 幅の指定 */
    height: 100px;  /* 高さの指定 */
    background-image: url("画像のurl");  /* 背景として画像を指定 */
}

아날로그 요소 자체의 너비와 높이의 변경이 가능하기 때문에 이 방법으로 이미지의 사이즈와 같은 동작을 지정할 수 있다.
잘 설정하면 다양한 그래픽과 특정 경계선 등을 만들 수 있을 것 같다.
html 코드를 엉망으로 만들 필요 없어요. 정말 고마워요.
(특히 나 같은 초보자는 더러운 전선을 대량으로 생산하기 쉽다...)
참고로 예에서 before과after 앞의 사칭은 두 개로 통일되었다
css의 최신 표준 CSS3는 2개::이고 이전 CSS2는 1개:입니다.
따라서 대상 브라우저에서 짝퉁을 사용하는 수량을 구분하거나 많은 브라우저에서 짝퉁을 먼저 적용하려면 짝퉁을 하나로 설정하는 것이 좋다.

끝날 때

이번에 css의 의심 원소에 대해 진정으로 기본 부분을 총결하였다.
위조원소 외에도 위조류가 존재한다.여기도 편하지만 아직 못 배운 부분이 많아서 계속 공부하고 싶어요.
css는 선택기와 속성에 대한 이해를 깊이 있게 하면 복잡한 표현을 할 수 있기 때문에 표현의 범위를 넓히기 위해 이해를 깊이 하고 싶습니다.

Reference

이 문제에 관하여(css에 대한 before,after의 위조 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mt_tai/items/732823ec17c1f5440fe3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다