What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
수도-요소는 무엇일까?
css pseudo-element 요소는 요소의 구체적인 부분을 스타일하기 위해서 사용되어진다.
예를든다면, 이것은 요런식으로 사용되어질 수 있다.
요소의 첫문자 혹은 첫줄 스타일 하기
요소 내용의 뒤나 앞에 내용 삽입
Notice the double colon notation - ::first-line versus :first-line
The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
주의 What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
수도-요소는 무엇일까?
css pseudo-element 요소는 요소의 구체적인 부분을 스타일하기 위해서 사용되어진다.
예를든다면, 이것은 요런식으로 사용되어질 수 있다.
요소의 첫문자 혹은 첫줄 스타일 하기
요소 내용의 뒤나 앞에 내용 삽입
Notice the double colon notation - ::first-line versus :first-line
The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
더블 클론인것을 주의하라, :first-line 과 대조적으로 ::first-line
css3 에서 수도요소로서 더블 클론은 싱글 클론표현으로 대체된다.
수도 클래스와 수도요소를 구분하기 위해서 w3c로부터 시도된 것이다.
싱글 클론 문법은 css2 와 css1안에서 수도 요소와 클래스를 위해 모두 사용되어진다.
이전 버전과의 호환성을 위해 싱글 클론 문법은 css2와 css1에서 받아 드려진다.
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
::first-line 수도 요소는 텍스트의 첫라인의 구체적인 스타일을 추가하기 위해서 사용되어진다.
다음의 예제는 모든 <p> 요소의 첫번째 텍스트 라인을 포맷한다.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all <p> elements:
::first-letter 수도 요소는 텍스트의 첫문자를 스타일을 추가하기 위해서 사용되어진다.
다음의 예제는 모든 <p> 요소의 첫 문자의 포맷팅한다.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
여러개 수도 요소
몇몇의 수도 요소는 결합되어질 수 있다.
다음의 따라오는 예제에서 단락의 첫문자는 빨간색일것이고, 나머지 첫줄의 나머지는 파란색일것이다.
단락의 나머지는 기본적인 폰트와 사이즈일 것이다.
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before the content of each <h1> element:
::before 수도 요소는 요소의 내용물의 전에 어떤 내용물을 삽입하기 위해서 사용되어진다.
다음의 예제는 각각의 <h1> 내용 전에 이미지를 삽입한다.
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after the content of each <h1> element:
after 수도 요소는 요소의 내용물 뒤에 조금의 내용물을 삽입하기 위해서 사용되어진다.
다음의 예제는 각각의 h1 요소 뒤에 이미지를 삽입한다.
'영어공부' 카테고리의 다른 글
CSS Navigation Bar (0) | 2020.01.20 |
---|---|
CSS Opacity / Transparency (0) | 2020.01.20 |
CSS Pseudo-classes (0) | 2020.01.20 |
CSS Combinators (0) | 2020.01.20 |
CSS Layout - Horizontal & Vertical Align (0) | 2020.01.19 |