::앞과::뒤에 위조원소 설명

13315 단어 cssbeginnerstutorialhtml
만약 당신이 나처럼 위조원소::before와 ::after를 사용한다면 과거는 흑마법과 같다. 그들이 어떻게 일을 했는지는 완전한 수수께끼이다. 나는 그들이 무엇을 해야 하는지만 알고 있지만 어떻게 일을 했는지 모른다. 그래서 오늘 나는 그들이 외운 물건과 그들이 어떻게 일을 했는지 설명하고 싶다.
기본 HTML 단락과 대표적인 CSS 코드로 시작하여 거기서부터 구축할 것입니다.
초기 HTML 코드
 <body>
   <p>This is a paragraph.</p>
 </body>
초기 CSS 코드
/* regular css resetting */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* presentational styles */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3b3b3b;
  color: #ddd;
}

p {
  font-size: 2rem;
  margin: 2.5rem;
}
브라우저에서 내보내기

하지만 시작하기 전에 위원소가 무엇인지 알아야 한다.위조 원소의 공식 정의는 다음과 같다.
선택기에 추가된 키워드는 선택한 요소의 특정 부분에 대한 스타일을 설정하는 데 사용됩니다.
기본적으로, 위조 요소는 우리가 원소의 특정한 부분을 설계할 수 있도록 허락하며, 완전히 변경할 필요가 없다.예를 들어 p 위조 요소를 사용하여 단락::first-letter의 첫 번째 자모의 색을 빨간색으로 설정하고 단어'this'의 색을 빨간색으로 설정할 수 있습니다.
p::first-letter {color: red;}
처음에 위조원소는 짝퉁 약속을 사용했지만 CSS3는 짝퉁 표시:hover와 :link 등 위조류, 짝퉁 표시::before와 ::after 등 위조원소를 도입했다.위류와 위원소를 구분하기 위해서다.
브라우저는 여전히 :before 와 :after 을 지원하지만, 우리는 이중 사칭 약속을 사용하는 것이 매우 중요하다. 왜냐하면 브라우저의 사용이 계속 진행되고 있기 때문에, 그들이 장차 단열 약속을 지원하지 않을지 모른다.
이제 우리는 위원소가 무엇인지 알게 되었다. 우리는 ::before와 ::after의 위원소를 연구하기 시작할 수 있다.

위조 원소 전후

::before와 ::after는 선택한 요소의 첫 번째 서브 요소와 마지막 서브 요소를 만들었습니다. 따라서 ::before와 ::after의 위조 요소를 열 때 우리가 추가할 첫 번째 요소는 content: 속성을 통해 내용을 추가하는 것입니다.이렇게 하면 선택한 요소에 정의된 내용이 삽입됩니다.
예를 들어 ::before 단락에 p 위조 요소를 추가하여 content: 값을'내용 이전'으로 설정하고 color를 빨간색으로 설정합니다.
p::before {
  content: "before the content"; /* string */
  color: red;
}
이렇게 하면 요소의 주요 컨텐트("단락입니다") 앞에 빨간색 컨텐트 앞 문자열이 나타납니다.

크롬 개발 도구를 볼 때 p 내용은 원소 자체가 아니라 ::before 내용에 앞서 주의해야 한다.p 요소는 여전히 p 내용을 포함한다.

만약 우리가 ::before 위조 요소를 ::after 단락에 추가하면 결과는 이전과 같지만 내용은 주 요소의 내용 뒤에 놓일 것이다.
p::after {
  content: "after the content"; /* string */
  color: orange;
}

이전과 마찬가지로 우리p의 내용은 ::after 원소 내용 뒤에 놓이지만 p 원소 자체 내부에 있다.

우리는 원소에서 원소를 창조한다고 말할 수 있다.또 주의해야 할 것은 위조 요소 중에서 내용을 선택할 수 없다는 것이다. 아래 그림과 같다.

색상, 너비, 높이 등과 같은 일반 CSS 속성을 위조 요소에 적용할 수 있습니다. 이러한 속성은 위조 요소의 내용에만 영향을 주고 원소의 원래 내용에는 영향을 주지 않습니다.
위조 요소에 옅은 회색의 배경색, 채우기, 테두리, 경계선을 적용합시다.
p::before {
  content: "before the content"; /* string */
  color: red;
  background-color: lightgrey;
  padding: 15px;
  border-top: 5px solid green;
  border-bottom: 3px dotted red;
  margin-right: 10px;
}
우리가 얻은 것은

우리는 심지어 p를 사용하여 위조 요소의 표시 속성을 변경할 수 있다.

만약 위조 원소에 display: block; 속성이 포함되지 않는다면 무슨 일이 일어날까요?아래의 예에서 나는 content 위조 원소의 콘텐츠 속성을 주석해 버렸다.
p::after {
  /* content: "after the content"; */ /* string */
  color: orange;
}
우리가 얻은 것은

비록 그것이 여전히 우리의 코드에 있지만, 우리는 위조 요소 ::after 가 사라진 것을 볼 수 있다.::after 속성을 설정하지 않으면 기본 디스플레이가 없음content:으로 설정되어 요소가 표시되지 않습니다.
만약 우리가 내용을 빈 문자열 (display: none; 로 보존한다면, 아래의 예시와 같이 위조 요소를 되돌려줍니다. 우리는 개발 도구에서 그것을 볼 수 있고, 심지어는 이를 양식화할 수 있습니다.
p::after {
  content: ""; /* string */
  width: 30px;
  height: 30px;
  display: inline-block;
  background: tomato;
}

너는 이런 위조 요소로 멋진 조형을 할 수 있고 심지어는 애니메이션을 만들 수도 있다.
p::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 5px;
  background-color: tomato;
}

p::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background-color: tomato;
}

단락에 따옴표를 추가합니다.이 따옴표들에 스타일을 설정하고 크기, 색깔, 간격, 채우기 등을 줄 수 있다는 것을 기억해라.
p::before {
  content: open-quote;
}

p::after {
  content: close-quote;
}

이제 CSS 코드의 맨 위에 있는 리셋으로 돌아가서 모든 내용을 테두리 상자와 0 테두리 간격과 채우기로 설정합니다. 그러나 이것은 위조 요소에 적용되지 않습니다.이러한 리셋 속성을 적용하려면 다음과 같이 모든 위조 요소에 전문적으로 추가해야 한다.
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

나는 이 간단한 지침이 당신이 위조원소content: "";와 ::before의 작업 원리, 그리고 그것들의 용도를 더욱 분명하게 이해하는 데 도움을 줄 수 있기를 바랍니다.
어떤 건의가 있거나 글에 내용을 추가하고 싶으면 아래에 댓글을 남겨 주십시오.
또한, 연락하고 싶으면 다음 사이트에서 저를 찾을 수 있습니다.)
Enebular로 프로세스 버전 관리하는 방법
혼란스러운 코드에 대해서는

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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